Skip to content
IzzyBlazor 0.1.0-alpha.17

Enter all results ↑ ↓ move Esc close

Popover

Non-modal content beside a trigger.

IzzyBlazor.Popover in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly and its doc comments.

Properties (15)

Labelstring?

The default trigger's text.

CloseLabelstring? = "Close"

The close button's name. Defaults to "Close".

AccentAccent = Accent.Neutral

The default trigger's color. Defaults to Neutral.

VariantButtonVariant = ButtonVariant.Outline

The default trigger's weight. Defaults to ButtonVariant.Outline.

SizeControlSize = ControlSize.Md

The default trigger's size.

StartIconIconData?

An icon before the default trigger's text.

TriggerRenderFragment<IReadOnlyDictionary<string, object>>?

A custom trigger in place of the default button. Pass its context on with @attributes="context". It must be a button.

Titlestring?

A heading at the top, which also names the popover for screen readers.

ShowCloseButtonbool?

Shows a close button at the top. Always shown in PopoverMode.Manual unless set to false.

ModePopoverMode = PopoverMode.Auto

How it closes. Defaults to PopoverMode.Auto: Escape, a click outside, or another popover opening.

PlacementPlacement = Placement.BottomStart

Where it opens. Defaults to Placement.BottomStart.

PanelWidthLength? (computed)

The width of the panel, such as Length.Rem(32) for a filter form. Defaults to the content's width, up to 24rem. Never wider than the screen.

ChildContentRenderFragment?

The content.

@bind-Openbool = false @bind: Interactive only

Whether it is open. Use @bind-Open to follow changes on interactive pages.

Idstring?

The element id. Generated when not set.

Plus 16 item props and 4 common props.

Show them here

Events (0)

No events.

Types (6)

Accent

class

The color of a control: buttons, badges, tags, banners, progress bars and menu items. Primary, Neutral and Danger are the roles; emphasis comes from the variant (solid, soft, outline, ghost, link), not from more colors. For one control in another color, use Of (any CSS color) or Token (a theme token); text on it is chosen for contrast.

Accent members
MemberDescription
Primary

The brand color, for the main action.

Neutral

A quiet, gray action.

Danger

A destructive action, such as Delete.

Of(string css)

Any CSS color, such as "#0d9488". Text on it is black or white, whichever reads better.

Token(string name)

A theme token, such as "brand" for --ib-color-brand; text on it uses --ib-color-on-brand when the theme defines it.

From(Color color)

A Color as an accent, such as Color.Success.

ButtonVariant

enum

A button's visual weight, from strongest to quietest.

ButtonVariant values
ValueDescription
Solid

Filled with the accent color. For the main action.

Soft

A light tint of the accent color.

Outline

An accent-colored border on a transparent background.

Ghost

Transparent until hovered. For toolbars and dense layouts.

Link

Looks like a link.

ControlSize

enum

The height of interactive controls. Shared by buttons and form fields, so a button and an input of the same size line up in a row.

ControlSize values
ValueDescription
Sm

32px tall, small text.

Md

36px tall (the default).

Lg

44px tall, large text. For touch-first and marketing pages.

Length

struct

A width, height or flex basis: a size token, a keyword, or a CSS length built with a factory such as Rem.

Length members
MemberDescription
Sm

640px (matches the sm breakpoint).

Md

768px (matches the md breakpoint).

Lg

1024px (matches the lg breakpoint).

Xl

1280px (matches the xl breakpoint).

Prose

A comfortable reading width, 68 characters.

Full

100% of the containing block.

Auto

auto.

FitContent

fit-content: as wide as the content, up to the available space.

MinContent

min-content.

MaxContent

max-content.

Px(double value)

Pixels.

Rem(double value)

Root ems (16px each by default).

Percent(double value)

Percent of the containing block.

Ch(double value)

Character widths, for text measures.

Vw(double value)

Percent of the viewport width.

Dvh(double value)

Percent of the dynamic viewport height (accounts for mobile browser bars).

Of(string css)

Any CSS length, such as calc(100% - 2rem). Checked for unsafe characters.

Css string

The CSS value this length renders as.

Placement

enum

Where a floating element sits next to the thing that opened it. Start and End follow the reading direction, so they flip in right-to-left languages.

Placement values
ValueDescription
BottomStart

Below, lined up with the start edge (the default for menus).

Bottom

Below, centered.

BottomEnd

Below, lined up with the end edge.

TopStart

Above, lined up with the start edge.

Top

Above, centered (the default for tooltips).

TopEnd

Above, lined up with the end edge.

Start

Beside, on the start side (the left in left-to-right languages).

End

Beside, on the end side (the right in left-to-right languages).

PopoverMode

enum

How a Popover closes.

PopoverMode values
ValueDescription
Auto

Closes on Escape, on a click outside, or when another popover opens (the default).

Manual

Stays open until its trigger or a close button closes it.