Drawer

A dialog that slides in from an edge.

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

Properties (12)

Titlestring?From Dialog

The heading, which also names the dialog for screen readers.

CloseLabelstring? = "Close"From Dialog

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

ChildContentRenderFragment?From Dialog

The body, plus any DialogHeader and DialogFooter.

ContentPaddingResponsive<int>ResponsiveFrom Dialog

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.MdFrom Dialog

The width. Defaults to DialogSize.Md.

PlacementDialogPlacement = DialogPlacement.EndFrom Dialog

Center (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 = trueFrom Dialog

Closes when the backdrop is clicked. Defaults to true. Escape always closes it.

ShowCloseButtonbool = trueFrom Dialog

Shows the close button in the header. Defaults to true.

InsideFormbool = falseFrom Dialog

Set 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"From 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 = 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 (2)

`DialogPlacement`

enum

Where a Dialog appears.

DialogPlacement values
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`

enum

The 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.

DialogSize values
Value	Description
`Sm`	24rem. Confirmations.
`Md`	32rem (the default).
`Lg`	48rem. Forms with two columns.
`Xl`	64rem. Tables and previews.
`Full`	The whole viewport.