Drawer
IzzyBlazor.Drawer in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly
and its doc comments.
Properties (12)
Titlestring?The heading, which also names the dialog for screen readers.
CloseLabelstring? = "Close"The close button's name. Defaults to "Close".
ChildContentRenderFragment?The body, plus any DialogHeader and DialogFooter.
Padding inside the body, in spacing steps, in place of the dialog's. 0 lets content such as a table or image run edge to edge.
SizeDialogSize = DialogSize.MdThe width. Defaults to DialogSize.Md.
PlacementDialogPlacement = DialogPlacement.EndCenter (the default), a full-height drawer on the start or end side, or a full-width sheet along the top or bottom. A Drawer defaults to DialogPlacement.End.
CloseOnBackdropbool = trueCloses when the backdrop is clicked. Defaults to true. Escape always closes it.
ShowCloseButtonbool = trueShows the close button in the header. Defaults to true.
InsideFormbool = falseSet when the dialog is inside a <form>. Forms can't nest, so the dialog then closes with the native close command (with a script fallback in older browsers) instead of its own method="dialog" form, and its buttons don't submit the outer form.
QueryKeystring? = "dialog"The query-string key that opens a dialog from a link: ?dialog=my-id renders the dialog with that id already open. Defaults to dialog; null turns it off.
@bind-Openbool = falseWhether it is open. Use @bind-Open to follow changes on interactive pages.
Idstring?The element id. Generated when not set.
Item props (from LayoutItemBase)
Margin on all sides, in spacing steps (-16 to 16; one step = 4px).
Width.
Minimum width.
Maximum width.
Growbool = falseWhether to grow into free space inside a Stack, Row or Column: <Box Grow>.
Shrinkbool = trueWhether to shrink when space is short inside a Stack, Row or Column. Defaults to true; Shrink="false" keeps the size.
Starting size inside a Stack, before growing or shrinking.
Alignment across the parent's direction, overriding the parent's Align for this component only, such as a button lined up with the bottom of labeled fields in a Row.
Common props (from IzzyComponentBase)
Classstring?Extra CSS classes, merged after the component's own classes.
Stylestring?Inline style, appended after the component's generated custom properties.
VisibleFromBreakpoint?Shows the component only from this breakpoint up, such as header links for wide screens.
Events (0)
No events.
Types (2)
DialogPlacement
enumWhere a Dialog appears.
| Value | Description |
|---|---|
Center | In the middle of the screen (the default). |
Start | A full-height drawer on the start side. |
End | A full-height drawer on the end side. |
Top | A full-width sheet along the top edge, as tall as its content. |
Bottom | A full-width sheet along the bottom edge, as tall as its content. Suits phones. |
DialogSize
enumThe width of a Dialog. A Drawer, or a dialog at the start or end edge, is narrower: Sm 20rem, Md 24rem, Lg 32rem, Xl 40rem.
| Value | Description |
|---|---|
Sm | 24rem. Confirmations. |
Md | 32rem (the default). |
Lg | 48rem. Forms with two columns. |
Xl | 64rem. Tables and previews. |
Full | The whole viewport. |