{ "version": "0.1.0-alpha.17", "components": [ { "name": "Accordion", "displayName": "Accordion", "fullName": "IzzyBlazor.Accordion", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA stack of AccordionItems. Each item is a native \u003Ccode\u003E\u0026lt;details\u0026gt;\u003C/code\u003E, so items open and close with JavaScript off. Exclusive gives every item the same name attribute, so the browser keeps only one open at a time, also without script.\u003C/p\u003E", "examples": [ "\u003CAccordion Exclusive Size=\u0022ControlSize.Sm\u0022\u003E\n \u003CAccordionItem Title=\u0022Shipping\u0022\u003E...\u003C/AccordionItem\u003E\n \u003CAccordionItem Title=\u0022Returns\u0022\u003E...\u003C/AccordionItem\u003E\n\u003C/Accordion\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EEach item\u0026#39;s \u003Ccode\u003Esummary\u003C/code\u003E takes Enter and Space and is announced as expanded or collapsed by the browser, with JavaScript off too.\u003C/li\u003E\u003Cli\u003ETab moves from item to item; there are no arrow-key or Home/End shortcuts.\u003C/li\u003E\u003Cli\u003EThe title isn\u0026#39;t a heading, so items don\u0026#39;t appear in a screen reader\u0026#39;s list of headings. AccordionHeader is drawn inside the \u003Ccode\u003Esummary\u003C/code\u003E: keep it to inline content, with no links or buttons.\u003C/li\u003E\u003Cli\u003EA \u003Ccode\u003EDisabled\u003C/code\u003E item sets \u003Ccode\u003Earia-disabled\u003C/code\u003E on its \u003Ccode\u003Esummary\u003C/code\u003E and leaves the tab order; the script also stops it from toggling.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Collapsible", "Tabs" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Exclusive", "type": "bool", "default": "false", "summary": "\u003Cp\u003EKeeps only one item open at a time. Opening one closes the others.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "AccordionVariant", "default": "AccordionVariant.Separated", "summary": "\u003Cp\u003EHow the items are drawn. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.AccordionVariant.Separated\u0022\u003E\u003Ccode\u003EAccordionVariant.Separated\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003ESpacing and title size: \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Sm\u0022\u003E\u003Ccode\u003EControlSize.Sm\u003C/code\u003E\u003C/a\u003E for sidebars and dense pages, \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Lg\u0022\u003E\u003Ccode\u003EControlSize.Lg\u003C/code\u003E\u003C/a\u003E for FAQ pages. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContentPadding", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EPadding inside every item\u0026#39;s content, in spacing steps. By default it lines up with the titles; \u003Ccode\u003E0\u003C/code\u003E lets content such as a table run edge to edge.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "ContentGap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between the children of every item\u0026#39;s content, in spacing steps.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EThe shared \u003Ccode\u003Ename\u003C/code\u003E for exclusive items. Generated when not set; set it to keep several accordions in one group.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe \u003Ca href=\u0022cref:T:IzzyBlazor.AccordionItem\u0022\u003E\u003Ccode\u003EAccordionItem\u003C/code\u003E\u003C/a\u003Es.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "AccordionVariant", "ControlSize" ] }, { "name": "AccordionHeader", "displayName": "AccordionHeader", "fullName": "IzzyBlazor.AccordionHeader", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EHeading content for an \u003Ca href=\u0022cref:T:IzzyBlazor.AccordionItem\u0022\u003E\u003Ccode\u003EAccordionItem\u003C/code\u003E\u003C/a\u003E in place of its \u003Ccode\u003ETitle\u003C/code\u003E, such as a title with a badge. Keep it to inline content: it\u0026#39;s drawn in the item\u0026#39;s \u003Ccode\u003Esummary\u003C/code\u003E. Write it directly in the item.\u003C/p\u003E", "examples": [ "\u003CAccordionHeader\u003EBilling \u003CBadge\u003E2\u003C/Badge\u003E\u003C/AccordionHeader\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "AccordionItem", "displayName": "AccordionItem", "fullName": "IzzyBlazor.AccordionItem", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EOne section of an Accordion: a native \u003Ccode\u003E\u0026lt;details\u0026gt;\u003C/code\u003E with the title in its \u003Ccode\u003E\u0026lt;summary\u0026gt;\u003C/code\u003E. The browser opens and closes it; on interactive pages @bind-Open follows along.\u003C/p\u003E", "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EThe heading text. Use an \u003Ca href=\u0022cref:T:IzzyBlazor.AccordionHeader\u0022\u003E\u003Ccode\u003EAccordionHeader\u003C/code\u003E\u003C/a\u003E for richer content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the heading.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStops the item from being opened or closed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContentPadding", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EPadding inside the content, in spacing steps, in place of the accordion\u0026#39;s. \u003Ccode\u003E0\u003C/code\u003E lets content such as a table or image run edge to edge.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "ContentGap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between the content\u0026#39;s children, in spacing steps, in place of the accordion\u0026#39;s.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content. It is laid out as a column with a gap, so paragraphs, lists and buttons are spaced without a wrapper.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Open", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it is open. Use \u003Ccode\u003E@bind-Open\u003C/code\u003E to follow changes on interactive pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" } ], "events": [], "methods": [], "types": [] }, { "name": "Alert", "displayName": "Alert", "fullName": "IzzyBlazor.Alert", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA message on the page: an icon, an optional title, the message and optional actions (AlertActions, written last in the message).\u003C/p\u003E", "remarks": "\u003Cp\u003EDismissible adds a close button that works with no script: a visually hidden checkbox and its label, with CSS :has(:checked) hiding the alert. With the script it is a real button (\u003Ccode\u003E\u0026lt;ib-dismiss\u0026gt;\u003C/code\u003E), and focus moves to the next control when the alert closes. On interactive pages @bind-Dismissed follows it, and setting Dismissed from C# hides or shows it again. On a static page the script keeps it closed through an enhanced post or navigation to the same page, unless it\u0026#39;s in the form that posted or its text changed (dismiss.ts).\u003C/p\u003E", "examples": [ "\u003CAlert Status=\u0022Status.Success\u0022 Title=\u0022Saved\u0022\u003EYour changes are live.\u003C/Alert\u003E\n\u003CAlert Status=\u0022Status.Warning\u0022 Dismissible\u003EYour trial ends in 3 days.\u003C/Alert\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EDanger and Warning alerts are \u003Ccode\u003Erole=\u0026quot;alert\u0026quot;\u003C/code\u003E, so screen readers announce them at once when they appear; the rest are \u003Ccode\u003Erole=\u0026quot;status\u0026quot;\u003C/code\u003E, read politely. \u003Ccode\u003EAnnounce\u003C/code\u003E turns this off.\u003C/li\u003E\u003Cli\u003EScreen readers hear the status in words before the message (\u0026quot;Error: \u0026quot;), from \u003Ccode\u003EStatusLabel\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith script, the close control is a \u003Ccode\u003Ebutton\u003C/code\u003E named \u0026quot;Dismiss\u0026quot; (\u003Ccode\u003EDismissLabel\u003C/code\u003E); when it closes the alert, focus moves to the next control after it, or else the one before.\u003C/li\u003E\u003Cli\u003EWith JavaScript off, it\u0026#39;s a visually hidden checkbox named \u0026quot;Dismiss\u0026quot;: Tab reaches it (the ring shows on the close icon), screen readers call it a checkbox, and Space checks it. Focus isn\u0026#39;t moved when the alert hides, so the browser drops it to the page.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Banner", "ToastRegion", "EmptyState" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, a dismissible alert\u0027s close button is a checkbox to screen readers, and focus doesn\u0027t move on when it closes." }, "properties": [ { "name": "Status", "type": "Status", "default": "Status.Info", "summary": "\u003Cp\u003EWhat the message means; sets the color and icon. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Status.Info\u0022\u003E\u003Ccode\u003EStatus.Info\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "AlertVariant", "default": "AlertVariant.Soft", "summary": "\u003Cp\u003EHow it\u0026#39;s drawn. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.AlertVariant.Soft\u0022\u003E\u003Ccode\u003EAlertVariant.Soft\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EA short bold line above the message.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe message, and any \u003Ca href=\u0022cref:T:IzzyBlazor.AlertActions\u0022\u003E\u003Ccode\u003EAlertActions\u003C/code\u003E\u003C/a\u003E written last.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon in place of the status\u0026#39;s own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HideIcon", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELeaves out the icon.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dismissible", "type": "bool", "default": "false", "summary": "\u003Cp\u003EAdds a close button. Works with JavaScript off.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dismissed", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it has been dismissed. Use \u003Ccode\u003E@bind-Dismissed\u003C/code\u003E on interactive pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "Announce", "type": "bool", "default": "true", "summary": "\u003Cp\u003EWhether screen readers announce it when it appears (\u003Ccode\u003Erole=\u0026quot;alert\u0026quot;\u003C/code\u003E for danger and warning, \u003Ccode\u003Erole=\u0026quot;status\u0026quot;\u003C/code\u003E otherwise). Defaults to true; toasts turn it off because their region announces them.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StatusLabel", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EWhat kind of message it is, read to screen readers before it (the icon and color carry it visually). Defaults to \u0026quot;Info\u0026quot;, \u0026quot;Success\u0026quot;, \u0026quot;Warning\u0026quot; or \u0026quot;Error\u0026quot; by \u003Ca href=\u0022cref:P:IzzyBlazor.Alert.Status\u0022\u003E\u003Ccode\u003EStatus\u003C/code\u003E\u003C/a\u003E (from \u003Ca href=\u0022cref:T:IzzyBlazor.IzzyText\u0022\u003E\u003Ccode\u003EIzzyText\u003C/code\u003E\u003C/a\u003E), and nothing for Neutral. Set it to \u0026quot;\u0026quot; to leave it out.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "DismissLabel", "type": "string?", "default": "\u0022Dismiss\u0022", "summary": "\u003Cp\u003EThe close button\u0026#39;s accessible name. Defaults to \u0026quot;Dismiss\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "AlertVariant", "Status" ] }, { "name": "AlertActions", "displayName": "AlertActions", "fullName": "IzzyBlazor.AlertActions", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EButtons or links below an \u003Ca href=\u0022cref:T:IzzyBlazor.Alert\u0022\u003E\u003Ccode\u003EAlert\u003C/code\u003E\u003C/a\u003E\u0026#39;s message, such as \u0026quot;Retry\u0026quot; or \u0026quot;Details\u0026quot;. Write it last in the alert; it\u0026#39;s drawn where it is. A row like \u003Ca href=\u0022cref:T:IzzyBlazor.Row\u0022\u003E\u003Ccode\u003ERow\u003C/code\u003E\u003C/a\u003E, with \u003Ccode\u003EGap\u003C/code\u003E, \u003Ccode\u003EAlign\u003C/code\u003E, \u003Ccode\u003EJustify\u003C/code\u003E and \u003Ccode\u003EWrap\u003C/code\u003E (it wraps by default).\u003C/p\u003E", "examples": [ "\u003CAlert Status=\u0022Status.Danger\u0022 Title=\u0022Couldn\u0027t save\u0022\u003E\n The server didn\u0027t answer.\n \u003CAlertActions\u003E\u003CButton Size=\u0022ControlSize.Sm\u0022\u003ERetry\u003C/Button\u003E\u003C/AlertActions\u003E\n\u003C/Alert\u003E" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between children, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003ECross-axis alignment. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EMain-axis distribution. Defaults to start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether children wrap onto new lines: \u003Ccode\u003E\u0026lt;Row Wrap\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E so the container sits in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Justify" ] }, { "name": "Anchor", "displayName": "Anchor", "fullName": "IzzyBlazor.Anchor", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA text link in the accent color. \u003Ca href=\u0022cref:P:IzzyBlazor.Anchor.External\u0022\u003E\u003Ccode\u003EExternal\u003C/code\u003E\u003C/a\u003E opens it in a new tab, with an icon and a note for screen readers.\u003C/p\u003E", "examples": [ "Read the \u003CAnchor Href=\u0022/docs\u0022\u003Edocs\u003C/Anchor\u003E.\n\u003CAnchor Href=\u0022https://github.com/...\u0022 External\u003EGitHub\u003C/Anchor\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Ea\u003C/code\u003E with an \u003Ccode\u003Ehref\u003C/code\u003E, so Enter and focus work as the browser defines them.\u003C/li\u003E\u003Cli\u003EThe link text is its name, so write text that makes sense on its own, not \u0026quot;Click here\u0026quot;.\u003C/li\u003E\u003Cli\u003EAn external link says it opens a new tab (\u003Ca href=\u0022cref:P:IzzyBlazor.Anchor.NewTabLabel\u0022\u003E\u003Ccode\u003ENewTabLabel\u003C/code\u003E\u003C/a\u003E), even with \u003Ca href=\u0022cref:P:IzzyBlazor.Anchor.HideExternalIcon\u0022\u003E\u003Ccode\u003EHideExternalIcon\u003C/code\u003E\u003C/a\u003E.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:F:IzzyBlazor.AnchorUnderline.Hover\u0022\u003E\u003Ccode\u003EAnchorUnderline.Hover\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:F:IzzyBlazor.AnchorUnderline.None\u0022\u003E\u003Ccode\u003EAnchorUnderline.None\u003C/code\u003E\u003C/a\u003E leave only color to mark the link in text; keep them for links whose place says \u0026quot;link\u0026quot;, such as a nav.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Button", "IconButton", "Prose" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Href", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EWhere it goes.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "External", "type": "bool", "default": "false", "summary": "\u003Cp\u003EOpens in a new tab (\u003Ccode\u003Etarget=\u0026quot;_blank\u0026quot; rel=\u0026quot;noopener noreferrer\u0026quot;\u003C/code\u003E), with an icon after the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HideExternalIcon", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELeaves out an external link\u0026#39;s icon, for repeated links where it would be noise (a list of lessons, say). Screen readers still hear \u003Ca href=\u0022cref:P:IzzyBlazor.Anchor.NewTabLabel\u0022\u003E\u003Ccode\u003ENewTabLabel\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Underline", "type": "AnchorUnderline", "default": "AnchorUnderline.Always", "summary": "\u003Cp\u003EWhen it\u0026#39;s underlined. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.AnchorUnderline.Always\u0022\u003E\u003Ccode\u003EAnchorUnderline.Always\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Inherit", "type": "bool", "default": "false", "summary": "\u003Cp\u003EUses the surrounding text color instead of the accent, still underlined, for links in muted text or on colored backgrounds.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "NewTabLabel", "type": "string?", "default": "\u0022(opens in a new tab)\u0022", "summary": "\u003Cp\u003ERead to screen readers after an external link\u0026#39;s text. Defaults to \u0026quot;(opens in a new tab)\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe link text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "AnchorUnderline" ] }, { "name": "AppAside", "displayName": "AppAside", "fullName": "IzzyBlazor.AppAside", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EAn optional side column of an \u003Ca href=\u0022cref:T:IzzyBlazor.AppShell\u0022\u003E\u003Ccode\u003EAppShell\u003C/code\u003E\u003C/a\u003E, such as a table of contents, on the side opposite the sidebar. Its content stays in view while the page scrolls.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Width", "type": "Length", "default": "15rem", "summary": "\u003Cp\u003EThe width. Defaults to 15rem.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Breakpoint", "type": "Breakpoint", "default": "Breakpoint.Lg", "summary": "\u003Cp\u003EShown from this breakpoint up. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Breakpoint.Lg\u0022\u003E\u003Ccode\u003EBreakpoint.Lg\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bg", "type": "Color?", "default": "Color.Surface", "summary": "\u003Cp\u003EThe background, such as \u003Ccode\u003EColor.Fill\u003C/code\u003E. Text switches to the color\u0026#39;s \u003Ccode\u003Eon-\u003C/code\u003E partner when it has one. Defaults to \u003Ccode\u003EColor.Surface\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ColorScheme", "type": "ColorScheme", "default": "ColorScheme.Auto", "summary": "\u003Cp\u003EThe color scheme of this part: \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Dark\u0022\u003E\u003Ccode\u003EColorScheme.Dark\u003C/code\u003E\u003C/a\u003E for a dark sidebar or header in a light app, \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Inverse\u0022\u003E\u003Ccode\u003EColorScheme.Inverse\u003C/code\u003E\u003C/a\u003E for the opposite of the page. Everything inside, including its menus, follows it. Defaults to the page\u0026#39;s scheme.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" } ], "events": [], "methods": [], "types": [ "Breakpoint", "Color", "ColorScheme", "Length" ] }, { "name": "AppBrand", "displayName": "AppBrand", "fullName": "IzzyBlazor.AppBrand", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe app or site name in an \u003Ca href=\u0022cref:T:IzzyBlazor.AppHeader\u0022\u003E\u003Ccode\u003EAppHeader\u003C/code\u003E\u003C/a\u003E (or a sidebar\u0026#39;s header), with an icon or logo before it, usually linking home. It stays on one line: on a narrow screen the name is cut short with an ellipsis rather than wrapping or pushing the header\u0026#39;s buttons off.\u003C/p\u003E", "examples": [ "\u003CAppHeader\u003E\n \u003CSidebarToggle /\u003E\n \u003CAppBrand Href=\u0022/\u0022 Icon=\u0022Lucide.Zap\u0022 Label=\u0022Enable Dev Mode\u0022 /\u003E\n \u003CBox Grow /\u003E\n ...\n\u003C/AppHeader\u003E" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe name, shown and used as the link\u0026#39;s name.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EWhere it links, usually \u003Ccode\u003E\u0026quot;/\u0026quot;\u003C/code\u003E. Unset: plain text, not a link.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the name, in the accent color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Logo", "type": "RenderFragment?", "summary": "\u003Cp\u003EA logo before the name, such as an \u003Ccode\u003Eimg\u003C/code\u003E or inline SVG; takes the place of \u003Ca href=\u0022cref:P:IzzyBlazor.AppBrand.Icon\u0022\u003E\u003Ccode\u003EIcon\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HideLabel", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows only the icon or logo, keeping the name for screen readers: for a logo that already spells the name.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "AppFooter", "displayName": "AppFooter", "fullName": "IzzyBlazor.AppFooter", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe bottom bar of an \u003Ca href=\u0022cref:T:IzzyBlazor.AppShell\u0022\u003E\u003Ccode\u003EAppShell\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Position", "type": "BarPosition", "default": "BarPosition.Static", "summary": "\u003Cp\u003EWhether it stays at the bottom while the page scrolls. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.BarPosition.Static\u0022\u003E\u003Ccode\u003EBarPosition.Static\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContentWidth", "type": "Length?", "summary": "\u003Cp\u003EThe width the footer\u0026#39;s content is centered at; the bar itself stays full width. Overrides the shell\u0026#39;s \u003Ca href=\u0022cref:P:IzzyBlazor.AppShell.ContentWidth\u0022\u003E\u003Ccode\u003EContentWidth\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bg", "type": "Color?", "default": "Color.Surface", "summary": "\u003Cp\u003EThe background, such as \u003Ccode\u003EColor.Fill\u003C/code\u003E. Text switches to the color\u0026#39;s \u003Ccode\u003Eon-\u003C/code\u003E partner when it has one. Defaults to \u003Ccode\u003EColor.Surface\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ColorScheme", "type": "ColorScheme", "default": "ColorScheme.Auto", "summary": "\u003Cp\u003EThe color scheme of this part: \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Dark\u0022\u003E\u003Ccode\u003EColorScheme.Dark\u003C/code\u003E\u003C/a\u003E for a dark sidebar or header in a light app, \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Inverse\u0022\u003E\u003Ccode\u003EColorScheme.Inverse\u003C/code\u003E\u003C/a\u003E for the opposite of the page. Everything inside, including its menus, follows it. Defaults to the page\u0026#39;s scheme.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" } ], "events": [], "methods": [], "types": [ "BarPosition", "Color", "ColorScheme", "Length" ] }, { "name": "AppHeader", "displayName": "AppHeader", "fullName": "IzzyBlazor.AppHeader", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe top bar of an \u003Ca href=\u0022cref:T:IzzyBlazor.AppShell\u0022\u003E\u003Ccode\u003EAppShell\u003C/code\u003E\u003C/a\u003E: brand, \u003Ca href=\u0022cref:T:IzzyBlazor.SidebarToggle\u0022\u003E\u003Ccode\u003ESidebarToggle\u003C/code\u003E\u003C/a\u003E, actions.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Position", "type": "BarPosition", "default": "BarPosition.Sticky", "summary": "\u003Cp\u003EWhether it stays at the top while the page scrolls. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.BarPosition.Sticky\u0022\u003E\u003Ccode\u003EBarPosition.Sticky\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContentWidth", "type": "Length?", "summary": "\u003Cp\u003EThe width the header\u0026#39;s content is centered at, such as \u003Ccode\u003ELength.Rem(64)\u003C/code\u003E; the bar itself stays full width. Overrides the shell\u0026#39;s \u003Ca href=\u0022cref:P:IzzyBlazor.AppShell.ContentWidth\u0022\u003E\u003Ccode\u003EContentWidth\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bg", "type": "Color?", "default": "Color.Surface", "summary": "\u003Cp\u003EThe background, such as \u003Ccode\u003EColor.Fill\u003C/code\u003E. Text switches to the color\u0026#39;s \u003Ccode\u003Eon-\u003C/code\u003E partner when it has one. Defaults to \u003Ccode\u003EColor.Surface\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ColorScheme", "type": "ColorScheme", "default": "ColorScheme.Auto", "summary": "\u003Cp\u003EThe color scheme of this part: \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Dark\u0022\u003E\u003Ccode\u003EColorScheme.Dark\u003C/code\u003E\u003C/a\u003E for a dark sidebar or header in a light app, \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Inverse\u0022\u003E\u003Ccode\u003EColorScheme.Inverse\u003C/code\u003E\u003C/a\u003E for the opposite of the page. Everything inside, including its menus, follows it. Defaults to the page\u0026#39;s scheme.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" } ], "events": [], "methods": [], "types": [ "BarPosition", "Color", "ColorScheme", "Length" ] }, { "name": "AppMain", "displayName": "AppMain", "fullName": "IzzyBlazor.AppMain", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe main content of an \u003Ca href=\u0022cref:T:IzzyBlazor.AppShell\u0022\u003E\u003Ccode\u003EAppShell\u003C/code\u003E\u003C/a\u003E, usually \u003Ccode\u003E@Body\u003C/code\u003E. The skip link targets it.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Id", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe element id. Defaults to the shell\u0026#39;s \u003Ca href=\u0022cref:P:IzzyBlazor.AppShell.MainId\u0022\u003E\u003Ccode\u003EMainId\u003C/code\u003E\u003C/a\u003E; inside a shell, set it there instead (a different one throws), so the skip link keeps pointing here.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContentWidth", "type": "Length?", "summary": "\u003Cp\u003EThe width the content is centered at, such as \u003Ccode\u003ELength.Prose\u003C/code\u003E, with at least the page gutter at the sides. Overrides the shell\u0026#39;s \u003Ca href=\u0022cref:P:IzzyBlazor.AppShell.ContentWidth\u0022\u003E\u003Ccode\u003EContentWidth\u003C/code\u003E\u003C/a\u003E. A \u003Ca href=\u0022cref:T:IzzyBlazor.Section\u0022\u003E\u003Ccode\u003ESection\u003C/code\u003E\u003C/a\u003E inside still spans the whole main area.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bg", "type": "Color?", "default": "Color.Surface", "summary": "\u003Cp\u003EThe background, such as \u003Ccode\u003EColor.Fill\u003C/code\u003E. Text switches to the color\u0026#39;s \u003Ccode\u003Eon-\u003C/code\u003E partner when it has one. Defaults to \u003Ccode\u003EColor.Surface\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ColorScheme", "type": "ColorScheme", "default": "ColorScheme.Auto", "summary": "\u003Cp\u003EThe color scheme of this part: \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Dark\u0022\u003E\u003Ccode\u003EColorScheme.Dark\u003C/code\u003E\u003C/a\u003E for a dark sidebar or header in a light app, \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Inverse\u0022\u003E\u003Ccode\u003EColorScheme.Inverse\u003C/code\u003E\u003C/a\u003E for the opposite of the page. Everything inside, including its menus, follows it. Defaults to the page\u0026#39;s scheme.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" } ], "events": [], "methods": [], "types": [ "Color", "ColorScheme", "Length" ] }, { "name": "AppShell", "displayName": "AppShell", "fullName": "IzzyBlazor.AppShell", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe page frame. Put the parts you need inside it, in any order; the shell arranges itself from the parts that are present, with CSS alone, so it renders correctly on static pages:\u003C/p\u003E", "remarks": "\u003Cp\u003EEach part owns its settings: colors, sticky header and footer, sidebar side, width, breakpoint and full height. The shell owns what applies to the whole frame: what scrolls and whether the parts are separated by lines.\u003C/p\u003E", "examples": [ "\u003CAppShell\u003E\n \u003CAppHeader\u003E \u003CSidebarToggle /\u003E \u003Cstrong\u003EMy app\u003C/strong\u003E \u003C/AppHeader\u003E\n \u003CAppSidebar\u003E \u003CNavMenu\u003E...\u003C/NavMenu\u003E \u003C/AppSidebar\u003E\n \u003CAppMain\u003E @Body \u003C/AppMain\u003E\n \u003CAppAside\u003E On this page \u003C/AppAside\u003E\n \u003CAppFooter\u003E \u00A9 My app \u003C/AppFooter\u003E\n\u003C/AppShell\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt starts with a \u0026quot;Skip to content\u0026quot; link (\u003Ccode\u003EIzzyText.SkipToContent\u003C/code\u003E), shown when focused.\u003C/li\u003E\u003Cli\u003EThe parts are landmarks: \u003Ccode\u003EAppHeader\u003C/code\u003E a \u003Ccode\u003Eheader\u003C/code\u003E, \u003Ccode\u003EAppMain\u003C/code\u003E a \u003Ccode\u003Emain\u003C/code\u003E, \u003Ccode\u003EAppAside\u003C/code\u003E an \u003Ccode\u003Easide\u003C/code\u003E, \u003Ccode\u003EAppFooter\u003C/code\u003E a \u003Ccode\u003Efooter\u003C/code\u003E, and \u003Ccode\u003EAppSidebar\u003C/code\u003E a \u003Ccode\u003Enav\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EThe skip link moves focus to the main area (\u003Ccode\u003EMainId\u003C/code\u003E), with JavaScript off too.\u003C/li\u003E\u003Cli\u003EWith \u003Ccode\u003EShellScroll.Main\u003C/code\u003E the main area is also a tab stop, so it can be scrolled from the keyboard when nothing in it takes focus.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EAppBrand\u003C/code\u003E is named by its \u003Ccode\u003ELabel\u003C/code\u003E, which screen readers still hear with \u003Ccode\u003EHideLabel\u003C/code\u003E; a \u003Ccode\u003ELogo\u003C/code\u003E is hidden from them.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EAppAside\u003C/code\u003E has no name of its own: add an \u003Ccode\u003Earia-label\u003C/code\u003E, such as \u0026quot;On this page\u0026quot;, when it helps.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "AppSidebar", "SiteNav", "Container", "Section" ], "bases": [ "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe parts: \u003Ca href=\u0022cref:T:IzzyBlazor.AppHeader\u0022\u003E\u003Ccode\u003EAppHeader\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.AppSidebar\u0022\u003E\u003Ccode\u003EAppSidebar\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.AppMain\u0022\u003E\u003Ccode\u003EAppMain\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.AppAside\u0022\u003E\u003Ccode\u003EAppAside\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.AppFooter\u0022\u003E\u003Ccode\u003EAppFooter\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ScrollMode", "type": "ShellScroll", "default": "ShellScroll.Page", "summary": "\u003Cp\u003EWhat scrolls: the whole page (\u003Ca href=\u0022cref:F:IzzyBlazor.ShellScroll.Page\u0022\u003E\u003Ccode\u003EShellScroll.Page\u003C/code\u003E\u003C/a\u003E, the default) or only the main area inside a window-filling frame (\u003Ca href=\u0022cref:F:IzzyBlazor.ShellScroll.Main\u0022\u003E\u003Ccode\u003EShellScroll.Main\u003C/code\u003E\u003C/a\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "ShellVariant", "default": "ShellVariant.Tinted", "summary": "\u003Cp\u003EHow the parts are layered: \u003Ca href=\u0022cref:F:IzzyBlazor.ShellVariant.Tinted\u0022\u003E\u003Ccode\u003EShellVariant.Tinted\u003C/code\u003E\u003C/a\u003E (the default) tints the sidebar, \u003Ca href=\u0022cref:F:IzzyBlazor.ShellVariant.Inset\u0022\u003E\u003Ccode\u003EShellVariant.Inset\u003C/code\u003E\u003C/a\u003E raises the main area as a panel in a tinted frame, \u003Ca href=\u0022cref:F:IzzyBlazor.ShellVariant.Flat\u0022\u003E\u003Ccode\u003EShellVariant.Flat\u003C/code\u003E\u003C/a\u003E is all surface, \u003Ca href=\u0022cref:F:IzzyBlazor.ShellVariant.Canvas\u0022\u003E\u003Ccode\u003EShellVariant.Canvas\u003C/code\u003E\u003C/a\u003E tints the main area.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dividers", "type": "bool", "default": "true", "summary": "\u003Cp\u003ELines between the parts. Defaults to true; set false when the parts\u0026#39; colors separate them, or for one flat surface.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContentWidth", "type": "Length?", "summary": "\u003Cp\u003ECenters the content of the header, main area and footer at this width, such as \u003Ccode\u003ELength.Rem(48)\u003C/code\u003E for a reading site, so their edges line up; the bars and their lines stay full width. Each part\u0026#39;s own \u003Ccode\u003EContentWidth\u003C/code\u003E overrides it (a wider header over a narrow article, say). Unset by default: content fills the parts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MainId", "type": "string", "default": "\u0022ib-main\u0022", "summary": "\u003Cp\u003EThe main area\u0026#39;s id, which the skip link targets. Defaults to \u003Ccode\u003Eib-main\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Length", "ShellScroll", "ShellVariant" ] }, { "name": "AppSidebar", "displayName": "AppSidebar", "fullName": "IzzyBlazor.AppSidebar", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe navigation column of an AppShell. From its breakpoint up it is a column beside the content whose links stay in view while the page scrolls; below it, an off-canvas drawer opened by SidebarToggle. The drawer works with JavaScript off (a link to the sidebar\u0026#39;s id and CSS :target); with JavaScript, \u003Ccode\u003E\u0026lt;ib-shell\u0026gt;\u003C/code\u003E adds Escape, focus handling and no URL change.\u003C/p\u003E\u003Cp\u003ECollapsible adds an icon rail on wide screens, in three layers like everything else:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003ENo script: a visually hidden checkbox, its visible label (the chevron, and SidebarToggle on wide screens), and CSS :has(:checked).\u003C/li\u003E\u003Cli\u003EWith script: the choice is saved in a cookie, which the server reads on the next request, so the page arrives already collapsed with no flash.\u003C/li\u003E\u003Cli\u003EInteractive: @bind-Collapsed follows the checkbox and can set it from C#.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003ELayout inside: SidebarHeader (pinned at the top), the content (scrolls), SidebarFooter (pinned at the bottom), the parts written among the content. The chevron sits in the footer row by default, or the header row. In the drawer, the header row is the top bar, with the close button in it.\u003C/p\u003E", "examples": [ "\u003CAppSidebar Collapsible\u003E\n \u003CSidebarHeader\u003E\u003CAppBrand Href=\u0022/\u0022 Icon=\u0022Lucide.Zap\u0022 Label=\u0022Acme\u0022 /\u003E\u003C/SidebarHeader\u003E\n \u003CNavMenu\u003E...\u003C/NavMenu\u003E\n \u003CSidebarFooter\u003E...\u003C/SidebarFooter\u003E\n\u003C/AppSidebar\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Enav\u003C/code\u003E landmark named \u0026quot;Main\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E). A closed drawer is hidden from keyboard and screen readers.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ESidebarToggle\u003C/code\u003E is a link named \u0026quot;Open menu\u0026quot; (its \u003Ccode\u003ELabel\u003C/code\u003E) to the sidebar; with JavaScript it\u0026#39;s a button (\u003Ccode\u003Erole=\u0026quot;button\u0026quot;\u003C/code\u003E) that also takes Space and keeps \u003Ccode\u003Earia-expanded\u003C/code\u003E in step.\u003C/li\u003E\u003Cli\u003EWith JavaScript, opening moves focus into the drawer, to its close button (\u0026quot;Close menu\u0026quot;, \u003Ccode\u003ECloseLabel\u003C/code\u003E) when it has one, and makes the rest of the shell \u003Ccode\u003Einert\u003C/code\u003E (a \u003Ccode\u003EPanel\u003C/code\u003E sidebar leaves the header usable).\u003C/li\u003E\u003Cli\u003EEscape, the close button or the backdrop closes it and puts focus back on the menu button.\u003C/li\u003E\u003Cli\u003EWith JavaScript off the drawer still opens and closes, but focus doesn\u0026#39;t move and Escape does nothing; the menu and close buttons are plain links, with no \u003Ccode\u003Earia-expanded\u003C/code\u003E, which nothing could keep in step.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ECollapsible\u003C/code\u003E adds a visually hidden checkbox named \u0026quot;Collapse sidebar\u0026quot; (\u003Ccode\u003ECollapseLabel\u003C/code\u003E), checked while collapsed; in the icon rail, link text stays for screen readers.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "AppShell", "NavMenu", "Drawer", "SiteNav" ], "bases": [ "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the phone drawer doesn\u0027t close on Escape or move focus, and a collapsed sidebar isn\u0027t remembered." }, "properties": [ { "name": "Position", "type": "SidebarPosition", "default": "SidebarPosition.Start", "summary": "\u003Cp\u003EWhich side it\u0026#39;s on. \u003Ca href=\u0022cref:F:IzzyBlazor.SidebarPosition.Start\u0022\u003E\u003Ccode\u003ESidebarPosition.Start\u003C/code\u003E\u003C/a\u003E (the default) is the left in left-to-right languages; the drawer slides in from the same side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "DrawerPosition", "type": "SidebarPosition?", "default": "computed", "summary": "\u003Cp\u003EBelow \u003Ca href=\u0022cref:P:IzzyBlazor.AppSidebar.Breakpoint\u0022\u003E\u003Ccode\u003EBreakpoint\u003C/code\u003E\u003C/a\u003E, the side the drawer slides in from, and the side of the header its menu button moves to. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.AppSidebar.Position\u0022\u003E\u003Ccode\u003EPosition\u003C/code\u003E\u003C/a\u003E. Set \u003Ca href=\u0022cref:F:IzzyBlazor.SidebarPosition.End\u0022\u003E\u003Ccode\u003ESidebarPosition.End\u003C/code\u003E\u003C/a\u003E to keep a sidebar on the left on wide screens but open it from the right on phones, with the menu button on the right, where content sites put it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SmallScreen", "type": "SidebarSmallScreen", "default": "SidebarSmallScreen.Drawer", "summary": "\u003Cp\u003EHow it opens below \u003Ca href=\u0022cref:P:IzzyBlazor.AppSidebar.Breakpoint\u0022\u003E\u003Ccode\u003EBreakpoint\u003C/code\u003E\u003C/a\u003E: \u003Ca href=\u0022cref:F:IzzyBlazor.SidebarSmallScreen.Drawer\u0022\u003E\u003Ccode\u003ESidebarSmallScreen.Drawer\u003C/code\u003E\u003C/a\u003E (the default) slides in from the side over the page, for long navigation such as docs or an app; \u003Ca href=\u0022cref:F:IzzyBlazor.SidebarSmallScreen.Panel\u0022\u003E\u003Ccode\u003ESidebarSmallScreen.Panel\u003C/code\u003E\u003C/a\u003E opens under the header, full width, with the header still in view and \u003Ca href=\u0022cref:T:IzzyBlazor.SidebarToggle\u0022\u003E\u003Ccode\u003ESidebarToggle\u003C/code\u003E\u003C/a\u003E turned into its close button, as SiteNav does. Both work with JavaScript off.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FullHeight", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERuns the full height of the window, with the header and footer beside it instead of above and below.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Width", "type": "Length", "default": "16rem", "summary": "\u003Cp\u003EThe width. Defaults to 16rem.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Breakpoint", "type": "Breakpoint", "default": "Breakpoint.Md", "summary": "\u003Cp\u003EBelow this width it becomes a drawer. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Breakpoint.Md\u0022\u003E\u003Ccode\u003EBreakpoint.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Main\u0022", "summary": "\u003Cp\u003EThe navigation landmark\u0026#39;s name for screen readers. Defaults to \u0026quot;Main\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Id", "type": "string", "default": "\u0022ib-sidebar\u0022", "summary": "\u003Cp\u003EThe element id, which \u003Ca href=\u0022cref:T:IzzyBlazor.SidebarToggle\u0022\u003E\u003Ccode\u003ESidebarToggle\u003C/code\u003E\u003C/a\u003E links to. Defaults to \u003Ccode\u003Eib-sidebar\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Collapsible", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELets people shrink it to an icon rail on wide screens, with a chevron at its top and \u003Ca href=\u0022cref:T:IzzyBlazor.SidebarToggle\u0022\u003E\u003Ccode\u003ESidebarToggle\u003C/code\u003E\u003C/a\u003E. Works with JavaScript off; below the breakpoint it is the usual drawer.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Collapsed", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it is collapsed. The starting value when nothing is remembered; with \u003Ccode\u003E@bind-Collapsed\u003C/code\u003E on an interactive page, C# follows it and can set it.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "CollapsedWidth", "type": "Length", "default": "3.5rem", "summary": "\u003Cp\u003EThe width when collapsed. Defaults to 3.5rem, room for an icon.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RememberState", "type": "bool", "default": "true", "summary": "\u003Cp\u003ERemembers the choice in a cookie (written by the script, read by the server), so it survives reloads and navigation. Defaults to true. The remembered value wins over \u003Ca href=\u0022cref:P:IzzyBlazor.AppSidebar.Collapsed\u0022\u003E\u003Ccode\u003ECollapsed\u003C/code\u003E\u003C/a\u003E when the page loads.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CollapseButton", "type": "bool?", "summary": "\u003Cp\u003EThe chevron at the top of the sidebar. By default (\u003Ccode\u003Enull\u003C/code\u003E) it shows only when the shell has no \u003Ca href=\u0022cref:T:IzzyBlazor.SidebarToggle\u0022\u003E\u003Ccode\u003ESidebarToggle\u003C/code\u003E\u003C/a\u003E, which collapses the sidebar on wide screens itself. \u003Ccode\u003Etrue\u003C/code\u003E always shows it; \u003Ccode\u003Efalse\u003C/code\u003E never does.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CollapseButtonPosition", "type": "VerticalPosition", "default": "VerticalPosition.Bottom", "summary": "\u003Cp\u003EWhere the chevron goes: \u003Ca href=\u0022cref:F:IzzyBlazor.VerticalPosition.Bottom\u0022\u003E\u003Ccode\u003EVerticalPosition.Bottom\u003C/code\u003E\u003C/a\u003E (the default, in the footer row) or \u003Ca href=\u0022cref:F:IzzyBlazor.VerticalPosition.Top\u0022\u003E\u003Ccode\u003EVerticalPosition.Top\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CloseLabel", "type": "string?", "default": "\u0022Close menu\u0022", "summary": "\u003Cp\u003EThe drawer\u0026#39;s close button name. Defaults to \u0026quot;Close menu\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CollapseLabel", "type": "string?", "default": "\u0022Collapse sidebar\u0022", "summary": "\u003Cp\u003EThe collapse control\u0026#39;s accessible name. Defaults to \u0026quot;Collapse sidebar\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bg", "type": "Color?", "default": "Color.Surface", "summary": "\u003Cp\u003EThe background, such as \u003Ccode\u003EColor.Fill\u003C/code\u003E. Text switches to the color\u0026#39;s \u003Ccode\u003Eon-\u003C/code\u003E partner when it has one. Defaults to \u003Ccode\u003EColor.Surface\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ColorScheme", "type": "ColorScheme", "default": "ColorScheme.Auto", "summary": "\u003Cp\u003EThe color scheme of this part: \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Dark\u0022\u003E\u003Ccode\u003EColorScheme.Dark\u003C/code\u003E\u003C/a\u003E for a dark sidebar or header in a light app, \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Inverse\u0022\u003E\u003Ccode\u003EColorScheme.Inverse\u003C/code\u003E\u003C/a\u003E for the opposite of the page. Everything inside, including its menus, follows it. Defaults to the page\u0026#39;s scheme.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "AppShellPart" } ], "events": [], "methods": [], "types": [ "Breakpoint", "Color", "ColorScheme", "Length", "SidebarPosition", "SidebarSmallScreen", "VerticalPosition" ] }, { "name": "AspectRatio", "displayName": "AspectRatio", "fullName": "IzzyBlazor.AspectRatio", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EKeeps its content at a fixed shape, such as 16:9 for a video or 1:1 for an avatar. Images and videos inside fill it and are cropped to fit.\u003C/p\u003E", "examples": [ "\u003CAspectRatio Ratio=\u002216 / 9.0\u0022\u003E\u003Cimg src=\u0022...\u0022 alt=\u0022...\u0022 /\u003E\u003C/AspectRatio\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt adds no name or role: an \u003Ccode\u003Eimg\u003C/code\u003E inside still needs its \u003Ccode\u003Ealt\u003C/code\u003E, an \u003Ccode\u003Eiframe\u003C/code\u003E its \u003Ccode\u003Etitle\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWhat doesn\u0026#39;t fit the shape is cut off, not scrolled, so text inside can be lost when people zoom in.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Image", "VideoEmbed", "Box" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Ratio", "type": "double", "default": "1.7777777777777777", "summary": "\u003Cp\u003EWidth divided by height. Defaults to 16:9.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [] }, { "name": "Avatar", "displayName": "Avatar", "fullName": "IzzyBlazor.Avatar", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA picture of a person or thing: an image, else initials from \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E, else an icon. When the image fails to load, the initials show through, with no script needed.\u003C/p\u003E", "examples": [ "\u003CAvatar Name=\u0022Grace Hopper\u0022 Src=\u0022/img/grace.jpg\u0022 /\u003E\n\u003CAvatar Name=\u0022Ada Lovelace\u0022 Size=\u0022AvatarSize.Lg\u0022 Status=\u0022Status.Success\u0022 StatusLabel=\u0022Online\u0022 /\u003E\n\u003CAvatar Name=\u0022Acme Corp\u0022 Square Accent=\u0022Accent.Primary\u0022 Variant=\u0022AvatarVariant.Solid\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EWith a \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E, it\u0026#39;s an image (\u003Ccode\u003Erole=\u0026quot;img\u0026quot;\u003C/code\u003E) named by the full name; the photo and initials aren\u0026#39;t read.\u003C/li\u003E\u003Cli\u003EThe status dot is hidden; its meaning is read only from \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.StatusLabel\u0022\u003E\u003Ccode\u003EStatusLabel\u003C/code\u003E\u003C/a\u003E, added to the name as \u0026quot;Ada Lovelace (Online)\u0026quot;.\u003C/li\u003E\u003Cli\u003EWithout a \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E, it\u0026#39;s hidden from screen readers, even with \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.Initials\u0022\u003E\u003Ccode\u003EInitials\u003C/code\u003E\u003C/a\u003E.\u003C/li\u003E\u003Cli\u003ESet \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.Decorative\u0022\u003E\u003Ccode\u003EDecorative\u003C/code\u003E\u003C/a\u003E when the name is written beside it, so it isn\u0026#39;t read twice.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "AvatarGroup", "Badge", "Image" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EThe person\u0026#39;s or thing\u0026#39;s name: the accessible name, and the source of the initials and of their color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Src", "type": "string?", "summary": "\u003Cp\u003EThe image URL. Without one, or if it fails to load, the initials show.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Initials", "type": "string?", "summary": "\u003Cp\u003EText in place of initials taken from \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E, such as \u0026quot;GH\u0026quot; or \u0026quot;\u002B\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "default": "computed", "summary": "\u003Cp\u003EThe icon when there\u0026#39;s no name. Defaults to a person.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "AvatarSize?", "default": "computed", "summary": "\u003Cp\u003ESize. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.AvatarSize.Md\u0022\u003E\u003Ccode\u003EAvatarSize.Md\u003C/code\u003E\u003C/a\u003E, or the group\u0026#39;s size inside an \u003Ca href=\u0022cref:T:IzzyBlazor.AvatarGroup\u0022\u003E\u003Ccode\u003EAvatarGroup\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Square", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERounded corners in place of a circle, for teams, companies and projects.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent?", "summary": "\u003Cp\u003EThe color of the initials or icon and what\u0026#39;s behind them, as \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.Variant\u0022\u003E\u003Ccode\u003EVariant\u003C/code\u003E\u003C/a\u003E uses it: \u003Ccode\u003EAccent.Primary\u003C/code\u003E, \u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E or \u003Ccode\u003EAccent.Token(\u0026quot;success\u0026quot;)\u003C/code\u003E. Unset: a color picked from \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E, so a person looks the same on every page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "AvatarVariant", "default": "AvatarVariant.Soft", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:F:IzzyBlazor.AvatarVariant.Soft\u0022\u003E\u003Ccode\u003EAvatarVariant.Soft\u003C/code\u003E\u003C/a\u003E (the default) tints the background and colors the initials; \u003Ca href=\u0022cref:F:IzzyBlazor.AvatarVariant.Solid\u0022\u003E\u003Ccode\u003EAvatarVariant.Solid\u003C/code\u003E\u003C/a\u003E fills it, with initials picked for contrast. A photo covers both.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Status", "type": "Status?", "summary": "\u003Cp\u003EA dot in the corner, such as \u003Ca href=\u0022cref:F:IzzyBlazor.Status.Success\u0022\u003E\u003Ccode\u003EStatus.Success\u003C/code\u003E\u003C/a\u003E for online. Give it a \u003Ca href=\u0022cref:P:IzzyBlazor.Avatar.StatusLabel\u0022\u003E\u003Ccode\u003EStatusLabel\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StatusLabel", "type": "string?", "summary": "\u003Cp\u003EWhat the status dot means, for screen readers, such as \u0026quot;Online\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Decorative", "type": "bool", "default": "false", "summary": "\u003Cp\u003EHides the avatar from screen readers, for when the name is already written beside it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Accent", "AvatarSize", "AvatarVariant", "Status" ] }, { "name": "AvatarGroup", "displayName": "AvatarGroup", "fullName": "IzzyBlazor.AvatarGroup", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA row of overlapping avatars, such as the people on a project. With \u003Ca href=\u0022cref:P:IzzyBlazor.AvatarGroup.Max\u0022\u003E\u003Ccode\u003EMax\u003C/code\u003E\u003C/a\u003E, the rest collapse into a \u0026quot;\u002BN\u0026quot; avatar.\u003C/p\u003E", "remarks": "\u003Cp\u003EPut the avatars directly inside the group: \u003Ca href=\u0022cref:P:IzzyBlazor.AvatarGroup.Max\u0022\u003E\u003Ccode\u003EMax\u003C/code\u003E\u003C/a\u003E hides the extra ones with CSS, counting the group\u0026#39;s children.\u003C/p\u003E", "examples": [ "\u003CAvatarGroup Max=\u00223\u0022 Label=\u0022Project members\u0022\u003E\n @foreach (var person in Members)\n {\n \u003CAvatar Name=\u0022@person.Name\u0022 Src=\u0022@person.Photo\u0022 /\u003E\n }\n\u003C/AvatarGroup\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders \u003Ccode\u003Erole=\u0026quot;group\u0026quot;\u003C/code\u003E, named by \u003Ca href=\u0022cref:P:IzzyBlazor.AvatarGroup.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E, such as \u0026quot;Project members\u0026quot;.\u003C/li\u003E\u003Cli\u003EAvatars past \u003Ca href=\u0022cref:P:IzzyBlazor.AvatarGroup.Max\u0022\u003E\u003Ccode\u003EMax\u003C/code\u003E\u003C/a\u003E are hidden with \u003Ccode\u003Edisplay: none\u003C/code\u003E, so screen readers skip them too.\u003C/li\u003E\u003Cli\u003EThe \u0026quot;\u002BN\u0026quot; avatar is an image named by \u003Ca href=\u0022cref:P:IzzyBlazor.AvatarGroup.MoreLabel\u0022\u003E\u003Ccode\u003EMoreLabel\u003C/code\u003E\u003C/a\u003E, \u0026quot;3 more\u0026quot; by default.\u003C/li\u003E\u003Cli\u003EThe \u0026quot;\u002BN\u0026quot; avatar isn\u0026#39;t focusable, so the hidden names can\u0026#39;t be reached; list everyone elsewhere if they matter.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Avatar", "Popover" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Max", "type": "int?", "default": "computed", "summary": "\u003Cp\u003EHow many avatars to show, from 1 to 10. The rest are counted in a \u0026quot;\u002BN\u0026quot; avatar. Defaults to all of them.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "AvatarSize", "default": "AvatarSize.Md", "summary": "\u003Cp\u003EThe size of every avatar in the group. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.AvatarSize.Md\u0022\u003E\u003Ccode\u003EAvatarSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe group\u0026#39;s accessible name, such as \u0026quot;Project members\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MoreLabel", "type": "string?", "default": "\u0022{0} more\u0022", "summary": "\u003Cp\u003EThe \u0026quot;\u002BN\u0026quot; avatar\u0026#39;s accessible name, with \u003Ccode\u003E{0}\u003C/code\u003E for the number. Defaults to \u0026quot;{0} more\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe avatars.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "AvatarSize" ] }, { "name": "Badge", "displayName": "Badge", "fullName": "IzzyBlazor.Badge", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA small label for a status, category or count.\u003C/p\u003E", "examples": [ "\u003CBadge Status=\u0022Status.Success\u0022\u003EPublished\u003C/Badge\u003E\n\u003CBadge Status=\u0022Status.Danger\u0022 Variant=\u0022BadgeVariant.Solid\u0022 Pill\u003E3\u003C/Badge\u003E\n\u003CBadge Status=\u0022Status.Warning\u0022 Dot\u003EPending review\u003C/Badge\u003E\n\u003CBadge Accent=\u0022Accent.Primary\u0022 Variant=\u0022BadgeVariant.Solid\u0022 Pill\u003E12\u003C/Badge\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Espan\u003C/code\u003E with no role: screen readers read its text and nothing more.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Badge.Status\u0022\u003E\u003Ccode\u003EStatus\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Badge.Accent\u0022\u003E\u003Ccode\u003EAccent\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.Badge.Dot\u0022\u003E\u003Ccode\u003EDot\u003C/code\u003E\u003C/a\u003E are color only, so the text must say what it means (\u0026quot;Overdue\u0026quot;, not just a red dot).\u003C/li\u003E\u003Cli\u003EA count is read as just the number: put it next to text that says what it counts, as a \u003Ca href=\u0022cref:T:IzzyBlazor.NavItem\u0022\u003E\u003Ccode\u003ENavItem\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:T:IzzyBlazor.Tab\u0022\u003E\u003Ccode\u003ETab\u003C/code\u003E\u003C/a\u003E badge is.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Tag", "Stat", "Alert" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Status", "type": "Status", "default": "Status.Neutral", "summary": "\u003Cp\u003EWhat the badge means. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Status.Neutral\u0022\u003E\u003Ccode\u003EStatus.Neutral\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent?", "summary": "\u003Cp\u003EA color in place of \u003Ca href=\u0022cref:P:IzzyBlazor.Badge.Status\u0022\u003E\u003Ccode\u003EStatus\u003C/code\u003E\u003C/a\u003E\u0026#39;s, such as \u003Ccode\u003EAccent.Primary\u003C/code\u003E for a brand-colored count, \u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E or \u003Ccode\u003EAccent.Token(\u0026quot;brand\u0026quot;)\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "BadgeVariant", "default": "BadgeVariant.Soft", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.BadgeVariant.Soft\u0022\u003E\u003Ccode\u003EBadgeVariant.Soft\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "BadgeSize", "default": "BadgeSize.Md", "summary": "\u003Cp\u003ESize. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.BadgeSize.Md\u0022\u003E\u003Ccode\u003EBadgeSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Pill", "type": "bool", "default": "false", "summary": "\u003Cp\u003EFully rounded ends, for counts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dot", "type": "bool", "default": "false", "summary": "\u003Cp\u003EA colored dot before the text, for statuses.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Accent", "BadgeSize", "BadgeVariant", "Status" ] }, { "name": "Banner", "displayName": "Banner", "fullName": "IzzyBlazor.Banner", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA full-width strip for a message about the whole app or site: planned maintenance, a trial that is ending, a license warning. Put it at the top of the page, or inside an AppShell, where it takes a row of its own above the header. For a message about part of a page, use Alert.\u003C/p\u003E", "remarks": "\u003Cp\u003EDismissible adds a close button that works with no script: a visually hidden checkbox and its label, with CSS :has(:checked) hiding the banner. With the script it is a real button (\u003Ccode\u003E\u0026lt;ib-dismiss\u0026gt;\u003C/code\u003E), and focus moves to the next control when the banner closes. A dismissal is remembered, for the browser session by default (Remember): \u003Ccode\u003E\u0026lt;ib-banner\u0026gt;\u003C/code\u003E writes a cookie when it is closed, and the server reads the cookie and leaves the banner out of later pages, static or interactive. The cookie is named by RememberKey, or by a key made from the title and text, so a new message shows again. Where the server can\u0026#39;t read cookies (WebAssembly), the element hides a remembered banner as soon as it connects.\u003C/p\u003E\u003Cp\u003EPosition=\u0026quot;BarPosition.Sticky\u0026quot; keeps it at the top while the page scrolls. In an AppShell the sticky header and sidebar then sit below it: CSS assumes one line (37px), and \u003Ccode\u003E\u0026lt;ib-banner\u0026gt;\u003C/code\u003E measures it when the message wraps.\u003C/p\u003E", "examples": [ "\u003CBanner Status=\u0022Status.Warning\u0022 Dismissible\u003EMaintenance on Saturday, 2 to 4 AM UTC.\u003C/Banner\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt\u0026#39;s a \u003Ccode\u003Eregion\u003C/code\u003E landmark named \u0026quot;Announcement\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E), so screen readers can find it.\u003C/li\u003E\u003Cli\u003EIt isn\u0026#39;t announced by default; \u003Ccode\u003EAnnounce\u003C/code\u003E makes the message \u003Ccode\u003Erole=\u0026quot;alert\u0026quot;\u003C/code\u003E (Danger, Warning) or \u003Ccode\u003Erole=\u0026quot;status\u0026quot;\u003C/code\u003E, for a banner shown after the page loads.\u003C/li\u003E\u003Cli\u003EScreen readers hear the status in words before the message (\u0026quot;Warning: \u0026quot;), from \u003Ccode\u003EStatusLabel\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith script, the close control is a \u003Ccode\u003Ebutton\u003C/code\u003E named \u0026quot;Dismiss\u0026quot; (\u003Ccode\u003EDismissLabel\u003C/code\u003E), and focus moves to the next control when it closes the banner. With JavaScript off it\u0026#39;s a visually hidden checkbox, as on Alert, and focus isn\u0026#39;t moved.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Alert", "ToastRegion", "AppShell" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, a dismissed banner comes back on the next page, its close button is a checkbox to screen readers, and focus doesn\u0027t move on when it closes." }, "properties": [ { "name": "Status", "type": "Status", "default": "Status.Info", "summary": "\u003Cp\u003EWhat the message means; sets the color and icon. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Status.Info\u0022\u003E\u003Ccode\u003EStatus.Info\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent?", "summary": "\u003Cp\u003EA color in place of the status\u0026#39;s own, such as \u003Ccode\u003EAccent.Primary\u003C/code\u003E for a product announcement, or \u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E. The status still sets the icon and what screen readers hear.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "AlertVariant", "default": "AlertVariant.Soft", "summary": "\u003Cp\u003EHow it\u0026#39;s drawn. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.AlertVariant.Soft\u0022\u003E\u003Ccode\u003EAlertVariant.Soft\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Position", "type": "BarPosition", "default": "BarPosition.Static", "summary": "\u003Cp\u003EWhether it stays at the top of the window while the page scrolls (\u003Ca href=\u0022cref:F:IzzyBlazor.BarPosition.Sticky\u0022\u003E\u003Ccode\u003EBarPosition.Sticky\u003C/code\u003E\u003C/a\u003E) or scrolls away with it. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.BarPosition.Static\u0022\u003E\u003Ccode\u003EBarPosition.Static\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EA short bold lead-in before the message, on the same line.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe message. Keep it to a line or two.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon in place of the status\u0026#39;s own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HideIcon", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELeaves out the icon.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dismissible", "type": "bool", "default": "false", "summary": "\u003Cp\u003EAdds a close button. Works with JavaScript off.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Remember", "type": "DismissMemory", "default": "DismissMemory.Session", "summary": "\u003Cp\u003EHow long a dismissal lasts, with \u003Ca href=\u0022cref:P:IzzyBlazor.Banner.Dismissible\u0022\u003E\u003Ccode\u003EDismissible\u003C/code\u003E\u003C/a\u003E: \u003Ca href=\u0022cref:F:IzzyBlazor.DismissMemory.Session\u0022\u003E\u003Ccode\u003EDismissMemory.Session\u003C/code\u003E\u003C/a\u003E (the default) until the browser closes, \u003Ca href=\u0022cref:F:IzzyBlazor.DismissMemory.Persistent\u0022\u003E\u003Ccode\u003EDismissMemory.Persistent\u003C/code\u003E\u003C/a\u003E for a year, \u003Ca href=\u0022cref:F:IzzyBlazor.DismissMemory.None\u0022\u003E\u003Ccode\u003EDismissMemory.None\u003C/code\u003E\u003C/a\u003E only on the page (it shows again on the next one).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RememberKey", "type": "string?", "summary": "\u003Cp\u003ENames the cookie that remembers a dismissal: \u003Ccode\u003Eib-banner-{key}\u003C/code\u003E. Change the key (\u003Ccode\u003E\u0026quot;maintenance-2026-11\u0026quot;\u003C/code\u003E) to show a new message to everyone again. Unset, the key comes from the \u003Ca href=\u0022cref:P:IzzyBlazor.Banner.Title\u0022\u003E\u003Ccode\u003ETitle\u003C/code\u003E\u003C/a\u003E, text and links, so changing the message shows it again; a banner whose text comes from a component of the app\u0026#39;s own (a localizer) is remembered only with a key, since its text can\u0026#39;t be read. Letters, digits, \u003Ccode\u003E-\u003C/code\u003E, \u003Ccode\u003E_\u003C/code\u003E and \u003Ccode\u003E.\u003C/code\u003E only.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dismissed", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it has been dismissed. Use \u003Ccode\u003E@bind-Dismissed\u003C/code\u003E on interactive pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "Announce", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether screen readers announce the message when it appears (\u003Ccode\u003Erole=\u0026quot;alert\u0026quot;\u003C/code\u003E for danger and warning, \u003Ccode\u003Erole=\u0026quot;status\u0026quot;\u003C/code\u003E otherwise). Off by default: a banner is usually there when the page loads, and screen readers find it as a labeled region. Turn it on for a banner you show in response to something, such as a lost connection.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StatusLabel", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EWhat kind of message it is, read to screen readers before it. Defaults to \u0026quot;Info\u0026quot;, \u0026quot;Success\u0026quot;, \u0026quot;Warning\u0026quot; or \u0026quot;Error\u0026quot; by \u003Ca href=\u0022cref:P:IzzyBlazor.Banner.Status\u0022\u003E\u003Ccode\u003EStatus\u003C/code\u003E\u003C/a\u003E (from \u003Ca href=\u0022cref:T:IzzyBlazor.IzzyText\u0022\u003E\u003Ccode\u003EIzzyText\u003C/code\u003E\u003C/a\u003E), and nothing for Neutral. Set it to \u0026quot;\u0026quot; to leave it out.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Announcement\u0022", "summary": "\u003Cp\u003EThe region\u0026#39;s accessible name. Defaults to \u0026quot;Announcement\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "DismissLabel", "type": "string?", "default": "\u0022Dismiss\u0022", "summary": "\u003Cp\u003EThe close button\u0026#39;s accessible name. Defaults to \u0026quot;Dismiss\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Accent", "AlertVariant", "BarPosition", "DismissMemory", "Status" ] }, { "name": "BannerActions", "displayName": "BannerActions", "fullName": "IzzyBlazor.BannerActions", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ELinks or buttons after a \u003Ca href=\u0022cref:T:IzzyBlazor.Banner\u0022\u003E\u003Ccode\u003EBanner\u003C/code\u003E\u003C/a\u003E\u0026#39;s message, such as \u0026quot;Details\u0026quot;. Write it directly in the banner; the banner draws it after the message.\u003C/p\u003E", "examples": [ "\u003CBanner Status=\u0022Status.Warning\u0022\u003EMaintenance on Sunday. \u003CBannerActions\u003E\u003CAnchor Href=\u0022/status\u0022\u003EDetails\u003C/Anchor\u003E\u003C/BannerActions\u003E\u003C/Banner\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "Box", "displayName": "Box", "fullName": "IzzyBlazor.Box", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe base surface. Renders one element with the style props applied; every other layout primitive is a Box with defaults.\u003C/p\u003E", "examples": [ "\u003CBox As=\u0022section\u0022 Padding=\u0022new() { Base = 6, Md = 10 }\u0022 Bg=\u0022Color.Fill\u0022 Radius=\u0022Radius.Md\u0022\u003E...\u003C/Box\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Ediv\u003C/code\u003E; \u003Ca href=\u0022cref:P:IzzyBlazor.Box.As\u0022\u003E\u003Ccode\u003EAs\u003C/code\u003E\u003C/a\u003E makes it another element, such as \u003Ccode\u003Enav\u003C/code\u003E or \u003Ccode\u003Eul\u003C/code\u003E, so a landmark or list needs no extra wrapper.\u003C/li\u003E\u003Cli\u003EAttributes it doesn\u0026#39;t take as parameters, such as \u003Ccode\u003Erole\u003C/code\u003E or \u003Ccode\u003Earia-label\u003C/code\u003E, go on the element.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Stack", "Grid", "Section", "Container" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "Breadcrumb", "displayName": "Breadcrumb", "fullName": "IzzyBlazor.Breadcrumb", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe path to the current page. Plain links, so it needs no script.\u003C/p\u003E", "examples": [ "\u003CBreadcrumb\u003E\n \u003CBreadcrumbItem Href=\u0022/\u0022\u003EHome\u003C/BreadcrumbItem\u003E\n \u003CBreadcrumbItem Href=\u0022/projects\u0022\u003EProjects\u003C/BreadcrumbItem\u003E\n \u003CBreadcrumbItem\u003EWebsite\u003C/BreadcrumbItem\u003E\n\u003C/Breadcrumb\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Enav\u003C/code\u003E named \u0026quot;Breadcrumb\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E) around an ordered list.\u003C/li\u003E\u003Cli\u003EThe item with no \u003Ccode\u003EHref\u003C/code\u003E, or with \u003Ccode\u003ECurrent\u003C/code\u003E, is text with \u003Ccode\u003Earia-current=\u0026quot;page\u0026quot;\u003C/code\u003E, not a link.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "NavMenu", "PrevNext", "Tabs" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe \u003Ca href=\u0022cref:T:IzzyBlazor.BreadcrumbItem\u0022\u003E\u003Ccode\u003EBreadcrumbItem\u003C/code\u003E\u003C/a\u003Es. The last one, with no link, is the current page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Separator", "type": "BreadcrumbSeparator", "default": "BreadcrumbSeparator.Chevron", "summary": "\u003Cp\u003EWhat goes between items. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.BreadcrumbSeparator.Chevron\u0022\u003E\u003Ccode\u003EBreadcrumbSeparator.Chevron\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Breadcrumb\u0022", "summary": "\u003Cp\u003EThe navigation landmark\u0026#39;s name. Defaults to \u0026quot;Breadcrumb\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "BreadcrumbSeparator" ] }, { "name": "BreadcrumbItem", "displayName": "BreadcrumbItem", "fullName": "IzzyBlazor.BreadcrumbItem", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EOne step of a Breadcrumb: a link, or the current page when it has no Href.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EWhere it links. Leave it out for the current page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Current", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMarks this as the current page even though it has a link (it renders as text).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text, such as a house for Home.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "Button", "displayName": "Button", "fullName": "IzzyBlazor.Button", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA native \u003Ccode\u003Ebutton\u003C/code\u003E, or a link (\u003Ccode\u003Ea\u003C/code\u003E) that looks like one when \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Href\u0022\u003E\u003Ccode\u003EHref\u003C/code\u003E\u003C/a\u003E is set. On static pages a button submits or resets forms like plain HTML; on interactive pages \u003Ca href=\u0022cref:P:IzzyBlazor.Button.OnClick\u0022\u003E\u003Ccode\u003EOnClick\u003C/code\u003E\u003C/a\u003E runs C#. Use a link for navigation (\u0026quot;Start the project\u0026quot;) and a button for actions.\u003C/p\u003E", "examples": [ "\u003CButton Submit\u003ESave\u003C/Button\u003E\n\u003CButton Accent=\u0022Accent.Danger\u0022 Variant=\u0022ButtonVariant.Outline\u0022 StartIcon=\u0022Lucide.Trash\u0022\u003EDelete\u003C/Button\u003E\n\u003CButton Submit Name=\u0022intent\u0022 Value=\u0022publish\u0022\u003EPublish\u003C/Button\u003E\n\u003CButton Href=\u0022/courses/wizard\u0022 EndIcon=\u0022Lucide.ArrowRight\u0022\u003EStart the project\u003C/Button\u003E\n\u003CButton Href=\u0022https://github.com/...\u0022 External Variant=\u0022ButtonVariant.Outline\u0022\u003EGet the repo\u003C/Button\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Ebutton\u003C/code\u003E or \u003Ccode\u003Ea\u003C/code\u003E, so Enter, Space and focus work as the browser defines them.\u003C/li\u003E\u003Cli\u003EThe focus ring shows for keyboard focus only.\u003C/li\u003E\u003Cli\u003EAn action shown only as an icon needs a name: use \u003Ca href=\u0022cref:T:IzzyBlazor.IconButton\u0022\u003E\u003Ccode\u003EIconButton\u003C/code\u003E\u003C/a\u003E, whose \u003Ccode\u003ELabel\u003C/code\u003E is required.\u003C/li\u003E\u003Cli\u003EA loading button keeps focus and sets \u003Ccode\u003Earia-busy\u003C/code\u003E; screen readers hear \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.LoadingLabel\u0022\u003E\u003Ccode\u003ELoadingLabel\u003C/code\u003E\u003C/a\u003E.\u003C/li\u003E\u003Cli\u003EA disabled or loading link loses its \u003Ccode\u003Ehref\u003C/code\u003E, keeps \u003Ccode\u003Erole=\u0026quot;link\u0026quot;\u003C/code\u003E and sets \u003Ccode\u003Earia-disabled\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EAn external link says it opens a new tab (\u003Ca href=\u0022cref:P:IzzyBlazor.Button.NewTabLabel\u0022\u003E\u003Ccode\u003ENewTabLabel\u003C/code\u003E\u003C/a\u003E), not just with its icon.\u003C/li\u003E\u003Cli\u003EA toggle (\u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Pressed\u0022\u003E\u003Ccode\u003EPressed\u003C/code\u003E\u003C/a\u003E) sets \u003Ccode\u003Earia-pressed\u003C/code\u003E, so screen readers hear \u0026quot;pressed\u0026quot; or \u0026quot;not pressed\u0026quot;; pressed, it shows an edge in the accent color as well as a tint.\u003C/li\u003E\u003C/ul\u003E", "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full", "notes": "OnClick runs only on interactive pages; Submit, Reset and Href work everywhere." }, "properties": [ { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EMakes it a link to this URL (an \u003Ccode\u003Ea\u003C/code\u003E) instead of a button. A link can\u0026#39;t take \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Reset\u0022\u003E\u003Ccode\u003EReset\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Value\u0022\u003E\u003Ccode\u003EValue\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.FormAction\u0022\u003E\u003Ccode\u003EFormAction\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "External", "type": "bool", "default": "false", "summary": "\u003Cp\u003EFor a link: opens in a new tab with \u003Ccode\u003Erel=\u0026quot;noopener noreferrer\u0026quot;\u003C/code\u003E and shows an external-link icon.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HideExternalIcon", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELeaves out an external link\u0026#39;s icon, for repeated links where it would be noise. Screen readers still hear \u003Ca href=\u0022cref:P:IzzyBlazor.Button.NewTabLabel\u0022\u003E\u003Ccode\u003ENewTabLabel\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "NewTabLabel", "type": "string?", "default": "\u0022(opens in a new tab)\u0022", "summary": "\u003Cp\u003ERead to screen readers after an external link\u0026#39;s text. Defaults to \u0026quot;(opens in a new tab)\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Submit", "type": "bool", "default": "false", "summary": "\u003Cp\u003ESubmits the form it\u0026#39;s in (or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E), like \u003Ccode\u003Etype=\u0026quot;submit\u0026quot;\u003C/code\u003E. Without \u003Ccode\u003ESubmit\u003C/code\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Reset\u0022\u003E\u003Ccode\u003EReset\u003C/code\u003E\u003C/a\u003E, a button does nothing by itself.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Reset", "type": "bool", "default": "false", "summary": "\u003Cp\u003EResets the form it\u0026#39;s in, like \u003Ccode\u003Etype=\u0026quot;reset\u0026quot;\u003C/code\u003E. Can\u0026#39;t be combined with \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EPosted with the form as \u003Ccode\u003EName=Value\u003C/code\u003E when this button submits it, so one handler can tell which of several submit buttons was pressed. Not \u003Ccode\u003Eaction\u003C/code\u003E, \u003Ccode\u003Emethod\u003C/code\u003E or \u003Ccode\u003Etarget\u003C/code\u003E: a control with one of those names hides the form\u0026#39;s own property, and Blazor\u0026#39;s enhanced form handling then posts to the wrong address.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value posted with \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FormAction", "type": "string?", "summary": "\u003Cp\u003ESubmits to this URL instead of the form\u0026#39;s own action (native \u003Ccode\u003Eformaction\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Form", "type": "string?", "summary": "\u003Cp\u003EThe id of a form elsewhere on the page that this button submits (native \u003Ccode\u003Eform\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent", "default": "Accent.Primary", "summary": "\u003Cp\u003EPrimary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (\u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E, \u003Ccode\u003EAccent.Token(\u0026quot;brand\u0026quot;)\u003C/code\u003E); text on a custom color is chosen for contrast. Emphasis comes from \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Variant\u0022\u003E\u003Ccode\u003EVariant\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Solid", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Solid\u0022\u003E\u003Ccode\u003EButtonVariant.Solid\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "EndIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon after the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches to the full width of its container.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Loading", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows a spinner in place of the start icon and blocks further clicks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "LoadingLabel", "type": "string?", "default": "\u0022Loading\u0022", "summary": "\u003Cp\u003ERead to screen readers while \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Loading\u0022\u003E\u003Ccode\u003ELoading\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Loading\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Pressed", "type": "bool?", "summary": "\u003Cp\u003EMakes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (\u003Ccode\u003Earia-pressed\u003C/code\u003E). With \u003Ccode\u003E@bind-Pressed\u003C/code\u003E a click turns it on and off on interactive pages; on static pages the server decides, as with a submit button\u0026#39;s \u003Ccode\u003EName\u003C/code\u003E and \u003Ccode\u003EValue\u003C/code\u003E. Null (the default) is an ordinary button. Not for links.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.14", "declaredOn": "ButtonBase" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" } ], "events": [ { "name": "OnClick", "type": "EventCallback\u003CMouseEventArgs\u003E", "summary": "\u003Cp\u003ERuns on click on interactive pages (a link still navigates). Has no effect on static pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" } } ], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize" ] }, { "name": "ButtonGroup", "displayName": "ButtonGroup", "fullName": "IzzyBlazor.ButtonGroup", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ERelated buttons in a row, joined into one control by default. Accent, Variant and Size here become the defaults for the buttons inside; a button\u0026#39;s own setting wins.\u003C/p\u003E", "examples": [ "\u003CButtonGroup Label=\u0022Text alignment\u0022 Variant=\u0022ButtonVariant.Outline\u0022 Accent=\u0022Accent.Neutral\u0022\u003E\n \u003CIconButton Icon=\u0022Lucide.TextAlignStart\u0022 Label=\u0022Align left\u0022 /\u003E\n \u003CIconButton Icon=\u0022Lucide.TextAlignCenter\u0022 Label=\u0022Center\u0022 /\u003E\n\u003C/ButtonGroup\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Ediv\u003C/code\u003E with \u003Ccode\u003Erole=\u0026quot;group\u0026quot;\u003C/code\u003E, named by \u003Ccode\u003ELabel\u003C/code\u003E, such as \u0026quot;Text alignment\u0026quot;; without one, screen readers don\u0026#39;t hear what the buttons share.\u003C/li\u003E\u003Cli\u003EEach button is its own tab stop; there\u0026#39;s no arrow-key movement between them (in a Toolbar, its arrow keys move between them).\u003C/li\u003E\u003Cli\u003EIt doesn\u0026#39;t mark a pressed or selected button: for one choice among several, use SegmentedControl or RadioGroup.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "SegmentedControl", "IconButton", "Button", "Menu", "Toolbar" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EWhat the buttons have in common, for screen readers: \u0026quot;Text alignment\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent?", "summary": "\u003Cp\u003EThe buttons\u0026#39; accent, unless a button sets its own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "ButtonVariant?", "summary": "\u003Cp\u003EThe buttons\u0026#39; variant, unless a button sets its own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize?", "summary": "\u003Cp\u003EThe buttons\u0026#39; size, unless a button sets its own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Attached", "type": "bool", "default": "true", "summary": "\u003Cp\u003EJoins the buttons into one control with shared borders (the default). False spaces them apart.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Orientation", "type": "Orientation", "default": "Orientation.Horizontal", "summary": "\u003Cp\u003ELays the buttons out in a row (the default) or a column.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches the group to its container\u0026#39;s width, sharing it among the buttons.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe buttons.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize", "Orientation" ] }, { "name": "Card", "displayName": "Card", "fullName": "IzzyBlazor.Card", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA surface for one thing: media, a heading with actions, content, and a footer. With Href the whole card is a link (the title\u0026#39;s link stretches over it), while buttons in CardActions and CardFooter stay clickable. No script involved.\u003C/p\u003E\u003Cp\u003EContent between the tags is the body. The other parts are components written among it, directly in the card: CardMedia (drawn at the top), CardHeader (custom heading content, above the title), CardActions (at the end of the heading row), CardBody (the body with layout props) and CardFooter (the bottom row, drawn last). CardMedia, CardHeader and CardActions are drawn at the card\u0026#39;s level, so a form or cascading value they\u0026#39;re written inside doesn\u0026#39;t reach them.\u003C/p\u003E", "examples": [ "\u003CCard Title=\u0022Website\u0022 Description=\u0022Updated 2 hours ago\u0022 Href=\u0022/projects/website\u0022\u003E\n \u003CCardActions\u003E\u003CIconButton ... /\u003E\u003C/CardActions\u003E\n \u003CCardBody\u003E...\u003C/CardBody\u003E\n \u003CCardFooter Justify=\u0022Justify.End\u0022\u003E...\u003C/CardFooter\u003E\n\u003C/Card\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003E\u003Ccode\u003ETitle\u003C/code\u003E renders a real heading, \u003Ccode\u003Eh3\u003C/code\u003E by default; set \u003Ccode\u003ETitleLevel\u003C/code\u003E to fit the page\u0026#39;s outline.\u003C/li\u003E\u003Cli\u003EWith \u003Ccode\u003EHref\u003C/code\u003E, the link is the title alone, so its name is the \u003Ccode\u003ETitle\u003C/code\u003E text, not the whole card. It needs a \u003Ccode\u003ETitle\u003C/code\u003E, and throws without one.\u003C/li\u003E\u003Cli\u003EKeyboard users tab to the title link, and the focus ring is drawn around the whole card.\u003C/li\u003E\u003Cli\u003ELinks and buttons in the header, CardActions, CardFooter and the body stay their own tab stops and stay clickable above the stretched link.\u003C/li\u003E\u003Cli\u003ECardFooter is drawn last but stays where it\u0026#39;s written in the DOM, which is the order screen readers follow, so write it last.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Section", "Stat", "DescriptionList" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EThe heading.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TitleLevel", "type": "int", "default": "3", "summary": "\u003Cp\u003EThe heading level of \u003Ca href=\u0022cref:P:IzzyBlazor.Card.Title\u0022\u003E\u003Ccode\u003ETitle\u003C/code\u003E\u003C/a\u003E, 1 to 6. Defaults to 3.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Description", "type": "string?", "summary": "\u003Cp\u003EA muted line under the title.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe card\u0026#39;s content: the body, plus any \u003Ca href=\u0022cref:T:IzzyBlazor.CardMedia\u0022\u003E\u003Ccode\u003ECardMedia\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.CardHeader\u0022\u003E\u003Ccode\u003ECardHeader\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.CardActions\u0022\u003E\u003Ccode\u003ECardActions\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.CardBody\u0022\u003E\u003Ccode\u003ECardBody\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.CardFooter\u0022\u003E\u003Ccode\u003ECardFooter\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EMakes the whole card a link to this address, through its title. Needs a \u003Ca href=\u0022cref:P:IzzyBlazor.Card.Title\u0022\u003E\u003Ccode\u003ETitle\u003C/code\u003E\u003C/a\u003E (it throws without one).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dividers", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMakes each \u003Ca href=\u0022cref:T:IzzyBlazor.CardBody\u0022\u003E\u003Ccode\u003ECardBody\u003C/code\u003E\u003C/a\u003E a section, with a line across the card between sections, as in a settings page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "CardVariant", "default": "CardVariant.Outline", "summary": "\u003Cp\u003EHow it\u0026#39;s drawn. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.CardVariant.Outline\u0022\u003E\u003Ccode\u003ECardVariant.Outline\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EInner spacing and title size. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "CardVariant", "ControlSize" ] }, { "name": "CardActions", "displayName": "CardActions", "fullName": "IzzyBlazor.CardActions", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EButtons at the end of a \u003Ca href=\u0022cref:T:IzzyBlazor.Card\u0022\u003E\u003Ccode\u003ECard\u003C/code\u003E\u003C/a\u003E\u0026#39;s heading row, such as a menu. They stay clickable on a linked card. Write it directly in the card.\u003C/p\u003E", "examples": [ "\u003CCardActions\u003E\u003CIconButton Icon=\u0022Lucide.Ellipsis\u0022 Label=\u0022More\u0022 /\u003E\u003C/CardActions\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "CardBody", "displayName": "CardBody", "fullName": "IzzyBlazor.CardBody", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA \u003Ca href=\u0022cref:T:IzzyBlazor.Card\u0022\u003E\u003Ccode\u003ECard\u003C/code\u003E\u003C/a\u003E\u0026#39;s body with layout props: a column with \u003Ccode\u003EGap\u003C/code\u003E, \u003Ccode\u003EAlign\u003C/code\u003E, \u003Ccode\u003EJustify\u003C/code\u003E and \u003Ccode\u003EDirection\u003C/code\u003E, like \u003Ca href=\u0022cref:T:IzzyBlazor.Stack\u0022\u003E\u003Ccode\u003EStack\u003C/code\u003E\u003C/a\u003E. Optional: content written straight in the card is its body too. \u003Ca href=\u0022cref:P:IzzyBlazor.CardBody.Flush\u0022\u003E\u003Ccode\u003EFlush\u003C/code\u003E\u003C/a\u003E runs it edge to edge, for a table or a list.\u003C/p\u003E", "examples": [ "\u003CCardBody Gap=\u00222\u0022\u003E...\u003C/CardBody\u003E" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Direction", "type": "Responsive\u003CDirection\u003E", "default": "computed", "summary": "\u003Cp\u003ELayout direction. Defaults to a column.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Flush", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERuns the content to the card\u0026#39;s edges, without side padding: for a table, a divided list or a map.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between children, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003ECross-axis alignment. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EMain-axis distribution. Defaults to start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether children wrap onto new lines: \u003Ccode\u003E\u0026lt;Row Wrap\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E so the container sits in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Direction", "Justify" ] }, { "name": "CardFooter", "displayName": "CardFooter", "fullName": "IzzyBlazor.CardFooter", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe bottom row of a \u003Ca href=\u0022cref:T:IzzyBlazor.Card\u0022\u003E\u003Ccode\u003ECard\u003C/code\u003E\u003C/a\u003E, such as buttons or metadata. A row like \u003Ca href=\u0022cref:T:IzzyBlazor.Row\u0022\u003E\u003Ccode\u003ERow\u003C/code\u003E\u003C/a\u003E, with \u003Ccode\u003EGap\u003C/code\u003E, \u003Ccode\u003EAlign\u003C/code\u003E, \u003Ccode\u003EJustify\u003C/code\u003E and \u003Ccode\u003EWrap\u003C/code\u003E. Write it directly in the card; it\u0026#39;s drawn last. It spans the card\u0026#39;s width and bottom edge, so a \u003Ccode\u003EBg\u003C/code\u003E or \u003Ccode\u003EBorderTop\u003C/code\u003E makes it a bar.\u003C/p\u003E", "examples": [ "\u003CCardFooter Justify=\u0022Justify.End\u0022\u003E\u003CButton\u003ECancel\u003C/Button\u003E\u003C/CardFooter\u003E" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between children, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003ECross-axis alignment. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EMain-axis distribution. Defaults to start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether children wrap onto new lines: \u003Ccode\u003E\u0026lt;Row Wrap\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E so the container sits in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Justify" ] }, { "name": "CardHeader", "displayName": "CardHeader", "fullName": "IzzyBlazor.CardHeader", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ECustom heading content in a \u003Ca href=\u0022cref:T:IzzyBlazor.Card\u0022\u003E\u003Ccode\u003ECard\u003C/code\u003E\u003C/a\u003E, above its \u003Ccode\u003ETitle\u003C/code\u003E, such as an avatar row, beside any \u003Ca href=\u0022cref:T:IzzyBlazor.CardActions\u0022\u003E\u003Ccode\u003ECardActions\u003C/code\u003E\u003C/a\u003E. Write it directly in the card.\u003C/p\u003E", "examples": [ "\u003CCardHeader\u003E\u003CAvatar Name=\u0022Maya Reyes\u0022 /\u003E\u003C/CardHeader\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "CardMedia", "displayName": "CardMedia", "fullName": "IzzyBlazor.CardMedia", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EAn image or video at the top of a \u003Ca href=\u0022cref:T:IzzyBlazor.Card\u0022\u003E\u003Ccode\u003ECard\u003C/code\u003E\u003C/a\u003E, edge to edge. Write it directly in the card.\u003C/p\u003E", "examples": [ "\u003CCardMedia\u003E\u003Cimg src=\u0022cover.jpg\u0022 alt=\u0022\u0022 /\u003E\u003C/CardMedia\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "Center", "displayName": "Center", "fullName": "IzzyBlazor.Center", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ECenters its children both ways, such as an icon in a square or an empty state in a panel.\u003C/p\u003E", "examples": [ "\u003CCenter Height=\u0022Length.Rem(12)\u0022\u003E\n \u003CSpinner /\u003E\n\u003C/Center\u003E" ], "seeAlso": [ "Stack", "Box", "EmptyState", "AspectRatio" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E, to sit in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [] }, { "name": "Checkbox", "displayName": "Checkbox", "fullName": "IzzyBlazor.Checkbox", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA checkbox with its label beside it.\u003C/p\u003E", "remarks": "\u003Cp\u003EPosting: a hidden \u0026quot;false\u0026quot; follows the box, so an unchecked box posts \u0026quot;false\u0026quot; and a checked one posts \u0026quot;true\u0026quot; then \u0026quot;false\u0026quot; (Blazor binds the first value). Without it an unchecked box posts nothing, and when nothing else in the form is posted, Blazor doesn\u0026#39;t bind the model at all: the page recreates it and a box that defaults to true comes back checked. A disabled box posts nothing, like any disabled field; in a read-only Form it\u0026#39;s disabled and posts its value.\u003C/p\u003E\u003Cp\u003EIndeterminate shows a dash, for a \u0026quot;select all\u0026quot; box when only some are selected. It\u0026#39;s display only: the box posts as unchecked (\u0026quot;false\u0026quot;), and choosing it clears the dash.\u003C/p\u003E", "examples": [ "\u003CCheckbox @bind-Value=\u0022Model.AcceptTerms\u0022 Label=\u0022I agree to the terms\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native checkbox inside its \u003Ccode\u003Elabel\u003C/code\u003E, so Space toggles it and clicking the label does too.\u003C/li\u003E\u003Cli\u003EThe label text, or \u003Ccode\u003EChildContent\u003C/code\u003E, names it; the hint and errors are linked with \u003Ccode\u003Earia-describedby\u003C/code\u003E, and an \u003Ccode\u003EIcon\u003C/code\u003E beside it is hidden from screen readers.\u003C/li\u003E\u003Cli\u003EWith script, an unchecked indeterminate box is announced as \u0026quot;mixed\u0026quot;; with JavaScript off, only the dash shows it and screen readers hear \u0026quot;not checked\u0026quot;. A checked box is \u0026quot;checked\u0026quot; either way, with no dash.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Switch", "CheckboxGroup", "RadioGroup" ], "bases": [ "FieldBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003ERich label content, such as text with a link. Overrides \u003Ccode\u003ELabel\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Indeterminate", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows the box as partly selected (a dash), such as a \u0026quot;select all\u0026quot; box when only some items are. Display only: it posts as unchecked, and choosing the box clears it. With script, screen readers announce it as \u0026quot;mixed\u0026quot;. A \u003Ca href=\u0022cref:T:IzzyBlazor.Switch\u0022\u003E\u003Ccode\u003ESwitch\u003C/code\u003E\u003C/a\u003E doesn\u0026#39;t take it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ControlPosition", "type": "ControlPosition", "default": "ControlPosition.Start", "summary": "\u003Cp\u003EWhich side of the label the box or switch sits on. \u003Ccode\u003EEnd\u003C/code\u003E puts it at the end of the row, with the hint and errors under the label, as in a list of settings. Defaults to \u003Ccode\u003EStart\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the label, such as a key for a security setting. With \u003Ccode\u003EControlPosition.End\u003C/code\u003E it\u0026#39;s centered on the label and hint, at the start of the row. Decorative: screen readers read only the label. Use icons on every row of a group or none.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "bool", "default": "false", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [ "ControlPosition" ] }, { "name": "CheckboxGroup", "displayName": "CheckboxGroup\u003CTValue, TItem\u003E", "fullName": "IzzyBlazor.CheckboxGroup\u00602", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ECheckboxes for several choices, bound to a collection.\u003C/p\u003E", "remarks": "\u003Cp\u003EPosting: each checked box posts the field\u0026#39;s name with its value, and Blazor binds the repeated values to the collection, so it works on static pages with no script.\u003C/p\u003E\u003Cp\u003ESelectAll adds a box above the options that checks or clears them all at once, on static pages too: the script flips the options, then fires each one\u0026#39;s change, as if clicked. So on an interactive page ValueChanged runs once per option it flips. It has no name, so it doesn\u0026#39;t post. With JavaScript off it isn\u0026#39;t shown.\u003C/p\u003E", "examples": [ "\u003CCheckboxGroup @bind-Value=\u0022Model.Toppings\u0022 Items=\u0022Toppings\u0022 /\u003E\n\u003CCheckboxGroup @bind-Value=\u0022Model.Days\u0022 Items=\u0022Enum.GetValues\u003CDayOfWeek\u003E()\u0022 Orientation=\u0022Orientation.Horizontal\u0022 /\u003E\n\u003CCheckboxGroup @bind-Value=\u0022Model.Notify\u0022 Items=\u0022Topics\u0022 SelectAll SelectAllText=\u0022Everything\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders native checkboxes in a \u003Ccode\u003Efieldset\u003C/code\u003E whose \u003Ccode\u003Elegend\u003C/code\u003E is the label; each box is a Tab stop, toggled with Space.\u003C/li\u003E\u003Cli\u003EEach option\u0026#39;s text is its \u003Ccode\u003Elabel\u003C/code\u003E; an \u003Ccode\u003EItemDescription\u003C/code\u003E is the box\u0026#39;s description, not part of its name. The hint and errors are linked to the group with \u003Ccode\u003Earia-describedby\u003C/code\u003E, and each box sets \u003Ccode\u003Earia-invalid\u003C/code\u003E when the field is invalid.\u003C/li\u003E\u003Cli\u003EAfter a post that fails with an error here, the first option takes focus, so screen readers read the group\u0026#39;s name and error (its description); a \u003Ccode\u003EFormErrors\u003C/code\u003E earlier in the page takes it first. Not on interactive pages: there, use a \u003Ccode\u003EFormErrors\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EA required group\u0026#39;s boxes can\u0026#39;t be marked required (HTML can\u0026#39;t require one of several), so screen readers hear \u0026quot;(required)\u0026quot; after its label instead (\u003Ccode\u003EIzzyText.Required\u003C/code\u003E); the asterisk is hidden from them. Nothing stops a post with none checked: the server\u0026#39;s validation reports it.\u003C/li\u003E\u003Cli\u003EA \u003Ccode\u003ESelectAll\u003C/code\u003E box is named by its text, and the options under it are a group with the same name, so screen readers hear them as its part. It\u0026#39;s announced as \u0026quot;mixed\u0026quot; when only some are checked. Its text should say it stands for all of them (\u0026quot;Select all\u0026quot;, \u0026quot;All channels\u0026quot;).\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "MultiSelect", "Checkbox", "RadioGroup" ], "typeParameters": [ "TValue", "TItem" ], "bases": [ "FieldBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the SelectAll box isn\u0027t shown." }, "properties": [ { "name": "Items", "type": "IEnumerable\u003CTItem\u003E?", "summary": "\u003Cp\u003EThe options. For an enum, pass its values: \u003Ccode\u003EItems=\u0026quot;Enum.GetValues\u0026lt;Topping\u0026gt;()\u0026quot;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "ItemText", "type": "Func\u003CTItem, string\u003E?", "default": "computed", "summary": "\u003Cp\u003EThe text for each option. Defaults to the enum value\u0026#39;s \u003Ccode\u003E[Display(Name)]\u003C/code\u003E or its string form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemTemplate", "type": "RenderFragment\u003CTItem\u003E?", "summary": "\u003Cp\u003EMarkup for each option\u0026#39;s label, such as an icon or a badge beside its name. All of it names the box; put a description in \u003Ccode\u003EItemDescription\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemDescription", "type": "Func\u003CTItem, string?\u003E?", "summary": "\u003Cp\u003EA line under each option\u0026#39;s name, such as what choosing it does. Screen readers hear it as the box\u0026#39;s description, after its name.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Orientation", "type": "Orientation", "default": "Orientation.Vertical", "summary": "\u003Cp\u003EStack options vertically (the default) or in a row.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SelectAll", "type": "bool", "default": "false", "summary": "\u003Cp\u003EAdds a box above the options that checks or clears them all at once and shows a dash when only some are checked. It doesn\u0026#39;t post; the options do. It works on static pages through the script, and isn\u0026#39;t shown with JavaScript off. On an interactive page, \u003Ccode\u003EValueChanged\u003C/code\u003E runs once for each option it flips, so code that saves on every change sees the steps between.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "full", "live": "full", "notes": "With JavaScript off, the box isn\u0027t shown." }, "addedIn": "0.1.0-alpha.13" }, { "name": "SelectAllText", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe \u003Ca href=\u0022cref:P:IzzyBlazor.CheckboxGroup\u00602.SelectAll\u0022\u003E\u003Ccode\u003ESelectAll\u003C/code\u003E\u003C/a\u003E box\u0026#39;s text. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.IzzyText.SelectAll\u0022\u003E\u003Ccode\u003ESelectAll\u003C/code\u003E\u003C/a\u003E (\u0026quot;Select all\u0026quot;), also when empty.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Value", "type": "TValue", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [ "Orientation" ] }, { "name": "Code", "displayName": "Code", "fullName": "IzzyBlazor.Code", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ECode: inline (a \u003Ccode\u003E\u0026lt;code\u0026gt;\u003C/code\u003E in running text) or a Block (\u003Ccode\u003E\u0026lt;pre\u0026gt;\u003C/code\u003E\u003Ccode\u003E\u0026lt;code\u0026gt;\u003C/code\u003E) that scrolls sideways. A block\u0026#39;s copy button needs script, so it shows only where the browser runs script (from the first paint, so the block doesn\u0026#39;t change when IzzyBlazor\u0026#39;s script arrives; it copies once that has loaded); with JavaScript off the code is still there to select and copy by hand.\u003C/p\u003E", "remarks": "\u003Cp\u003EWith a Language the highlighter knows (C#, Razor, HTML, CSS, JavaScript/TypeScript, JSON, shell), the code is colored on the server: spans with ib-tok-* classes, so it works with no script and never flashes plain first.\u003C/p\u003E\u003Cp\u003ELineNumbers and HighlightLines put each line in its own span (a \u003Ccode\u003E\u0026lt;mark\u0026gt;\u003C/code\u003E when highlighted), with its newline inside, so copying still gives the code as written; the numbers are CSS counters, never selected or copied. A Title turns the floating bar into a header row.\u003C/p\u003E", "examples": [ "\u003CCode\u003Edotnet run\u003C/Code\u003E\n\u003CCode Block Language=\u0022csharp\u0022 Title=\u0022Program.cs\u0022\u003Ebuilder.Services.AddIzzyBlazor();\u003C/Code\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EInline code is a \u003Ccode\u003Ecode\u003C/code\u003E; a block is a \u003Ccode\u003Epre\u003C/code\u003E holding a \u003Ccode\u003Ecode\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EA block is a tab stop, so a long line or a block with \u003Ccode\u003EMaxHeight\u003C/code\u003E can be scrolled from the keyboard. It\u0026#39;s a group named by its \u003Ccode\u003ETitle\u003C/code\u003E, or \u0026quot;Code\u0026quot; without one.\u003C/li\u003E\u003Cli\u003EThe copy button is named \u0026quot;Copy code\u0026quot; (\u003Ccode\u003ECopyLabel\u003C/code\u003E); after copying, it shows a check for a moment and \u0026quot;Copied\u0026quot; (\u003Ccode\u003ECopiedLabel\u003C/code\u003E) is announced politely.\u003C/li\u003E\u003Cli\u003EWith JavaScript off there\u0026#39;s no copy button; the code is still there to select.\u003C/li\u003E\u003Cli\u003ELine numbers are CSS with empty alt text, so they\u0026#39;re never copied and screen readers skip them where the browser supports it.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "CodeExample", "CopyButton", "Kbd" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, code blocks have no copy button." }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe code. In a block, whitespace and line breaks are kept as written.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Block", "type": "bool", "default": "false", "summary": "\u003Cp\u003EA block of code on its own lines (\u003Ccode\u003Epre\u003C/code\u003E), scrolling sideways when long.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MaxHeight", "type": "Length?", "summary": "\u003Cp\u003EThe tallest a block gets before its code scrolls, such as \u003Ccode\u003ELength.Rem(20)\u003C/code\u003E for a long file. The language label and copy button stay in place. Blocks only.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Language", "type": "string?", "summary": "\u003Cp\u003EThe language, such as \u0026quot;razor\u0026quot;, \u0026quot;csharp\u0026quot;, \u0026quot;css\u0026quot; or \u0026quot;bash\u0026quot;: shown above a block, and used to color the code when the highlighter knows it (see \u003Ca href=\u0022cref:P:IzzyBlazor.IzzyCodeHighlighter.Languages\u0022\u003E\u003Ccode\u003ELanguages\u003C/code\u003E\u003C/a\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Highlight", "type": "bool", "default": "true", "summary": "\u003Cp\u003EColors the code by \u003Ca href=\u0022cref:P:IzzyBlazor.Code.Language\u0022\u003E\u003Ccode\u003ELanguage\u003C/code\u003E\u003C/a\u003E. Defaults to true. The code must be plain text (or a string expression); content with markup in it is shown as written.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EA file name or caption for a block, such as \u0026quot;Program.cs\u0026quot;, shown in a header row above the code in place of \u003Ca href=\u0022cref:P:IzzyBlazor.Code.Language\u0022\u003E\u003Ccode\u003ELanguage\u003C/code\u003E\u003C/a\u003E (which still sets the colors).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "LineNumbers", "type": "bool", "default": "false", "summary": "\u003Cp\u003ENumbers a block\u0026#39;s lines. The numbers aren\u0026#39;t selected or copied with the code.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HighlightLines", "type": "string?", "summary": "\u003Cp\u003ELines of a block to highlight, by number from 1: single lines and ranges, such as \u003Ccode\u003E\u0026quot;3-5,9\u0026quot;\u003C/code\u003E. Highlighted lines are \u003Ccode\u003Emark\u003C/code\u003E elements with a tinted background.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Copyable", "type": "bool", "default": "true", "summary": "\u003Cp\u003EAdds a copy button to a block (with JavaScript). Defaults to true.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CopyLabel", "type": "string?", "default": "\u0022Copy code\u0022", "summary": "\u003Cp\u003EThe copy button\u0026#39;s name. Defaults to \u0026quot;Copy code\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CopiedLabel", "type": "string?", "default": "\u0022Copied\u0022", "summary": "\u003Cp\u003EAnnounced after copying. Defaults to \u0026quot;Copied\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Length" ] }, { "name": "CodeExample", "displayName": "CodeExample", "fullName": "IzzyBlazor.CodeExample", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA live example with its source: the preview (the content) in a frame, and the code under it in a Code block, colored on the server, with a copy button. Works with JavaScript off.\u003C/p\u003E", "remarks": "\u003Cp\u003ESeveral files: CodeExampleFile parts among the content, shown as tabs over the source (the radio-button Tabs, so switching needs no script). Collapsible hides the source behind a \u0026quot;Show code\u0026quot; toggle (a \u003Ccode\u003E\u0026lt;details\u0026gt;\u003C/code\u003E).\u003C/p\u003E", "examples": [ "\u003CCodeExample Code=\u0022@source\u0022\u003E\n \u003CButton\u003ESave\u003C/Button\u003E\n\u003C/CodeExample\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EThe source is a Code block: a tab stop that scrolls from the keyboard, with a copy button named \u0026quot;Copy code\u0026quot;.\u003C/li\u003E\u003Cli\u003ESeveral files are Tabs named \u0026quot;Source files\u0026quot; (\u003Ccode\u003EFilesLabel\u003C/code\u003E): radio buttons with JavaScript off, ARIA tabs with it.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ECollapsible\u003C/code\u003E uses a native \u003Ccode\u003Edetails\u003C/code\u003E, so the toggle works with Enter and Space and no script; it reads \u0026quot;Show code\u0026quot; or \u0026quot;Hide code\u0026quot; (\u003Ccode\u003EShowCodeText\u003C/code\u003E, \u003Ccode\u003EHideCodeText\u003C/code\u003E).\u003C/li\u003E\u003Cli\u003EHeadings in the preview stay headings to screen readers, though they\u0026#39;re left out of the page\u0026#39;s OnThisPage.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Code", "Tabs", "Collapsible" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the source has no copy button." }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe live example.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Code", "type": "string?", "summary": "\u003Cp\u003EThe example\u0026#39;s source. For several files, write \u003Ca href=\u0022cref:T:IzzyBlazor.CodeExampleFile\u0022\u003E\u003Ccode\u003ECodeExampleFile\u003C/code\u003E\u003C/a\u003Es instead (or as well: this is then the first tab).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Language", "type": "string", "default": "\u0022razor\u0022", "summary": "\u003Cp\u003EThe language of the source, for colors. Defaults to \u0026quot;razor\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EA file name for the source, such as \u0026quot;SignIn.razor\u0026quot;, in a header row (or on its tab).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HighlightLines", "type": "string?", "summary": "\u003Cp\u003ELines of the source to highlight, such as \u003Ccode\u003E\u0026quot;3-5,9\u0026quot;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "LineNumbers", "type": "bool", "default": "false", "summary": "\u003Cp\u003ENumbers the source\u0026#39;s lines.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MaxHeight", "type": "Length?", "summary": "\u003Cp\u003EThe tallest the source gets before it scrolls, such as \u003Ccode\u003ELength.Rem(20)\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Collapsible", "type": "bool", "default": "false", "summary": "\u003Cp\u003EHides the source behind a \u0026quot;Show code\u0026quot; toggle, which works with JavaScript off.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SourceOpen", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWith \u003Ca href=\u0022cref:P:IzzyBlazor.CodeExample.Collapsible\u0022\u003E\u003Ccode\u003ECollapsible\u003C/code\u003E\u003C/a\u003E, starts with the source shown.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Center", "type": "bool", "default": "false", "summary": "\u003Cp\u003ECenters the preview\u0026#39;s content both ways.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ShowCodeText", "type": "string?", "default": "\u0022Show code\u0022", "summary": "\u003Cp\u003EThe toggle\u0026#39;s text while the source is hidden. Defaults to \u0026quot;Show code\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HideCodeText", "type": "string?", "default": "\u0022Hide code\u0022", "summary": "\u003Cp\u003EThe toggle\u0026#39;s text while the source is shown. Defaults to \u0026quot;Hide code\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FilesLabel", "type": "string?", "default": "\u0022Source files\u0022", "summary": "\u003Cp\u003EThe source tabs\u0026#39; name for screen readers. Defaults to \u0026quot;Source files\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Length" ] }, { "name": "CodeExampleFile", "displayName": "CodeExampleFile", "fullName": "IzzyBlazor.CodeExampleFile", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EOne source file of a \u003Ca href=\u0022cref:T:IzzyBlazor.CodeExample\u0022\u003E\u003Ccode\u003ECodeExample\u003C/code\u003E\u003C/a\u003E, shown as a tab over its source. Write it among the example\u0026#39;s content; it renders nothing where it\u0026#39;s written.\u003C/p\u003E", "examples": [ "\u003CCodeExample\u003E\n \u003CSignIn /\u003E\n \u003CCodeExampleFile Title=\u0022SignIn.razor\u0022 Code=\u0022@markup\u0022 /\u003E\n \u003CCodeExampleFile Title=\u0022SignIn.razor.cs\u0022 Language=\u0022csharp\u0022 Code=\u0022@code\u0022 /\u003E\n\u003C/CodeExample\u003E" ], "bases": [], "properties": [ { "name": "Title", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe file name, shown on its tab.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Code", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe source.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Language", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe language, for colors. Defaults to the example\u0026#39;s \u003Ca href=\u0022cref:P:IzzyBlazor.CodeExample.Language\u0022\u003E\u003Ccode\u003ELanguage\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HighlightLines", "type": "string?", "summary": "\u003Cp\u003ELines to highlight, such as \u003Ccode\u003E\u0026quot;3-5,9\u0026quot;\u003C/code\u003E (see \u003Ca href=\u0022cref:P:IzzyBlazor.Code.HighlightLines\u0022\u003E\u003Ccode\u003EHighlightLines\u003C/code\u003E\u003C/a\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "Collapsible", "displayName": "Collapsible", "fullName": "IzzyBlazor.Collapsible", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA single show-and-hide section without accordion styling: \u0026quot;Show more\u0026quot;, \u0026quot;Advanced options\u0026quot;, a FAQ entry. A native \u003Ccode\u003E\u0026lt;details\u0026gt;\u003C/code\u003E, so it works with JavaScript off.\u003C/p\u003E", "examples": [ "\u003CCollapsible Label=\u0022Advanced options\u0022\u003E...\u003C/Collapsible\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EThe \u003Ccode\u003Esummary\u003C/code\u003E takes Enter and Space and is announced as expanded or collapsed by the browser, with JavaScript off too.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ELabel\u003C/code\u003E or \u003Ccode\u003ETrigger\u003C/code\u003E is the trigger\u0026#39;s name, and one is required; the chevron is hidden.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ETrigger\u003C/code\u003E content is drawn inside the \u003Ccode\u003Esummary\u003C/code\u003E, so keep it to inline content, with no links or buttons.\u003C/li\u003E\u003Cli\u003EThe trigger isn\u0026#39;t a heading; put a Heading before it if the section needs one.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Accordion", "Popover" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe trigger text, after a chevron.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Trigger", "type": "RenderFragment?", "summary": "\u003Cp\u003ECustom trigger content, in place of \u003Ca href=\u0022cref:P:IzzyBlazor.Collapsible.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E and the chevron. Inline content only.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe hidden content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Open", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it is open. Use \u003Ccode\u003E@bind-Open\u003C/code\u003E to follow changes on interactive pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" } ], "events": [], "methods": [], "types": [] }, { "name": "ColorPicker", "displayName": "ColorPicker", "fullName": "IzzyBlazor.ColorPicker", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA color field bound to a hex string (\u0026quot;#2563eb\u0026quot;).\u003C/p\u003E", "remarks": "\u003Cp\u003EUnderneath is a native \u0026lt;input type=\u0026quot;color\u0026quot;\u0026gt;, which posts with the form and works with no script: the swatch fills the field and opens the browser\u0026#39;s picker (Chrome and Edge offer the presets in a menu first). With script the swatch shrinks to the start, a hex text box appears beside it, and the presets appear as swatches under the field (the menu is dropped, so the swatch opens the picker directly); both write into the native input, so the value posts and binds the same way.\u003C/p\u003E", "examples": [ "\u003CColorPicker @bind-Value=\u0022Model.Brand\u0022 Presets=\u0022@([\u0022#2563eb\u0022, \u0022#0f766e\u0022, \u0022#be123c\u0022])\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EThe swatch is a native color \u003Ccode\u003Einput\u003C/code\u003E, which opens the browser\u0026#39;s own color panel, from the keyboard too, with no script.\u003C/li\u003E\u003Cli\u003EWith script, the hex box beside it is named after the label and \u0026quot;hex\u0026quot; (\u0026quot;Brand color, hex\u0026quot;; \u003Ccode\u003EHexLabel\u003C/code\u003E).\u003C/li\u003E\u003Cli\u003EPresets are buttons in a group named \u0026quot;Preset colors\u0026quot; (\u003Ccode\u003EPresetsLabel\u003C/code\u003E). Each is named by \u003Ccode\u003EPresetText\u003C/code\u003E (\u0026quot;Ocean\u0026quot;), or else by its hex value (\u0026quot;#2563eb\u0026quot;), and pressed (\u003Ccode\u003Earia-pressed\u003C/code\u003E) while it\u0026#39;s the value. Name them: a hex value means little to most people.\u003C/li\u003E\u003Cli\u003EThe hint and errors are linked to both the swatch and the hex box with \u003Ccode\u003Earia-describedby\u003C/code\u003E, and both set \u003Ccode\u003Earia-invalid\u003C/code\u003E when the field is invalid.\u003C/li\u003E\u003Cli\u003ERead-only, the swatch and presets are disabled and can\u0026#39;t be focused; the hex box is shown, with JavaScript off and with \u003Ccode\u003EShowHex\u003C/code\u003E false too, and stays focusable and read-only.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "TextField", "SegmentedControl", "RadioGroup" ], "bases": [ "FieldBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, there\u0027s no hex box (unless it\u0027s read-only) or preset swatches; the native picker still works." }, "properties": [ { "name": "ReadOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMakes the field read-only: the hex text can be focused and selected, the swatch and presets are off, and the value still posts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Presets", "type": "IEnumerable\u003Cstring\u003E?", "summary": "\u003Cp\u003EColors offered as swatches under the field, as hex strings. Shown with script; without it, Chrome and Edge list them in the browser\u0026#39;s own picker.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ShowHex", "type": "bool", "default": "true", "summary": "\u003Cp\u003EA hex text box beside the swatch (with script), for typing or pasting a value. Defaults to true. A read-only field shows it anyway, as text that can be focused.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HexLabel", "type": "string?", "default": "\u0022hex\u0022", "summary": "\u003Cp\u003EThe hex box\u0026#39;s name after the label. Defaults to \u0026quot;hex\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PresetsLabel", "type": "string?", "default": "\u0022Preset colors\u0022", "summary": "\u003Cp\u003EThe presets\u0026#39; group name. Defaults to \u0026quot;Preset colors\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PresetText", "type": "Func\u003Cstring, string?\u003E?", "summary": "\u003Cp\u003EA name for each preset, such as \u0026quot;Ocean\u0026quot;, given the string from \u003Ca href=\u0022cref:P:IzzyBlazor.ColorPicker.Presets\u0022\u003E\u003Ccode\u003EPresets\u003C/code\u003E\u003C/a\u003E. Screen readers hear it instead of the hex value, and it\u0026#39;s the swatch\u0026#39;s tooltip. Return null to keep the hex value.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [] }, { "name": "ColorSchemeSwitch", "displayName": "ColorSchemeSwitch", "fullName": "IzzyBlazor.ColorSchemeSwitch", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ELets the user pick light, dark or system. The choice is kept in the ib-scheme cookie, which IzzyTheme reads on the server, so every page arrives in the chosen scheme with no flash.\u003C/p\u003E", "remarks": "\u003Cp\u003EThe icon shows the page\u0026#39;s scheme as it is (sun or moon), worked out in CSS, so it\u0026#39;s right even when the device decides. Every option is a link to the endpoint app.MapIzzyBlazor() adds, which sets the cookie and comes back, so it works with JavaScript off. With JavaScript the switch is instant: the script sets the cookie and the page\u0026#39;s scheme without a request, moves the check, and tells other tabs.\u003C/p\u003E", "examples": [ "\u003CColorSchemeSwitch /\u003E an icon button with a menu (default)\n\u003CColorSchemeSwitch Variant=\u0022ColorSchemeSwitchVariant.Toggle\u0022 /\u003E one icon button: light \u003C-\u003E dark\n\u003CColorSchemeSwitch Variant=\u0022ColorSchemeSwitchVariant.Segmented\u0022 /\u003E System, Light, Dark side by side\n\u003CColorSchemeSwitch @bind-Value=\u0022scheme\u0022 /\u003E interactive pages: follow it from C#" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EThe menu button is named \u0026quot;Color scheme\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E). With JavaScript its items are radio menu items with \u003Ccode\u003Earia-checked\u003C/code\u003E and the menu\u0026#39;s arrow keys; without it, links, the current one marked with \u003Ccode\u003Earia-current\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EToggle\u003C/code\u003E is one link named for what it does, \u0026quot;Switch to dark mode\u0026quot; or \u0026quot;Switch to light mode\u0026quot;; with JavaScript, focus stays on the switch after a click.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ESegmented\u003C/code\u003E is a group named \u0026quot;Color scheme\u0026quot; whose current option has \u003Ccode\u003Earia-current\u003C/code\u003E; with \u003Ccode\u003EIconOnly\u003C/code\u003E screen readers still hear each option\u0026#39;s name.\u003C/li\u003E\u003Cli\u003EEvery option is a link, so it works by keyboard with JavaScript off (the page reloads).\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "IzzyTheme", "SegmentedControl", "Menu" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, choosing a scheme reloads the page, and other open tabs don\u0027t follow." }, "properties": [ { "name": "Variant", "type": "ColorSchemeSwitchVariant", "default": "ColorSchemeSwitchVariant.Menu", "summary": "\u003Cp\u003EHow it looks: \u003Ca href=\u0022cref:F:IzzyBlazor.ColorSchemeSwitchVariant.Menu\u0022\u003E\u003Ccode\u003EColorSchemeSwitchVariant.Menu\u003C/code\u003E\u003C/a\u003E (an icon button with a menu, the default), \u003Ca href=\u0022cref:F:IzzyBlazor.ColorSchemeSwitchVariant.Toggle\u0022\u003E\u003Ccode\u003EColorSchemeSwitchVariant.Toggle\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:F:IzzyBlazor.ColorSchemeSwitchVariant.Segmented\u0022\u003E\u003Ccode\u003EColorSchemeSwitchVariant.Segmented\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "ColorScheme?", "summary": "\u003Cp\u003EThe chosen scheme. Leave it unset to show the user\u0026#39;s choice from the cookie. Bind it on interactive pages to follow the user\u0026#39;s choice; setting it from C# there applies that scheme to the page, the cookie and other tabs, as a click would.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "IconOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003ESegmented only: icons without the labels (the names stay for screen readers and as tooltips).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight. Defaults to medium, the size of a header\u0026#39;s icon buttons.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Color scheme\u0022", "summary": "\u003Cp\u003EThe button\u0026#39;s or group\u0026#39;s accessible name. Defaults to \u0026quot;Color scheme\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ColorScheme", "ColorSchemeSwitchVariant", "ControlSize" ] }, { "name": "Column", "displayName": "Column", "fullName": "IzzyBlazor.Column", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ELays children out vertically. For a direction that changes by screen size, use \u003Ca href=\u0022cref:T:IzzyBlazor.Stack\u0022\u003E\u003Ccode\u003EStack\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "examples": [ "\u003CColumn Gap=\u00221\u0022\u003E\n \u003CHeading Level=\u00223\u0022\u003EPro plan\u003C/Heading\u003E\n \u003CTextBlock Color=\u0022Color.Muted\u0022\u003EBilled yearly.\u003C/TextBlock\u003E\n\u003C/Column\u003E" ], "seeAlso": [ "Stack", "Row", "Grid" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between children, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003ECross-axis alignment. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EMain-axis distribution. Defaults to start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether children wrap onto new lines: \u003Ccode\u003E\u0026lt;Row Wrap\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E so the container sits in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Justify" ] }, { "name": "Combobox", "displayName": "Combobox\u003CTValue\u003E", "fullName": "IzzyBlazor.Combobox\u00601", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA select you can type in to filter the options.\u003C/p\u003E", "remarks": "\u003Cp\u003EHow it works three ways:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003ENo script: a native select holds and posts the value, so the form works as is.\u003C/li\u003E\u003Cli\u003EWith script (\u003Ccode\u003E\u0026lt;ib-combobox\u0026gt;\u003C/code\u003E): a text input and a listbox take over, filtering as you type. The select stays in the form, hidden under the input, so posting, required validation and @bind still go through it.\u003C/li\u003E\u003Cli\u003EInteractive with Search: typing calls Search on the server (debounced) and the list shows its results; Enter or leaving the field before they come waits for them. Choosing, Escape or leaving puts the chosen text back and, after a search, calls Search(\u0026quot;\u0026quot;) again, so the list opens with the first results. Without a circuit, Search(\u0026quot;\u0026quot;) fills the list once and it filters in the browser.\u003C/li\u003E\u003C/ul\u003E", "examples": [ "\u003CCombobox @bind-Value=\u0022Model.CountryId\u0022 Items=\u0022CountryIds\u0022 ItemText=\u0022id =\u003E Countries[id]\u0022 Placeholder=\u0022Search countries\u0022 /\u003E\n\u003CCombobox @bind-Value=\u0022Model.OwnerId\u0022 Search=\u0022FindPeople\u0022 ItemText=\u0022id =\u003E People[id].Name\u0022\u003E\n \u003CItemTemplate Context=\u0022id\u0022\u003E\u003CAvatar ... /\u003E @People[id].Name\u003C/ItemTemplate\u003E\n\u003C/Combobox\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EWith script, the input is a \u003Ccode\u003Ecombobox\u003C/code\u003E with a \u003Ccode\u003Elistbox\u003C/code\u003E of options: focus stays in the input, and the highlighted option is its \u003Ccode\u003Earia-activedescendant\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EDown and Up open the list and move through it, Page Down and Page Up move ten, Enter chooses, and Alt\u002BUp chooses and closes.\u003C/li\u003E\u003Cli\u003EEscape closes the list and puts the chosen text back, without closing a dialog around it; Tab closes it too.\u003C/li\u003E\u003Cli\u003ELeaving the field takes an option whose text was typed in full, and clears the value when the text was emptied.\u003C/li\u003E\u003Cli\u003EWhen nothing matches, \u0026quot;No matches\u0026quot; (\u003Ccode\u003EEmptyText\u003C/code\u003E) is announced politely, as is \u0026quot;Searching\u2026\u0026quot; while a server search runs.\u003C/li\u003E\u003Cli\u003EThe label names the input and the list; the chevron button is named \u0026quot;Show options\u0026quot; (\u003Ccode\u003EToggleLabel\u003C/code\u003E) and is left out of the Tab order.\u003C/li\u003E\u003Cli\u003EWith JavaScript off, it\u0026#39;s a native \u003Ccode\u003Eselect\u003C/code\u003E, with its own keys and announcements.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Select", "MultiSelect", "TextField" ], "typeParameters": [ "TValue" ], "bases": [ "FieldBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, it\u0027s a plain dropdown with no typing to filter." }, "properties": [ { "name": "ReadOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMakes the field read-only: the chosen text shows in a read-only text field, and the value still posts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Items", "type": "IEnumerable\u003CTValue\u003E?", "summary": "\u003Cp\u003EThe options. Not needed for enums, whose values are listed automatically, or with \u003Ca href=\u0022cref:P:IzzyBlazor.Combobox\u00601.Search\u0022\u003E\u003Ccode\u003ESearch\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Search", "type": "Func\u003Cstring, CancellationToken, Task\u003CIEnumerable\u003CTValue\u003E\u003E\u003E?", "summary": "\u003Cp\u003EFinds options for the typed text, for lists too long to send whole. Called with \u0026quot;\u0026quot; to fill the list at first (on every page), and as the user types on interactive pages. Return a short list, such as the first 50 matches.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "partial", "static": "partial", "live": "full", "notes": "On static pages, Search fills the list once; searching as you type needs an interactive page." } }, { "name": "Debounce", "type": "int", "default": "250", "summary": "\u003Cp\u003EMilliseconds to wait after the last keystroke before calling \u003Ca href=\u0022cref:P:IzzyBlazor.Combobox\u00601.Search\u0022\u003E\u003Ccode\u003ESearch\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemText", "type": "Func\u003CTValue, string\u003E?", "default": "computed", "summary": "\u003Cp\u003EThe text for each option, also what\u0026#39;s typed to find it and what the field shows once chosen. Defaults to the enum value\u0026#39;s \u003Ccode\u003E[Display(Name)]\u003C/code\u003E or its string form. Keep it unique.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemTemplate", "type": "RenderFragment\u003CTValue\u003E?", "summary": "\u003Cp\u003EMarkup for each option in the list, such as an icon or avatar. The field shows \u003Ca href=\u0022cref:P:IzzyBlazor.Combobox\u00601.ItemText\u0022\u003E\u003Ccode\u003EItemText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placeholder", "type": "string?", "summary": "\u003Cp\u003EText in the empty field, such as \u0026quot;Search countries\u0026quot;. Also the empty option without script.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EmptyText", "type": "string?", "summary": "\u003Cp\u003EShown when nothing matches.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SearchingText", "type": "string?", "summary": "\u003Cp\u003EShown while \u003Ca href=\u0022cref:P:IzzyBlazor.Combobox\u00601.Search\u0022\u003E\u003Ccode\u003ESearch\u003C/code\u003E\u003C/a\u003E runs.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ToggleLabel", "type": "string?", "summary": "\u003Cp\u003EThe accessible name of the button that opens the list.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "TValue", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [] }, { "name": "ConfirmButton", "displayName": "ConfirmButton", "fullName": "IzzyBlazor.ConfirmButton", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA button that asks first: it opens a small dialog (\u0026quot;Delete this project?\u0026quot;) and only the dialog\u0026#39;s confirm button carries out the action. What confirming does:\u003C/p\u003E", "remarks": "\u003Cul\u003E\u003Cli\u003EInside a form (the usual case): submits that form, with Name=Value if given, so one handler can tell which action was confirmed. Works with JavaScript off.\u003C/li\u003E\u003Cli\u003EForm=\u0026quot;id\u0026quot;: submits a form elsewhere on the page instead.\u003C/li\u003E\u003Cli\u003EHref: follows a link.\u003C/li\u003E\u003Cli\u003EOnConfirm: runs C# on an interactive page.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003EThe trigger opens the dialog with the native command attributes (no script needed in current browsers). The dialog is rendered beside the trigger with InsideForm set, so it can live inside the form it submits. With script, the dialog closes as the form posts; without, the response is a new page.\u003C/p\u003E", "examples": [ "\u003CConfirmButton Title=\u0022Delete this project?\u0022 Message=\u0022This can\u0027t be undone.\u0022\n Accent=\u0022Accent.Danger\u0022 Name=\u0022intent\u0022 Value=\u0022delete\u0022\u003EDelete\u003C/ConfirmButton\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EThe trigger is a native \u003Ccode\u003Ebutton\u003C/code\u003E with \u003Ccode\u003Earia-haspopup=\u0026quot;dialog\u0026quot;\u003C/code\u003E; it opens a modal \u003Ccode\u003Edialog\u003C/code\u003E with \u003Ccode\u003Erole=\u0026quot;alertdialog\u0026quot;\u003C/code\u003E, named by \u003Ccode\u003ETitle\u003C/code\u003E and described by \u003Ccode\u003EMessage\u003C/code\u003E and \u003Ccode\u003EBody\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003ECancel (\u0026quot;Cancel\u0026quot;, \u003Ccode\u003ECancelText\u003C/code\u003E) takes focus when it opens, so Enter doesn\u0026#39;t confirm by accident. DialogService\u0026#39;s confirmation focuses Cancel first too.\u003C/li\u003E\u003Cli\u003EWhile it\u0026#39;s open, focus stays in the dialog; Escape closes it and focus returns to the trigger. A backdrop click doesn\u0026#39;t close it, and there\u0026#39;s no close button.\u003C/li\u003E\u003Cli\u003EWith JavaScript off, the trigger opens the dialog only in browsers that support the native \u003Ccode\u003Ecommand\u003C/code\u003E attribute.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Dialog", "Button", "Form" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Title", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe question, such as \u0026quot;Delete this project?\u0026quot;. Also the dialog\u0026#39;s accessible name.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Message", "type": "string?", "summary": "\u003Cp\u003EA line under the question, such as \u0026quot;This can\u0026#39;t be undone.\u0026quot;\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Body", "type": "RenderFragment?", "summary": "\u003Cp\u003EMore content under the question, such as a list of what will be deleted.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ConfirmText", "type": "string?", "default": "\u0022Confirm\u0022", "summary": "\u003Cp\u003EThe confirm button\u0026#39;s text, such as \u0026quot;Delete\u0026quot;. Defaults to \u0026quot;Confirm\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CancelText", "type": "string?", "default": "\u0022Cancel\u0022", "summary": "\u003Cp\u003EThe cancel button\u0026#39;s text. Defaults to \u0026quot;Cancel\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EPosted as \u003Ccode\u003EName=Value\u003C/code\u003E with the form when confirmed, so one handler can tell which action it was. Not \u003Ccode\u003Eaction\u003C/code\u003E, \u003Ccode\u003Emethod\u003C/code\u003E or \u003Ccode\u003Etarget\u003C/code\u003E: a control with one of those names hides the form\u0026#39;s own property, and Blazor\u0026#39;s enhanced form handling then posts to the wrong address.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value posted with \u003Ca href=\u0022cref:P:IzzyBlazor.ConfirmButton.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Form", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe id of a form elsewhere on the page to submit when confirmed. Defaults to the form the button is in.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FormAction", "type": "string?", "summary": "\u003Cp\u003ESubmits to this URL instead of the form\u0026#39;s own action.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EA link to follow when confirmed, in place of submitting a form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe trigger\u0026#39;s id. The dialog\u0026#39;s is this plus \u003Ccode\u003E-dialog\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent", "default": "Accent.Primary", "summary": "\u003Cp\u003EPrimary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (\u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E, \u003Ccode\u003EAccent.Token(\u0026quot;brand\u0026quot;)\u003C/code\u003E); text on a custom color is chosen for contrast. Emphasis comes from \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Variant\u0022\u003E\u003Ccode\u003EVariant\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Solid", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Solid\u0022\u003E\u003Ccode\u003EButtonVariant.Solid\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "EndIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon after the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches to the full width of its container.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Loading", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows a spinner in place of the start icon and blocks further clicks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "LoadingLabel", "type": "string?", "default": "\u0022Loading\u0022", "summary": "\u003Cp\u003ERead to screen readers while \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Loading\u0022\u003E\u003Ccode\u003ELoading\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Loading\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Pressed", "type": "bool?", "summary": "\u003Cp\u003EMakes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (\u003Ccode\u003Earia-pressed\u003C/code\u003E). With \u003Ccode\u003E@bind-Pressed\u003C/code\u003E a click turns it on and off on interactive pages; on static pages the server decides, as with a submit button\u0026#39;s \u003Ccode\u003EName\u003C/code\u003E and \u003Ccode\u003EValue\u003C/code\u003E. Null (the default) is an ordinary button. Not for links.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.14", "declaredOn": "ButtonBase" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" } ], "events": [ { "name": "OnConfirm", "type": "EventCallback", "summary": "\u003Cp\u003ERuns when confirmed, on an interactive page. On a static page the confirm button submits the form instead.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" } } ], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize" ] }, { "name": "ConfirmDialogContent", "displayName": "ConfirmDialogContent", "fullName": "IzzyBlazor.ConfirmDialogContent", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EDialogService.ConfirmAsync\u0026#39;s content: the message, and Cancel (focused first) and confirm buttons.\u003C/p\u003E", "bases": [], "properties": [ { "name": "Message", "type": "string?", "summary": "\u003Cp\u003EThe question.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Options", "type": "ConfirmOptions", "summary": "\u003Cp\u003EThe buttons\u0026#39; text and color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ConfirmOptions" ] }, { "name": "Container", "displayName": "Container", "fullName": "IzzyBlazor.Container", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ECenters content at a readable width, with side padding that grows on larger screens.\u003C/p\u003E", "examples": [ "\u003CContainer Size=\u0022ContainerSize.Lg\u0022\u003E...\u003C/Container\u003E" ], "seeAlso": [ "Section", "Box", "Center", "AppShell" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Size", "type": "ContainerSize", "default": "ContainerSize.Xl", "summary": "\u003Cp\u003EThe widest it gets. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ContainerSize.Xl\u0022\u003E\u003Ccode\u003EContainerSize.Xl\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "ContainerSize" ] }, { "name": "CopyButton", "displayName": "CopyButton", "fullName": "IzzyBlazor.CopyButton", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA button that copies text: an install command, an ID, a key. It copies \u003Ca href=\u0022cref:P:IzzyBlazor.CopyButton.Text\u0022\u003E\u003Ccode\u003EText\u003C/code\u003E\u003C/a\u003E, or the value or text of the element \u003Ca href=\u0022cref:P:IzzyBlazor.CopyButton.For\u0022\u003E\u003Ccode\u003EFor\u003C/code\u003E\u003C/a\u003E names, and shows a check and \u0026quot;Copied\u0026quot; for a moment, like a \u003Ca href=\u0022cref:T:IzzyBlazor.Code\u0022\u003E\u003Ccode\u003ECode\u003C/code\u003E\u003C/a\u003E block\u0026#39;s copy button.\u003C/p\u003E", "remarks": "\u003Cp\u003ECopying needs JavaScript (and a secure page), so the button shows only where the browser runs script, from the first paint (it copies once IzzyBlazor\u0026#39;s script has loaded); with JavaScript off, the text is still there to select. A ghost neutral icon button by default; with content it shows the text after the icon.\u003C/p\u003E", "examples": [ "\u003CCode\u003Edotnet add package IzzyBlazor\u003C/Code\u003E\n\u003CCopyButton Text=\u0022dotnet add package IzzyBlazor\u0022 Label=\u0022Copy the command\u0022 /\u003E\n\n\u003CTextField id=\u0022api-key\u0022 Label=\u0022API key\u0022 @bind-Value=\u0022key\u0022 ReadOnly\u003E\n \u003CEndAddon\u003E\u003CCopyButton For=\u0022api-key\u0022 Variant=\u0022ButtonVariant.Outline\u0022\u003ECopy\u003C/CopyButton\u003E\u003C/EndAddon\u003E\n\u003C/TextField\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Ebutton\u003C/code\u003E, shown only where the browser runs script; with JavaScript off the text is still there to select.\u003C/li\u003E\u003Cli\u003EWithout content it\u0026#39;s named by \u003Ca href=\u0022cref:P:IzzyBlazor.CopyButton.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E (\u0026quot;Copy\u0026quot;); with content it\u0026#39;s named by the content, and \u003Ca href=\u0022cref:P:IzzyBlazor.CopyButton.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E is only the tooltip.\u003C/li\u003E\u003Cli\u003EAfter copying, the button keeps its name and \u003Ca href=\u0022cref:P:IzzyBlazor.CopyButton.CopiedLabel\u0022\u003E\u003Ccode\u003ECopiedLabel\u003C/code\u003E\u003C/a\u003E (\u0026quot;Copied\u0026quot;) is announced politely.\u003C/li\u003E\u003Cli\u003EIf the page has no clipboard access, the button stays as it was and nothing is announced.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Code", "IconButton", "TextField" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "none", "static": "full", "live": "full", "notes": "Copying needs JavaScript: with it off, the button doesn\u0027t appear." }, "properties": [ { "name": "Text", "type": "string?", "summary": "\u003Cp\u003EThe text to copy.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "For", "type": "string?", "summary": "\u003Cp\u003EThe id of the element to copy from, in place of \u003Ca href=\u0022cref:P:IzzyBlazor.CopyButton.Text\u0022\u003E\u003Ccode\u003EText\u003C/code\u003E\u003C/a\u003E: an input\u0026#39;s or text area\u0026#39;s value, or any other element\u0026#39;s text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Copy\u0022", "summary": "\u003Cp\u003EThe button\u0026#39;s name for screen readers and its tooltip. Defaults to \u0026quot;Copy\u0026quot;. A button with content is named by its content and uses this only as the tooltip.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CopiedLabel", "type": "string?", "default": "\u0022Copied\u0022", "summary": "\u003Cp\u003EAnnounced after copying. Defaults to \u0026quot;Copied\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent", "default": "Accent.Neutral", "summary": "\u003Cp\u003EPrimary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (\u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E, \u003Ccode\u003EAccent.Token(\u0026quot;brand\u0026quot;)\u003C/code\u003E); text on a custom color is chosen for contrast. Emphasis comes from \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Variant\u0022\u003E\u003Ccode\u003EVariant\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Ghost", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Solid\u0022\u003E\u003Ccode\u003EButtonVariant.Solid\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "EndIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon after the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches to the full width of its container.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Loading", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows a spinner in place of the start icon and blocks further clicks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "LoadingLabel", "type": "string?", "default": "\u0022Loading\u0022", "summary": "\u003Cp\u003ERead to screen readers while \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Loading\u0022\u003E\u003Ccode\u003ELoading\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Loading\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Pressed", "type": "bool?", "summary": "\u003Cp\u003EMakes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (\u003Ccode\u003Earia-pressed\u003C/code\u003E). With \u003Ccode\u003E@bind-Pressed\u003C/code\u003E a click turns it on and off on interactive pages; on static pages the server decides, as with a submit button\u0026#39;s \u003Ccode\u003EName\u003C/code\u003E and \u003Ccode\u003EValue\u003C/code\u003E. Null (the default) is an ordinary button. Not for links.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.14", "declaredOn": "ButtonBase" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" } ], "events": [], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize" ] }, { "name": "DescriptionItem", "displayName": "DescriptionItem", "fullName": "IzzyBlazor.DescriptionItem", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EOne term and its detail in a DescriptionList: \u003Ccode\u003E\u0026lt;div\u0026gt;\u003C/code\u003E\u003Ccode\u003E\u0026lt;dt/\u0026gt;\u003C/code\u003E\u003Ccode\u003E\u0026lt;dd/\u0026gt;\u003C/code\u003E\u003Ccode\u003E\u0026lt;/div\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Term", "type": "string?", "summary": "\u003Cp\u003EThe term, such as \u0026quot;Status\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TermContent", "type": "RenderFragment?", "summary": "\u003Cp\u003ECustom term content, such as text with an icon or a tooltip. Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.DescriptionItem.Term\u0022\u003E\u003Ccode\u003ETerm\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe detail.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "DescriptionList", "displayName": "DescriptionList", "fullName": "IzzyBlazor.DescriptionList", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ETerms and their details, such as an order\u0026#39;s fields: a \u003Ccode\u003E\u0026lt;dl\u0026gt;\u003C/code\u003E, each pair wrapped in a \u003Ccode\u003E\u0026lt;div\u0026gt;\u003C/code\u003E. Horizontal puts each term beside its detail from 640px up (the term column fits the longest term), stacking them on phones; Vertical puts the term above, optionally in Columns. No script.\u003C/p\u003E", "examples": [ "\u003CDescriptionList Divided\u003E\n \u003CDescriptionItem Term=\u0022Status\u0022\u003E\u003CBadge Status=\u0022Status.Success\u0022 Dot\u003EPaid\u003C/Badge\u003E\u003C/DescriptionItem\u003E\n \u003CDescriptionItem Term=\u0022Customer\u0022\u003EGrace Hopper\u003C/DescriptionItem\u003E\n\u003C/DescriptionList\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Edl\u003C/code\u003E; each DescriptionItem is a \u003Ccode\u003Edt\u003C/code\u003E and a \u003Ccode\u003Edd\u003C/code\u003E in a \u003Ccode\u003Ediv\u003C/code\u003E, which HTML allows, so the term and its detail stay paired.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EOrientation\u003C/code\u003E and \u003Ccode\u003EColumns\u003C/code\u003E change only the layout: the reading order is always term, then detail, item by item.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ETermContent\u003C/code\u003E goes inside the \u003Ccode\u003Edt\u003C/code\u003E, so keep it to text and inline content: a heading isn\u0026#39;t allowed there.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Table", "Stat", "Card" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe \u003Ca href=\u0022cref:T:IzzyBlazor.DescriptionItem\u0022\u003E\u003Ccode\u003EDescriptionItem\u003C/code\u003E\u003C/a\u003Es.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Orientation", "type": "Orientation", "default": "Orientation.Horizontal", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:F:IzzyBlazor.Orientation.Horizontal\u0022\u003E\u003Ccode\u003EOrientation.Horizontal\u003C/code\u003E\u003C/a\u003E (the default) puts each term beside its detail on screens 640px and wider; \u003Ca href=\u0022cref:F:IzzyBlazor.Orientation.Vertical\u0022\u003E\u003Ccode\u003EOrientation.Vertical\u003C/code\u003E\u003C/a\u003E puts the term above.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Divided", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELines between the items.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Columns", "type": "int", "default": "1", "summary": "\u003Cp\u003EFor a vertical list, how many columns the items flow into on screens 640px and wider (1 to 4; defaults to 1). Phones always get one.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EText size and spacing. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ControlSize", "Orientation" ] }, { "name": "Dialog", "displayName": "Dialog", "fullName": "IzzyBlazor.Dialog", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA modal built on the native \u003Ccode\u003E\u0026lt;dialog\u0026gt;\u003C/code\u003E: the browser traps focus, makes the page behind it inert, closes it on Escape and returns focus afterwards.\u003C/p\u003E", "remarks": "\u003Cp\u003EThe Delete button submits a form elsewhere on the page, the one with id \u0026quot;delete-form\u0026quot;, which does the deleting; a form inside the dialog works too.\u003C/p\u003E\u003Cp\u003EParts written among the content: DialogHeader (heading content in place of Title, drawn in the header row) and DialogFooter (the button row, written last, where it is: last in the dialog or last in a form that\u0026#39;s last in it, so a form\u0026#39;s submit button can be in the footer).\u003C/p\u003E\u003Cp\u003EWays to open it:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003EDialogTrigger: a button with commandfor=\u0026quot;id\u0026quot; command=\u0026quot;show-modal\u0026quot; (native, with a script fallback for older browsers).\u003C/li\u003E\u003Cli\u003EA link that adds ?dialog=id to the URL: the server renders it already open. Works with JavaScript off.\u003C/li\u003E\u003Cli\u003EOpen=\u0026quot;true\u0026quot; or @bind-Open, for confirmations the server or C# decides to show.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003EPut forms inside the Dialog rather than the Dialog inside a form. When it has to be inside one (a confirmation for that form\u0026#39;s own submit button, say), set InsideForm: forms can\u0026#39;t nest, so it then closes with the native close command instead of its own form.\u003C/p\u003E", "examples": [ "\u003CDialogTrigger For=\u0022confirm-delete\u0022 Accent=\u0022Accent.Danger\u0022\u003EDelete\u003C/DialogTrigger\u003E\n\n\u003CDialog Id=\u0022confirm-delete\u0022 Title=\u0022Delete this project?\u0022 Size=\u0022DialogSize.Sm\u0022\u003E\n This can\u0027t be undone.\n \u003CDialogFooter\u003E\n \u003CDialogClose\u003ECancel\u003C/DialogClose\u003E\n \u003CButton Submit Form=\u0022delete-form\u0022 Accent=\u0022Accent.Danger\u0022\u003EDelete\u003C/Button\u003E\n \u003C/DialogFooter\u003E\n\u003C/Dialog\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003E\u003Ccode\u003ETitle\u003C/code\u003E (an \u003Ccode\u003Eh2\u003C/code\u003E) or a DialogHeader (a level-2 heading) names the dialog with \u003Ccode\u003Earia-labelledby\u003C/code\u003E. Without either it has no name: pass an \u003Ccode\u003Earia-label\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EThe close button is named \u0026quot;Close\u0026quot; (\u003Ccode\u003ECloseLabel\u003C/code\u003E). Escape closes the dialog even when \u003Ccode\u003EShowCloseButton\u003C/code\u003E and \u003Ccode\u003ECloseOnBackdrop\u003C/code\u003E are off.\u003C/li\u003E\u003Cli\u003EDialogTrigger is a native \u003Ccode\u003Ebutton\u003C/code\u003E with \u003Ccode\u003Earia-haspopup=\u0026quot;dialog\u0026quot;\u003C/code\u003E, and focus comes back to it when the dialog closes.\u003C/li\u003E\u003Cli\u003EPut \u003Ccode\u003Eautofocus\u003C/code\u003E on the field to start in. After an enhanced post that comes back with errors, the dialog reopens with focus on the first invalid field.\u003C/li\u003E\u003Cli\u003EWith JavaScript off, a dialog opened from the server (\u003Ccode\u003E?dialog=id\u003C/code\u003E, \u003Ccode\u003EOpen\u003C/code\u003E) isn\u0026#39;t modal: focus can leave it for the page behind. In browsers with the \u003Ccode\u003Eclosedby\u003C/code\u003E attribute (Chrome and Edge 134, Firefox 141; not Safari), Escape closes it, and so does a click outside while \u003Ccode\u003ECloseOnBackdrop\u003C/code\u003E is on. DialogTrigger needs no script in current browsers.\u003C/li\u003E\u003Cli\u003EDialogService\u0026#39;s dialogs (shown by DialogHost) are named by the title passed to \u003Ccode\u003EOpenAsync\u003C/code\u003E, or by \u003Ccode\u003EDialogOptions.Label\u003C/code\u003E without one; \u003Ccode\u003EConfirmAsync\u003C/code\u003E without a title is named by its message.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Drawer", "ConfirmButton", "Popover", "Alert" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, a dialog opened from the server isn\u0027t modal: focus can leave it, and Escape or a click outside closes it only in browsers with closedby (not Safari)." }, "properties": [ { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EThe heading, which also names the dialog for screen readers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CloseLabel", "type": "string?", "default": "\u0022Close\u0022", "summary": "\u003Cp\u003EThe close button\u0026#39;s name. Defaults to \u0026quot;Close\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe body, plus any \u003Ca href=\u0022cref:T:IzzyBlazor.DialogHeader\u0022\u003E\u003Ccode\u003EDialogHeader\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.DialogFooter\u0022\u003E\u003Ccode\u003EDialogFooter\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContentPadding", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EPadding inside the body, in spacing steps, in place of the dialog\u0026#39;s. \u003Ccode\u003E0\u003C/code\u003E lets content such as a table or image run edge to edge.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Size", "type": "DialogSize", "default": "DialogSize.Md", "summary": "\u003Cp\u003EThe width. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.DialogSize.Md\u0022\u003E\u003Ccode\u003EDialogSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placement", "type": "DialogPlacement", "default": "DialogPlacement.Center", "summary": "\u003Cp\u003ECenter (the default), a full-height drawer on the start or end side, or a full-width sheet along the top or bottom. A \u003Ca href=\u0022cref:T:IzzyBlazor.Drawer\u0022\u003E\u003Ccode\u003EDrawer\u003C/code\u003E\u003C/a\u003E defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.DialogPlacement.End\u0022\u003E\u003Ccode\u003EDialogPlacement.End\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CloseOnBackdrop", "type": "bool", "default": "true", "summary": "\u003Cp\u003ECloses when the backdrop is clicked. Defaults to true. Escape always closes it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ShowCloseButton", "type": "bool", "default": "true", "summary": "\u003Cp\u003EShows the close button in the header. Defaults to true.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "InsideForm", "type": "bool", "default": "false", "summary": "\u003Cp\u003ESet when the dialog is inside a \u003Ccode\u003E\u0026lt;form\u0026gt;\u003C/code\u003E. Forms can\u0026#39;t nest, so the dialog then closes with the native \u003Ccode\u003Eclose\u003C/code\u003E command (with a script fallback in older browsers) instead of its own \u003Ccode\u003Emethod=\u0026quot;dialog\u0026quot;\u003C/code\u003E form, and its buttons don\u0026#39;t submit the outer form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "QueryKey", "type": "string?", "default": "\u0022dialog\u0022", "summary": "\u003Cp\u003EThe query-string key that opens a dialog from a link: \u003Ccode\u003E?dialog=my-id\u003C/code\u003E renders the dialog with that id already open. Defaults to \u003Ccode\u003Edialog\u003C/code\u003E; null turns it off.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Open", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it is open. Use \u003Ccode\u003E@bind-Open\u003C/code\u003E to follow changes on interactive pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" } ], "events": [], "methods": [], "types": [ "DialogPlacement", "DialogSize" ] }, { "name": "DialogBody", "displayName": "DialogBody", "fullName": "IzzyBlazor.DialogBody", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA \u003Ca href=\u0022cref:T:IzzyBlazor.Dialog\u0022\u003E\u003Ccode\u003EDialog\u003C/code\u003E\u003C/a\u003E\u0026#39;s body with layout props: a column with \u003Ccode\u003EGap\u003C/code\u003E, \u003Ccode\u003EAlign\u003C/code\u003E, \u003Ccode\u003EJustify\u003C/code\u003E and \u003Ccode\u003EDirection\u003C/code\u003E, like \u003Ca href=\u0022cref:T:IzzyBlazor.Stack\u0022\u003E\u003Ccode\u003EStack\u003C/code\u003E\u003C/a\u003E. Optional: content written straight in the dialog is its body too. It fills the dialog\u0026#39;s height, so a \u003Ca href=\u0022cref:T:IzzyBlazor.DialogFooter\u0022\u003E\u003Ccode\u003EDialogFooter\u003C/code\u003E\u003C/a\u003E after it sits at the bottom of a side drawer whatever the content\u0026#39;s length; put it and the footer in a form to keep the footer\u0026#39;s buttons in the form. With a DialogBody, put all the body\u0026#39;s content in it: text written beside it is laid out as separate rows. \u003Ca href=\u0022cref:P:IzzyBlazor.DialogBody.Flush\u0022\u003E\u003Ccode\u003EFlush\u003C/code\u003E\u003C/a\u003E runs it to the dialog\u0026#39;s edges, for a table or a list.\u003C/p\u003E", "examples": [ "\u003CDrawer Id=\u0022details\u0022 Title=\u0022Project details\u0022\u003E\n \u003CDialogBody Gap=\u00224\u0022\u003E...\u003C/DialogBody\u003E\n \u003CDialogFooter\u003E\u003CDialogClose\u003EClose\u003C/DialogClose\u003E\u003C/DialogFooter\u003E\n\u003C/Drawer\u003E" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Direction", "type": "Responsive\u003CDirection\u003E", "default": "computed", "summary": "\u003Cp\u003ELayout direction. Defaults to a column.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Flush", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERuns the content to the dialog\u0026#39;s sides, without its side padding: for a table, a divided list or an image.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between children, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003ECross-axis alignment. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EMain-axis distribution. Defaults to start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether children wrap onto new lines: \u003Ccode\u003E\u0026lt;Row Wrap\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E so the container sits in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Direction", "Justify" ] }, { "name": "DialogClose", "displayName": "DialogClose", "fullName": "IzzyBlazor.DialogClose", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA \u003Ca href=\u0022cref:T:IzzyBlazor.Button\u0022\u003E\u003Ccode\u003EButton\u003C/code\u003E\u003C/a\u003E that closes the \u003Ca href=\u0022cref:P:IzzyBlazor.DialogClose.Dialog\u0022\u003E\u003Ccode\u003EDialog\u003C/code\u003E\u003C/a\u003E it is in. It submits the dialog\u0026#39;s \u003Ccode\u003Emethod=\u0026quot;dialog\u0026quot;\u003C/code\u003E form, which closes it natively in every browser, script or not. In a dialog inside another form, it uses the native \u003Ccode\u003Eclose\u003C/code\u003E command instead. Defaults to a neutral outline button, for \u0026quot;Cancel\u0026quot;.\u003C/p\u003E", "examples": [ "\u003CDialogFooter\u003E\n \u003CDialogClose\u003ECancel\u003C/DialogClose\u003E\n \u003CButton Submit Form=\u0022invite-form\u0022\u003ESend invite\u003C/Button\u003E\n\u003C/DialogFooter\u003E" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "For", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe id of the dialog to close. Defaults to the dialog this button is in.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EMakes it a link to this URL (an \u003Ccode\u003Ea\u003C/code\u003E) instead of a button. A link can\u0026#39;t take \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Reset\u0022\u003E\u003Ccode\u003EReset\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Value\u0022\u003E\u003Ccode\u003EValue\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.FormAction\u0022\u003E\u003Ccode\u003EFormAction\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "External", "type": "bool", "default": "false", "summary": "\u003Cp\u003EFor a link: opens in a new tab with \u003Ccode\u003Erel=\u0026quot;noopener noreferrer\u0026quot;\u003C/code\u003E and shows an external-link icon.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "HideExternalIcon", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELeaves out an external link\u0026#39;s icon, for repeated links where it would be noise. Screen readers still hear \u003Ca href=\u0022cref:P:IzzyBlazor.Button.NewTabLabel\u0022\u003E\u003Ccode\u003ENewTabLabel\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "NewTabLabel", "type": "string?", "default": "\u0022(opens in a new tab)\u0022", "summary": "\u003Cp\u003ERead to screen readers after an external link\u0026#39;s text. Defaults to \u0026quot;(opens in a new tab)\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Submit", "type": "bool", "default": "true", "summary": "\u003Cp\u003ESubmits the form it\u0026#39;s in (or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E), like \u003Ccode\u003Etype=\u0026quot;submit\u0026quot;\u003C/code\u003E. Without \u003Ccode\u003ESubmit\u003C/code\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Reset\u0022\u003E\u003Ccode\u003EReset\u003C/code\u003E\u003C/a\u003E, a button does nothing by itself.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Reset", "type": "bool", "default": "false", "summary": "\u003Cp\u003EResets the form it\u0026#39;s in, like \u003Ccode\u003Etype=\u0026quot;reset\u0026quot;\u003C/code\u003E. Can\u0026#39;t be combined with \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EPosted with the form as \u003Ccode\u003EName=Value\u003C/code\u003E when this button submits it, so one handler can tell which of several submit buttons was pressed. Not \u003Ccode\u003Eaction\u003C/code\u003E, \u003Ccode\u003Emethod\u003C/code\u003E or \u003Ccode\u003Etarget\u003C/code\u003E: a control with one of those names hides the form\u0026#39;s own property, and Blazor\u0026#39;s enhanced form handling then posts to the wrong address.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value posted with \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "FormAction", "type": "string?", "summary": "\u003Cp\u003ESubmits to this URL instead of the form\u0026#39;s own action (native \u003Ccode\u003Eformaction\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Form", "type": "string?", "summary": "\u003Cp\u003EThe id of a form elsewhere on the page that this button submits (native \u003Ccode\u003Eform\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Accent", "type": "Accent", "default": "Accent.Neutral", "summary": "\u003Cp\u003EPrimary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (\u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E, \u003Ccode\u003EAccent.Token(\u0026quot;brand\u0026quot;)\u003C/code\u003E); text on a custom color is chosen for contrast. Emphasis comes from \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Variant\u0022\u003E\u003Ccode\u003EVariant\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Outline", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Solid\u0022\u003E\u003Ccode\u003EButtonVariant.Solid\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "EndIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon after the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches to the full width of its container.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Loading", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows a spinner in place of the start icon and blocks further clicks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "LoadingLabel", "type": "string?", "default": "\u0022Loading\u0022", "summary": "\u003Cp\u003ERead to screen readers while \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Loading\u0022\u003E\u003Ccode\u003ELoading\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Loading\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Pressed", "type": "bool?", "summary": "\u003Cp\u003EMakes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (\u003Ccode\u003Earia-pressed\u003C/code\u003E). With \u003Ccode\u003E@bind-Pressed\u003C/code\u003E a click turns it on and off on interactive pages; on static pages the server decides, as with a submit button\u0026#39;s \u003Ccode\u003EName\u003C/code\u003E and \u003Ccode\u003EValue\u003C/code\u003E. Null (the default) is an ordinary button. Not for links.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.14", "declaredOn": "ButtonBase" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" } ], "events": [ { "name": "OnClick", "type": "EventCallback\u003CMouseEventArgs\u003E", "summary": "\u003Cp\u003ERuns on click on interactive pages (a link still navigates). Has no effect on static pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" }, "declaredOn": "Button" } ], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize" ] }, { "name": "DialogFooter", "displayName": "DialogFooter", "fullName": "IzzyBlazor.DialogFooter", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe row of buttons at the bottom of a \u003Ca href=\u0022cref:T:IzzyBlazor.Dialog\u0022\u003E\u003Ccode\u003EDialog\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:T:IzzyBlazor.Drawer\u0022\u003E\u003Ccode\u003EDrawer\u003C/code\u003E\u003C/a\u003E, usually a \u003Ca href=\u0022cref:T:IzzyBlazor.DialogClose\u0022\u003E\u003Ccode\u003EDialogClose\u003C/code\u003E\u003C/a\u003E and the main action. Write it last: last in the dialog, or last in a form that\u0026#39;s last in the dialog, so its buttons stay inside the form and submit it. It reaches the dialog\u0026#39;s edges (and follows \u003Ccode\u003EContentPadding\u003C/code\u003E) and stays in view when the body scrolls. In a side drawer it follows the content, so with little content it sits partway down. A row like \u003Ca href=\u0022cref:T:IzzyBlazor.Row\u0022\u003E\u003Ccode\u003ERow\u003C/code\u003E\u003C/a\u003E, with \u003Ccode\u003EGap\u003C/code\u003E, \u003Ccode\u003EAlign\u003C/code\u003E and \u003Ccode\u003EJustify\u003C/code\u003E (the buttons go at the end by default). Also for content shown by \u003Ca href=\u0022cref:T:IzzyBlazor.DialogService\u0022\u003E\u003Ccode\u003EDialogService\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "examples": [ "\u003CDialog Id=\u0022rename\u0022 Title=\u0022Rename\u0022\u003E\n \u003CForm Model=\u0022model\u0022 OnValidSubmit=\u0022Save\u0022\u003E\n \u003CTextField @bind-Value=\u0022model.Name\u0022 Label=\u0022Name\u0022 /\u003E\n \u003CDialogFooter\u003E\n \u003CDialogClose\u003ECancel\u003C/DialogClose\u003E\n \u003CButton Submit\u003ESave\u003C/Button\u003E\n \u003C/DialogFooter\u003E\n \u003C/Form\u003E\n\u003C/Dialog\u003E" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between children, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003ECross-axis alignment. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EMain-axis distribution. Defaults to start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether children wrap onto new lines: \u003Ccode\u003E\u0026lt;Row Wrap\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E so the container sits in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Justify" ] }, { "name": "DialogHeader", "displayName": "DialogHeader", "fullName": "IzzyBlazor.DialogHeader", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EHeading content for a \u003Ca href=\u0022cref:T:IzzyBlazor.Dialog\u0022\u003E\u003Ccode\u003EDialog\u003C/code\u003E\u003C/a\u003E in place of its \u003Ccode\u003ETitle\u003C/code\u003E, such as a title with an icon or a badge. It names the dialog for screen readers. Write it directly in the dialog; the dialog draws it in its header row, beside the close button, so a form or cascading value it\u0026#39;s written inside doesn\u0026#39;t reach it.\u003C/p\u003E", "examples": [ "\u003CDialogHeader\u003E\u003CRow Gap=\u00222\u0022\u003E\u003CIcon Name=\u0022Lucide.Users\u0022 /\u003EInvite people\u003C/Row\u003E\u003C/DialogHeader\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "DialogHost", "displayName": "DialogHost", "fullName": "IzzyBlazor.DialogHost", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EWhere DialogService shows its dialogs. Put one on an interactive page or in an interactive layout, with @rendermode on the host where the layout is static:\u003C/p\u003E", "remarks": "\u003Cp\u003EEach dialog is a Dialog, so focus is trapped, Escape and the backdrop cancel it, and focus returns to where it was.\u003C/p\u003E", "examples": [ "\u003CDialogHost /\u003E" ], "bases": [], "modes": { "off": "none", "static": "none", "live": "full", "notes": "A static page can\u0027t show dialogs from code: put the host on an interactive page." }, "properties": [], "events": [], "methods": [], "types": [] }, { "name": "DialogTrigger", "displayName": "DialogTrigger", "fullName": "IzzyBlazor.DialogTrigger", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA \u003Ca href=\u0022cref:T:IzzyBlazor.Button\u0022\u003E\u003Ccode\u003EButton\u003C/code\u003E\u003C/a\u003E that opens a \u003Ca href=\u0022cref:T:IzzyBlazor.Dialog\u0022\u003E\u003Ccode\u003EDialog\u003C/code\u003E\u003C/a\u003E by id. It uses the native \u003Ccode\u003Ecommandfor\u003C/code\u003E and \u003Ccode\u003Ecommand=\u0026quot;show-modal\u0026quot;\u003C/code\u003E attributes, so it needs no C# and, in current browsers, no script; IzzyBlazor\u0026#39;s script fills in for older ones.\u003C/p\u003E", "examples": [ "\u003CDialogTrigger For=\u0022invite\u0022\u003EInvite people\u003C/DialogTrigger\u003E" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "For", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe id of the dialog to open.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EMakes it a link to this URL (an \u003Ccode\u003Ea\u003C/code\u003E) instead of a button. A link can\u0026#39;t take \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Reset\u0022\u003E\u003Ccode\u003EReset\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Value\u0022\u003E\u003Ccode\u003EValue\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.FormAction\u0022\u003E\u003Ccode\u003EFormAction\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "External", "type": "bool", "default": "false", "summary": "\u003Cp\u003EFor a link: opens in a new tab with \u003Ccode\u003Erel=\u0026quot;noopener noreferrer\u0026quot;\u003C/code\u003E and shows an external-link icon.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "HideExternalIcon", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELeaves out an external link\u0026#39;s icon, for repeated links where it would be noise. Screen readers still hear \u003Ca href=\u0022cref:P:IzzyBlazor.Button.NewTabLabel\u0022\u003E\u003Ccode\u003ENewTabLabel\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "NewTabLabel", "type": "string?", "default": "\u0022(opens in a new tab)\u0022", "summary": "\u003Cp\u003ERead to screen readers after an external link\u0026#39;s text. Defaults to \u0026quot;(opens in a new tab)\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Submit", "type": "bool", "default": "false", "summary": "\u003Cp\u003ESubmits the form it\u0026#39;s in (or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E), like \u003Ccode\u003Etype=\u0026quot;submit\u0026quot;\u003C/code\u003E. Without \u003Ccode\u003ESubmit\u003C/code\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Reset\u0022\u003E\u003Ccode\u003EReset\u003C/code\u003E\u003C/a\u003E, a button does nothing by itself.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Reset", "type": "bool", "default": "false", "summary": "\u003Cp\u003EResets the form it\u0026#39;s in, like \u003Ccode\u003Etype=\u0026quot;reset\u0026quot;\u003C/code\u003E. Can\u0026#39;t be combined with \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EPosted with the form as \u003Ccode\u003EName=Value\u003C/code\u003E when this button submits it, so one handler can tell which of several submit buttons was pressed. Not \u003Ccode\u003Eaction\u003C/code\u003E, \u003Ccode\u003Emethod\u003C/code\u003E or \u003Ccode\u003Etarget\u003C/code\u003E: a control with one of those names hides the form\u0026#39;s own property, and Blazor\u0026#39;s enhanced form handling then posts to the wrong address.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value posted with \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "FormAction", "type": "string?", "summary": "\u003Cp\u003ESubmits to this URL instead of the form\u0026#39;s own action (native \u003Ccode\u003Eformaction\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Form", "type": "string?", "summary": "\u003Cp\u003EThe id of a form elsewhere on the page that this button submits (native \u003Ccode\u003Eform\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Button" }, { "name": "Accent", "type": "Accent", "default": "Accent.Primary", "summary": "\u003Cp\u003EPrimary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (\u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E, \u003Ccode\u003EAccent.Token(\u0026quot;brand\u0026quot;)\u003C/code\u003E); text on a custom color is chosen for contrast. Emphasis comes from \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Variant\u0022\u003E\u003Ccode\u003EVariant\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Solid", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Solid\u0022\u003E\u003Ccode\u003EButtonVariant.Solid\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "EndIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon after the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches to the full width of its container.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Loading", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows a spinner in place of the start icon and blocks further clicks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "LoadingLabel", "type": "string?", "default": "\u0022Loading\u0022", "summary": "\u003Cp\u003ERead to screen readers while \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Loading\u0022\u003E\u003Ccode\u003ELoading\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Loading\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Pressed", "type": "bool?", "summary": "\u003Cp\u003EMakes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (\u003Ccode\u003Earia-pressed\u003C/code\u003E). With \u003Ccode\u003E@bind-Pressed\u003C/code\u003E a click turns it on and off on interactive pages; on static pages the server decides, as with a submit button\u0026#39;s \u003Ccode\u003EName\u003C/code\u003E and \u003Ccode\u003EValue\u003C/code\u003E. Null (the default) is an ordinary button. Not for links.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.14", "declaredOn": "ButtonBase" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" } ], "events": [ { "name": "OnClick", "type": "EventCallback\u003CMouseEventArgs\u003E", "summary": "\u003Cp\u003ERuns on click on interactive pages (a link still navigates). Has no effect on static pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" }, "declaredOn": "Button" } ], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize" ] }, { "name": "Divider", "displayName": "Divider", "fullName": "IzzyBlazor.Divider", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA line between pieces of content: an \u003Ccode\u003Ehr\u003C/code\u003E, a vertical separator in a \u003Ca href=\u0022cref:T:IzzyBlazor.Row\u0022\u003E\u003Ccode\u003ERow\u003C/code\u003E\u003C/a\u003E, or a line with a label in the middle (\u0026quot;or\u0026quot;).\u003C/p\u003E", "examples": [ "\u003CDivider /\u003E\n\u003CDivider Label=\u0022or\u0022 /\u003E\n\u003CRow\u003E...\u003CDivider Orientation=\u0022Orientation.Vertical\u0022 /\u003E...\u003C/Row\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EA plain horizontal divider is an \u003Ccode\u003Ehr\u003C/code\u003E; a vertical one is a \u003Ccode\u003Ediv\u003C/code\u003E with \u003Ccode\u003Erole=\u0026quot;separator\u0026quot;\u003C/code\u003E and \u003Ccode\u003Earia-orientation=\u0026quot;vertical\u0026quot;\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EA divider with a \u003Ca href=\u0022cref:P:IzzyBlazor.Divider.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E is read as its text (\u0026quot;or\u0026quot;), with no separator role, since a separator\u0026#39;s content isn\u0026#39;t read.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Stack", "Row", "Spacer" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Orientation", "type": "Orientation", "default": "Orientation.Horizontal", "summary": "\u003Cp\u003EHorizontal (the default) or vertical, for use in a row.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EText in the middle of a horizontal line, such as \u0026quot;or\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dashed", "type": "bool", "default": "false", "summary": "\u003Cp\u003EA dashed line.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Orientation" ] }, { "name": "Drawer", "displayName": "Drawer", "fullName": "IzzyBlazor.Drawer", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA panel that slides in from an edge: a \u003Ca href=\u0022cref:T:IzzyBlazor.Dialog\u0022\u003E\u003Ccode\u003EDialog\u003C/code\u003E\u003C/a\u003E with \u003Ca href=\u0022cref:P:IzzyBlazor.Dialog.Placement\u0022\u003E\u003Ccode\u003EPlacement\u003C/code\u003E\u003C/a\u003E \u003Ca href=\u0022cref:F:IzzyBlazor.DialogPlacement.End\u0022\u003E\u003Ccode\u003EDialogPlacement.End\u003C/code\u003E\u003C/a\u003E by default. Everything else is the dialog\u0026#39;s: open it with a \u003Ca href=\u0022cref:T:IzzyBlazor.DialogTrigger\u0022\u003E\u003Ccode\u003EDialogTrigger\u003C/code\u003E\u003C/a\u003E, a \u003Ccode\u003E?dialog=id\u003C/code\u003E link or \u003Ccode\u003E@bind-Open\u003C/code\u003E; it traps focus and closes on Escape. \u003Ca href=\u0022cref:P:IzzyBlazor.Dialog.Size\u0022\u003E\u003Ccode\u003ESize\u003C/code\u003E\u003C/a\u003E sets its width (Sm 20rem, Md 24rem, Lg 32rem, Xl 40rem, Full). Use \u003Ca href=\u0022cref:F:IzzyBlazor.DialogPlacement.Bottom\u0022\u003E\u003Ccode\u003EDialogPlacement.Bottom\u003C/code\u003E\u003C/a\u003E for a sheet on phones.\u003C/p\u003E", "examples": [ "\u003CDialogTrigger For=\u0022filters\u0022\u003EFilters\u003C/DialogTrigger\u003E\n\u003CDrawer Id=\u0022filters\u0022 Title=\u0022Filters\u0022\u003E...\u003C/Drawer\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt\u0026#39;s a native modal \u003Ccode\u003Edialog\u003C/code\u003E: the page behind it is inert, Escape closes it, and focus returns to the \u003Ca href=\u0022cref:T:IzzyBlazor.DialogTrigger\u0022\u003E\u003Ccode\u003EDialogTrigger\u003C/code\u003E\u003C/a\u003E that opened it.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Dialog.Title\u0022\u003E\u003Ccode\u003ETitle\u003C/code\u003E\u003C/a\u003E or a \u003Ca href=\u0022cref:T:IzzyBlazor.DialogHeader\u0022\u003E\u003Ccode\u003EDialogHeader\u003C/code\u003E\u003C/a\u003E names it; without either, pass an \u003Ccode\u003Earia-label\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EThe close button is named \u0026quot;Close\u0026quot; (\u003Ca href=\u0022cref:P:IzzyBlazor.Dialog.CloseLabel\u0022\u003E\u003Ccode\u003ECloseLabel\u003C/code\u003E\u003C/a\u003E).\u003C/li\u003E\u003Cli\u003EWith JavaScript off, a drawer opened from the server isn\u0026#39;t modal: focus can leave it for the page behind. In browsers with the \u003Ccode\u003Eclosedby\u003C/code\u003E attribute (Chrome and Edge 134, Firefox 141; not Safari), Escape closes it, and so does a click outside while \u003Ca href=\u0022cref:P:IzzyBlazor.Dialog.CloseOnBackdrop\u0022\u003E\u003Ccode\u003ECloseOnBackdrop\u003C/code\u003E\u003C/a\u003E is on.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Dialog", "AppSidebar", "Popover" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, a drawer opened from the server isn\u0027t modal: focus can leave it, and Escape or a click outside closes it only in browsers with closedby (not Safari)." }, "properties": [ { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EThe heading, which also names the dialog for screen readers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Dialog" }, { "name": "CloseLabel", "type": "string?", "default": "\u0022Close\u0022", "summary": "\u003Cp\u003EThe close button\u0026#39;s name. Defaults to \u0026quot;Close\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Dialog" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe body, plus any \u003Ca href=\u0022cref:T:IzzyBlazor.DialogHeader\u0022\u003E\u003Ccode\u003EDialogHeader\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.DialogFooter\u0022\u003E\u003Ccode\u003EDialogFooter\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Dialog" }, { "name": "ContentPadding", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EPadding inside the body, in spacing steps, in place of the dialog\u0026#39;s. \u003Ccode\u003E0\u003C/code\u003E lets content such as a table or image run edge to edge.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "Dialog" }, { "name": "Size", "type": "DialogSize", "default": "DialogSize.Md", "summary": "\u003Cp\u003EThe width. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.DialogSize.Md\u0022\u003E\u003Ccode\u003EDialogSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Dialog" }, { "name": "Placement", "type": "DialogPlacement", "default": "DialogPlacement.End", "summary": "\u003Cp\u003ECenter (the default), a full-height drawer on the start or end side, or a full-width sheet along the top or bottom. A \u003Ca href=\u0022cref:T:IzzyBlazor.Drawer\u0022\u003E\u003Ccode\u003EDrawer\u003C/code\u003E\u003C/a\u003E defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.DialogPlacement.End\u0022\u003E\u003Ccode\u003EDialogPlacement.End\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Dialog" }, { "name": "CloseOnBackdrop", "type": "bool", "default": "true", "summary": "\u003Cp\u003ECloses when the backdrop is clicked. Defaults to true. Escape always closes it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Dialog" }, { "name": "ShowCloseButton", "type": "bool", "default": "true", "summary": "\u003Cp\u003EShows the close button in the header. Defaults to true.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Dialog" }, { "name": "InsideForm", "type": "bool", "default": "false", "summary": "\u003Cp\u003ESet when the dialog is inside a \u003Ccode\u003E\u0026lt;form\u0026gt;\u003C/code\u003E. Forms can\u0026#39;t nest, so the dialog then closes with the native \u003Ccode\u003Eclose\u003C/code\u003E command (with a script fallback in older browsers) instead of its own \u003Ccode\u003Emethod=\u0026quot;dialog\u0026quot;\u003C/code\u003E form, and its buttons don\u0026#39;t submit the outer form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Dialog" }, { "name": "QueryKey", "type": "string?", "default": "\u0022dialog\u0022", "summary": "\u003Cp\u003EThe query-string key that opens a dialog from a link: \u003Ccode\u003E?dialog=my-id\u003C/code\u003E renders the dialog with that id already open. Defaults to \u003Ccode\u003Edialog\u003C/code\u003E; null turns it off.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Dialog" }, { "name": "Open", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it is open. Use \u003Ccode\u003E@bind-Open\u003C/code\u003E to follow changes on interactive pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" } ], "events": [], "methods": [], "types": [ "DialogPlacement", "DialogSize" ] }, { "name": "EmptyState", "displayName": "EmptyState", "fullName": "IzzyBlazor.EmptyState", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EWhat to show when there\u0026#39;s nothing yet: no results, an empty inbox, a first-run screen. An icon, a title, a line of explanation and the action that fills it. Centered; no script.\u003C/p\u003E", "examples": [ "\u003CEmptyState Icon=\u0022Lucide.Inbox\u0022 Title=\u0022No invoices yet\u0022 Description=\u0022Invoices you send appear here.\u0022\u003E\n \u003CEmptyStateActions\u003E\u003CButton Href=\u0022/invoices/new\u0022\u003ENew invoice\u003C/Button\u003E\u003C/EmptyStateActions\u003E\n\u003C/EmptyState\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003E\u003Ccode\u003ETitle\u003C/code\u003E is a heading, an \u003Ccode\u003Eh3\u003C/code\u003E by default; set \u003Ccode\u003ETitleLevel\u003C/code\u003E to fit the page\u0026#39;s outline.\u003C/li\u003E\u003Cli\u003EThe icon is hidden from screen readers.\u003C/li\u003E\u003Cli\u003EIt isn\u0026#39;t a live region: when a search empties a list, screen readers aren\u0026#39;t told, so announce the result yourself if it matters.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Alert", "Skeleton", "Table" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon above the title, in a tinted circle.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EThe heading, such as \u0026quot;No results\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TitleLevel", "type": "int", "default": "3", "summary": "\u003Cp\u003EThe heading level of \u003Ca href=\u0022cref:P:IzzyBlazor.EmptyState.Title\u0022\u003E\u003Ccode\u003ETitle\u003C/code\u003E\u003C/a\u003E, 1 to 6. Defaults to 3.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Description", "type": "string?", "summary": "\u003Cp\u003EA muted line under the title saying why it\u0026#39;s empty or what to do.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EAnything else, below the description, such as a list of suggestions, and any \u003Ca href=\u0022cref:T:IzzyBlazor.EmptyStateActions\u0022\u003E\u003Ccode\u003EEmptyStateActions\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bordered", "type": "bool", "default": "false", "summary": "\u003Cp\u003EA dashed border around it, for an empty area inside a page. \u003Ccode\u003EBorderStyle\u003C/code\u003E changes the line and \u003Ccode\u003EBorderColor\u003C/code\u003E its color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EIcon, text size and spacing. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ControlSize" ] }, { "name": "EmptyStateActions", "displayName": "EmptyStateActions", "fullName": "IzzyBlazor.EmptyStateActions", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe buttons or links that fill an \u003Ca href=\u0022cref:T:IzzyBlazor.EmptyState\u0022\u003E\u003Ccode\u003EEmptyState\u003C/code\u003E\u003C/a\u003E, such as \u0026quot;New invoice\u0026quot; or \u0026quot;Clear filters\u0026quot;. Write it directly in the empty state; it\u0026#39;s drawn last.\u003C/p\u003E", "examples": [ "\u003CEmptyStateActions\u003E\u003CButton Href=\u0022/invoices/new\u0022\u003ENew invoice\u003C/Button\u003E\u003C/EmptyStateActions\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "FieldAddons", "displayName": "FieldAddons", "fullName": "IzzyBlazor.FieldAddons", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EAttaches add-ons to the start or end of a field\u0026#39;s control: text such as \u0026quot;https://\u0026quot; or \u0026quot;kg\u0026quot;, a button, or another field such as a currency Select. Text fields have StartAddon and EndAddon; custom fields can wrap their own control in this to match.\u003C/p\u003E", "examples": [ "\u003CFieldAddons StartAddon=\u0022@(@\u003Ctext\u003Ehttps://\u003C/text\u003E)\u0022\u003E\n \u003Cib-field-control class=\u0022ib-field-control\u0022\u003E...\u003C/ib-field-control\u003E\n\u003C/FieldAddons\u003E" ], "bases": [], "properties": [ { "name": "StartAddon", "type": "RenderFragment?", "summary": "\u003Cp\u003EContent attached before the control.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EndAddon", "type": "RenderFragment?", "summary": "\u003Cp\u003EContent attached after the control.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe control, usually an \u003Ccode\u003Eib-field-control\u003C/code\u003E element.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "FieldError", "displayName": "FieldError\u003CTValue\u003E", "fullName": "IzzyBlazor.FieldError\u00601", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EValidation messages for one model property, for fields that are not IzzyBlazor fields. IzzyBlazor fields show their own errors.\u003C/p\u003E", "examples": [ "\u003Cinput id=\u0022email\u0022 @bind=\u0022Model.Email\u0022 aria-describedby=\u0022email-error\u0022 aria-invalid=\u0022@emailInvalid\u0022 /\u003E\n\u003CFieldError For=\u0022() =\u003E Model.Email\u0022 Id=\u0022email-error\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EGive it an \u003Ccode\u003EId\u003C/code\u003E and point the control\u0026#39;s \u003Ccode\u003Earia-describedby\u003C/code\u003E at it, so screen readers read the messages with the control; set \u003Ccode\u003Earia-invalid\u003C/code\u003E on the control yourself. The element is there only while there are messages, and a reference to a missing id is ignored.\u003C/li\u003E\u003Cli\u003EMessages aren\u0026#39;t announced as they appear.\u003C/li\u003E\u003C/ul\u003E", "typeParameters": [ "TValue" ], "bases": [], "properties": [ { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element\u0026#39;s id, for the control\u0026#39;s \u003Ccode\u003Earia-describedby\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "For", "type": "Expression\u003CFunc\u003CTValue\u003E\u003E", "summary": "\u003Cp\u003EThe property whose messages to show.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "FieldFrame", "displayName": "FieldFrame", "fullName": "IzzyBlazor.FieldFrame", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe shared frame around every field: label, control, hint, errors. Field components use it; custom fields can too, to match the built-in ones.\u003C/p\u003E", "examples": [ "\u003CFieldFrame Id=\u0022due\u0022 Label=\u0022Due date\u0022 Hint=\u0022A weekday.\u0022 HintId=\u0022due-hint\u0022\u003E\n \u003Cinput id=\u0022due\u0022 type=\u0022date\u0022 name=\u0022due\u0022 aria-describedby=\u0022due-hint\u0022 /\u003E\n\u003C/FieldFrame\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Elabel\u003C/code\u003E whose \u003Ccode\u003Efor\u003C/code\u003E is \u003Ccode\u003EId\u003C/code\u003E, so the control needs that id; with \u003Ccode\u003EGroup\u003C/code\u003E, a \u003Ccode\u003Efieldset\u003C/code\u003E whose \u003Ccode\u003Elegend\u003C/code\u003E names the group.\u003C/li\u003E\u003Cli\u003EIt renders the hint and errors with \u003Ccode\u003EHintId\u003C/code\u003E and \u003Ccode\u003EErrorId\u003C/code\u003E; a custom control links them with \u003Ccode\u003Earia-describedby\u003C/code\u003E (with \u003Ccode\u003EGroup\u003C/code\u003E, the \u003Ccode\u003Efieldset\u003C/code\u003E carries it) and sets \u003Ccode\u003Earia-invalid\u003C/code\u003E itself.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EHideLabel\u003C/code\u003E keeps the label for screen readers; \u003Ccode\u003ELabelId\u003C/code\u003E lets a control that isn\u0026#39;t a native input take its name with \u003Ccode\u003Earia-labelledby\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EThe required asterisk is hidden from screen readers, so mark the control \u003Ccode\u003Erequired\u003C/code\u003E too; where it can\u0026#39;t be (a group of checkboxes), \u003Ccode\u003EAnnounceRequired\u003C/code\u003E adds \u0026quot;(required)\u0026quot; for them after the label.\u003C/li\u003E\u003Cli\u003EAdd-on text from \u003Ccode\u003EFieldAddons\u003C/code\u003E isn\u0026#39;t part of the control\u0026#39;s name.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EFieldError\u003C/code\u003E\u0026#39;s messages are linked through its \u003Ccode\u003EId\u003C/code\u003E: point the control\u0026#39;s \u003Ccode\u003Earia-describedby\u003C/code\u003E at it. An IzzyBlazor field links its own.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "TextField", "Fieldset", "Form" ], "bases": [], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Class", "type": "string?", "summary": "\u003Cp\u003EClasses for the wrapper.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Style", "type": "string?", "summary": "\u003Cp\u003EInline style for the wrapper.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe control\u0026#39;s id, for the label\u0026#39;s \u003Ccode\u003Efor\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "LabelId", "type": "string?", "summary": "\u003Cp\u003EAn id for the label, for controls that point to it with \u003Ccode\u003Earia-labelledby\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe label text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HideLabel", "type": "bool", "default": "false", "summary": "\u003Cp\u003EKeeps the label for screen readers but doesn\u0026#39;t show it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Required", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether the field is required: an asterisk, or no \u0026quot;(optional)\u0026quot;, depending on the form\u0026#39;s \u003Ccode\u003ERequiredMark\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "AnnounceRequired", "type": "bool", "default": "false", "summary": "\u003Cp\u003ESays \u0026quot;(required)\u0026quot; to screen readers after the label of a required field (\u003Ca href=\u0022cref:P:IzzyBlazor.IzzyText.Required\u0022\u003E\u003Ccode\u003ERequired\u003C/code\u003E\u003C/a\u003E), for controls that can\u0026#39;t be marked \u003Ccode\u003Erequired\u003C/code\u003E themselves, such as a group of checkboxes. Whatever the form\u0026#39;s \u003Ccode\u003ERequiredMark\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Hint", "type": "string?", "summary": "\u003Cp\u003EHelp text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HintId", "type": "string?", "summary": "\u003Cp\u003EThe hint element\u0026#39;s id.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Errors", "type": "IReadOnlyList\u003Cstring\u003E?", "summary": "\u003Cp\u003EValidation messages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ErrorId", "type": "string?", "summary": "\u003Cp\u003EThe error element\u0026#39;s id.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Group", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders a fieldset with a legend, for groups of controls such as radios.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "LabelInControl", "type": "bool", "default": "false", "summary": "\u003Cp\u003EThe control renders its own label (checkboxes and switches).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe control.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "Fieldset", "displayName": "Fieldset", "fullName": "IzzyBlazor.Fieldset", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EGroups related fields under a heading, such as a shipping address.\u003C/p\u003E", "examples": [ "\u003CFieldset Label=\u0022Shipping address\u0022 Description=\u0022Where we send your order.\u0022\u003E\n \u003CTextField @bind-Value=\u0022Model.Street\u0022 /\u003E ...\n\u003C/Fieldset\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Efieldset\u003C/code\u003E with \u003Ccode\u003ELabel\u003C/code\u003E as its \u003Ccode\u003Elegend\u003C/code\u003E, which screen readers announce as the group\u0026#39;s name when focus moves into it.\u003C/li\u003E\u003Cli\u003EThe \u003Ccode\u003EDescription\u003C/code\u003E describes the group (\u003Ccode\u003Earia-describedby\u003C/code\u003E), so screen readers can read it with the name; what one field needs still goes in its \u003Ccode\u003EHint\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EThe \u003Ccode\u003EIcon\u003C/code\u003E is decorative and hidden from screen readers.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Form", "Section", "Card", "CheckboxGroup" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe group\u0026#39;s heading. Screen readers announce it with each field in the group.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon at the start of the heading, centered on the label and description, to tell sections apart. Decorative. Use icons on the sections or on the rows within them, not both.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Description", "type": "string?", "summary": "\u003Cp\u003EA short explanation under the heading.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Gap", "type": "Responsive\u003Cint\u003E", "default": "4", "summary": "\u003Cp\u003ESpace between the fields, in spacing steps. Defaults to 4.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Columns", "type": "int", "default": "1", "summary": "\u003Cp\u003ELays the group\u0026#39;s fields out in up to this many columns (1 to 4), by the group\u0026#39;s own width, as \u003Ca href=\u0022cref:P:IzzyBlazor.Form.Columns\u0022\u003E\u003Ccode\u003EColumns\u003C/code\u003E\u003C/a\u003E does. Defaults to 1.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dividers", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDraws a line between the fields, with the \u003Ca href=\u0022cref:P:IzzyBlazor.Fieldset.Gap\u0022\u003E\u003Ccode\u003EGap\u003C/code\u003E\u003C/a\u003E above and below it, as in a list of settings. Each direct child is a row; use it instead of \u003Ccode\u003EDivider\u003C/code\u003Es between them. Ignored when \u003Ca href=\u0022cref:P:IzzyBlazor.Fieldset.Columns\u0022\u003E\u003Ccode\u003EColumns\u003C/code\u003E\u003C/a\u003E is more than 1.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe fields.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "FileUpload", "displayName": "FileUpload", "fullName": "IzzyBlazor.FileUpload", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA drop zone around a real file input: \u0026quot;Choose a file or drag it here\u0026quot;, with a hint built from Accept and MaxFileSize. \u0026quot;Choose a file\u0026quot; is a \u003Ccode\u003E\u0026lt;label\u0026gt;\u003C/code\u003E for the input, so it opens the picker with no script; the input itself is hidden while scripts run and shows only its file name without them.\u003C/p\u003E\u003Cul\u003E\u003Cli\u003EStatic page, no JavaScript: choose with the link; the browser names the chosen file, and it posts with the form. Bind it on the page with [SupplyParameterFromForm(FormName = \u0026quot;...\u0026quot;)] IFormFile? (or IFormFileCollection), named like the field, and set Multipart on the Form.\u003C/li\u003E\u003Cli\u003EWith JavaScript: files can also be dropped on the zone; dropped files that don\u0026#39;t match Accept are refused, and files over MaxFileSize are flagged before posting. The chosen file\u0026#39;s name and size replace the line of allowed types and size; the Hint stays.\u003C/li\u003E\u003Cli\u003EInteractive page: OnChange gets the chosen files as IBrowserFile, to read as streams.\u003C/li\u003E\u003C/ul\u003E", "examples": [ "\u003CForm Model=\u0022Model\u0022 FormName=\u0022profile\u0022 Multipart\u003E\n \u003CFileUpload Name=\u0022Avatar\u0022 Label=\u0022Profile photo\u0022 Accept=\u0022.png,.jpg\u0022 MaxFileSize=\u00222_000_000\u0022 /\u003E\n\u003C/Form\u003E\n@code { [SupplyParameterFromForm(FormName = \u0022profile\u0022)] public IFormFile? Avatar { get; set; } }" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a real file \u003Ccode\u003Einput\u003C/code\u003E, out of sight but focusable once scripts run: Tab reaches it, the zone shows the focus ring, and Enter or Space opens the picker.\u003C/li\u003E\u003Cli\u003EThe input is named by \u003Ccode\u003ELabel\u003C/code\u003E; without one, by the \u0026quot;Choose a file\u0026quot; link (\u0026quot;Choose files\u0026quot; with \u003Ccode\u003EMultiple\u003C/code\u003E; \u003Ccode\u003EChooseText\u003C/code\u003E).\u003C/li\u003E\u003Cli\u003EThe allowed types and size, the \u003Ccode\u003EHint\u003C/code\u003E and any \u003Ccode\u003EErrors\u003C/code\u003E are linked with \u003Ccode\u003Earia-describedby\u003C/code\u003E; \u003Ccode\u003EErrors\u003C/code\u003E also sets \u003Ccode\u003Earia-invalid\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith script, the chosen file\u0026#39;s name and size (or \u0026quot;3 files\u0026quot;) are announced politely; there\u0026#39;s no list of the files.\u003C/li\u003E\u003Cli\u003EWith script, a file of the wrong type or over \u003Ccode\u003EMaxFileSize\u003C/code\u003E gets the browser\u0026#39;s validation message, and the browser\u0026#39;s own validation keeps the form from posting (not with \u003Ccode\u003ENativeValidation=\u0026quot;false\u0026quot;\u003C/code\u003E on the Form).\u003C/li\u003E\u003Cli\u003EDropping is a pointer-only extra: the picker does the same from the keyboard.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Form", "TextField", "FieldFrame" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, files can\u0027t be dropped on the zone, and type and size aren\u0027t checked before posting." }, "properties": [ { "name": "Name", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe form field name the files post under. On static pages, name the page property the same (or use \u003Ccode\u003E[SupplyParameterFromForm(Name = \u0026quot;...\u0026quot;)]\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe visible label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HideLabel", "type": "bool", "default": "false", "summary": "\u003Cp\u003EHides the label but keeps it for screen readers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Hint", "type": "string?", "summary": "\u003Cp\u003EHelp text under the zone.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Required", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether a file must be chosen before the form posts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the picker.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accept", "type": "string?", "summary": "\u003Cp\u003EThe file types to offer, as the \u003Ccode\u003Eaccept\u003C/code\u003E attribute: \u003Ccode\u003E\u0026quot;image/*\u0026quot;\u003C/code\u003E, \u003Ccode\u003E\u0026quot;.pdf,.docx\u0026quot;\u003C/code\u003E. A hint for the picker only; check types on the server too.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Multiple", "type": "bool", "default": "false", "summary": "\u003Cp\u003EAllows choosing several files.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MaxFileSize", "type": "long?", "summary": "\u003Cp\u003EThe largest file allowed, in bytes. With JavaScript, larger files are flagged before the form posts. Always check on the server too, and set the server\u0026#39;s request size limit to match.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MaxFiles", "type": "int", "default": "10", "summary": "\u003Cp\u003EOn interactive pages, the most files \u003Ca href=\u0022cref:P:IzzyBlazor.FileUpload.OnChange\u0022\u003E\u003Ccode\u003EOnChange\u003C/code\u003E\u003C/a\u003E receives; extra ones are left out. Defaults to 10.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TooLargeText", "type": "string?", "summary": "\u003Cp\u003EThe message for a file over \u003Ca href=\u0022cref:P:IzzyBlazor.FileUpload.MaxFileSize\u0022\u003E\u003Ccode\u003EMaxFileSize\u003C/code\u003E\u003C/a\u003E: \u003Ccode\u003E{0}\u003C/code\u003E is its name, \u003Ccode\u003E{1}\u003C/code\u003E the limit.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "WrongTypeText", "type": "string?", "summary": "\u003Cp\u003EThe message for a chosen or dropped file that doesn\u0026#39;t match \u003Ca href=\u0022cref:P:IzzyBlazor.FileUpload.Accept\u0022\u003E\u003Ccode\u003EAccept\u003C/code\u003E\u003C/a\u003E: \u003Ccode\u003E{0}\u003C/code\u003E is its name. (The picker\u0026#39;s \u0026quot;All files\u0026quot; option and drops both get past the type filter.)\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChooseText", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe link that opens the picker. Defaults to \u0026quot;Choose a file\u0026quot; (\u0026quot;Choose files\u0026quot; with \u003Ca href=\u0022cref:P:IzzyBlazor.FileUpload.Multiple\u0022\u003E\u003Ccode\u003EMultiple\u003C/code\u003E\u003C/a\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "DragText", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe text after the link. Defaults to \u0026quot;or drag it here\u0026quot; (\u0026quot;or drag them here\u0026quot; with \u003Ca href=\u0022cref:P:IzzyBlazor.FileUpload.Multiple\u0022\u003E\u003Ccode\u003EMultiple\u003C/code\u003E\u003C/a\u003E). Not shown on touch screens, where dragging isn\u0026#39;t an option.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "AcceptText", "type": "string?", "default": "computed", "summary": "\u003Cp\u003ESmall text under the prompt. Defaults to the types and size allowed, from \u003Ca href=\u0022cref:P:IzzyBlazor.FileUpload.Accept\u0022\u003E\u003Ccode\u003EAccept\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.FileUpload.MaxFileSize\u0022\u003E\u003Ccode\u003EMaxFileSize\u003C/code\u003E\u003C/a\u003E: \u0026quot;PNG or JPG \u0026#183; up to 2 MB\u0026quot;. An empty string shows none. With JavaScript, the chosen file\u0026#39;s name and size take its place.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "default": "computed", "summary": "\u003Cp\u003EThe zone\u0026#39;s icon. Defaults to an arrow out of a tray.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Errors", "type": "IReadOnlyList\u003Cstring\u003E?", "summary": "\u003Cp\u003EValidation messages to show under the zone, such as from server checks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [ { "name": "OnChange", "type": "EventCallback\u003CIReadOnlyList\u003CIBrowserFile\u003E\u003E", "summary": "\u003Cp\u003EOn interactive pages, runs with the chosen files, leaving out any over \u003Ca href=\u0022cref:P:IzzyBlazor.FileUpload.MaxFileSize\u0022\u003E\u003Ccode\u003EMaxFileSize\u003C/code\u003E\u003C/a\u003E (the zone flags those). Read one with \u003Ccode\u003EOpenReadStream(MaxFileSize)\u003C/code\u003E: its default limit is 500 KB.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" } } ], "methods": [], "types": [] }, { "name": "FilterCheckbox", "displayName": "FilterCheckbox", "fullName": "IzzyBlazor.FilterCheckbox", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA checkbox for a \u003Ca href=\u0022cref:T:IzzyBlazor.FilterForm\u0022\u003E\u003Ccode\u003EFilterForm\u003C/code\u003E\u003C/a\u003E: when checked the URL has \u003Ccode\u003Ename=true\u003C/code\u003E.\u003C/p\u003E", "bases": [], "properties": [ { "name": "Name", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe query-string name, such as \u003Ccode\u003Estatus\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FilterFieldBase" }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe field\u0026#39;s name for screen readers (shown beside a \u003Ca href=\u0022cref:T:IzzyBlazor.FilterCheckbox\u0022\u003E\u003Ccode\u003EFilterCheckbox\u003C/code\u003E\u003C/a\u003E). Filter bars are compact, so a search box\u0026#39;s and a select\u0026#39;s isn\u0026#39;t shown. Required on \u003Ca href=\u0022cref:T:IzzyBlazor.FilterSelect\u0022\u003E\u003Ccode\u003EFilterSelect\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.FilterCheckbox\u0022\u003E\u003Ccode\u003EFilterCheckbox\u003C/code\u003E\u003C/a\u003E; \u003Ca href=\u0022cref:T:IzzyBlazor.FilterSearch\u0022\u003E\u003Ccode\u003EFilterSearch\u003C/code\u003E\u003C/a\u003E\u0026#39;s defaults to \u0026quot;Search\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FilterFieldBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EControl height and text size. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FilterFieldBase" } ], "events": [], "methods": [], "types": [ "ControlSize" ] }, { "name": "FilterForm", "displayName": "FilterForm", "fullName": "IzzyBlazor.FilterForm", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA search-and-filter bar that puts its values in the URL, for a table or any list. The page reads them with [SupplyParameterFromQuery] and filters its own data.\u003C/p\u003E\u003Cul\u003E\u003Cli\u003ENo script: a GET form. It keeps the rest of the query string (a table\u0026#39;s sort, other tables\u0026#39; state) as hidden fields and drops page numbers, so filtering starts at page 1.\u003C/li\u003E\u003Cli\u003EWith script: \u003Ccode\u003E\u0026lt;ib-filter-form\u0026gt;\u003C/code\u003E applies as you type in a search or text box (after a pause), when a select or checkbox changes, and when another input of your own (a date) changes, after a pause; without a full reload, and keeping focus where it was.\u003C/li\u003E\u003Cli\u003EInteractive: the same navigation runs through Blazor; the page\u0026#39;s query parameters update.\u003C/li\u003E\u003C/ul\u003E", "examples": [ "\u003CFilterForm\u003E\n \u003CFilterSearch Placeholder=\u0022Search customers\u0022 /\u003E\n \u003CFilterSelect Name=\u0022status\u0022 Label=\u0022Status\u0022 Items=\u0022statuses\u0022 /\u003E\n\u003C/FilterForm\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a GET \u003Ccode\u003Eform\u003C/code\u003E with \u003Ccode\u003Erole=\u0026quot;search\u0026quot;\u003C/code\u003E: a search landmark named \u0026quot;Filters\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E).\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EFilterSearch\u003C/code\u003E and \u003Ccode\u003EFilterSelect\u003C/code\u003E have a \u003Ccode\u003ELabel\u003C/code\u003E that\u0026#39;s hidden but names them. The search defaults to \u0026quot;Search\u0026quot;; a select requires one.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EFilterCheckbox\u003C/code\u003E is a native checkbox with its \u003Ccode\u003ELabel\u003C/code\u003E (required) shown beside it.\u003C/li\u003E\u003Cli\u003EWith script, filters apply as you type or change a value, without a reload, and focus stays where it was; Enter applies at once.\u003C/li\u003E\u003Cli\u003EThe new results aren\u0026#39;t announced, so say how many there are in a live region (a \u003Ccode\u003ETable\u003C/code\u003E\u0026#39;s range under it is read when it changes).\u003C/li\u003E\u003Cli\u003EWithout script, or with \u003Ccode\u003ELive\u003C/code\u003E false, an Apply button submits; \u0026quot;Clear\u0026quot; is a link.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Table", "Pagination", "TextField", "Select" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, filters apply when you press Apply, not as you type." }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe filter fields: \u003Ca href=\u0022cref:T:IzzyBlazor.FilterSearch\u0022\u003E\u003Ccode\u003EFilterSearch\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.FilterSelect\u0022\u003E\u003Ccode\u003EFilterSelect\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.FilterCheckbox\u0022\u003E\u003Ccode\u003EFilterCheckbox\u003C/code\u003E\u003C/a\u003E, or your own inputs (list their names in \u003Ca href=\u0022cref:P:IzzyBlazor.FilterForm.Fields\u0022\u003E\u003Ccode\u003EFields\u003C/code\u003E\u003C/a\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Live", "type": "bool", "default": "true", "summary": "\u003Cp\u003EApplies as you type and on every change, with JavaScript. Defaults to true; false keeps the Apply button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Fields", "type": "IReadOnlyList\u003Cstring\u003E?", "summary": "\u003Cp\u003EThe names of inputs you add yourself, so the form doesn\u0026#39;t also carry them over from the URL.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Filters\u0022", "summary": "\u003Cp\u003EThe search landmark\u0026#39;s name. Defaults to \u0026quot;Filters\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ApplyText", "type": "string?", "default": "\u0022Apply\u0022", "summary": "\u003Cp\u003EThe submit button\u0026#39;s text, shown when JavaScript is off or \u003Ca href=\u0022cref:P:IzzyBlazor.FilterForm.Live\u0022\u003E\u003Ccode\u003ELive\u003C/code\u003E\u003C/a\u003E is false. Defaults to \u0026quot;Apply\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ClearText", "type": "string?", "default": "\u0022Clear\u0022", "summary": "\u003Cp\u003EThe text of the link that removes every filter. Defaults to \u0026quot;Clear\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "FilterSearch", "displayName": "FilterSearch", "fullName": "IzzyBlazor.FilterSearch", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA search box for a \u003Ca href=\u0022cref:T:IzzyBlazor.FilterForm\u0022\u003E\u003Ccode\u003EFilterForm\u003C/code\u003E\u003C/a\u003E. Its value is \u003Ccode\u003E?q=\u003C/code\u003E by default.\u003C/p\u003E", "bases": [], "properties": [ { "name": "Placeholder", "type": "string?", "default": "\u0022Search\u0022", "summary": "\u003Cp\u003EHint text inside the box. Defaults to \u0026quot;Search\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Name", "type": "string", "default": "\u0022q\u0022", "summary": "\u003Cp\u003EThe query-string name, such as \u003Ccode\u003Estatus\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FilterFieldBase" }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe field\u0026#39;s name for screen readers (shown beside a \u003Ca href=\u0022cref:T:IzzyBlazor.FilterCheckbox\u0022\u003E\u003Ccode\u003EFilterCheckbox\u003C/code\u003E\u003C/a\u003E). Filter bars are compact, so a search box\u0026#39;s and a select\u0026#39;s isn\u0026#39;t shown. Required on \u003Ca href=\u0022cref:T:IzzyBlazor.FilterSelect\u0022\u003E\u003Ccode\u003EFilterSelect\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.FilterCheckbox\u0022\u003E\u003Ccode\u003EFilterCheckbox\u003C/code\u003E\u003C/a\u003E; \u003Ca href=\u0022cref:T:IzzyBlazor.FilterSearch\u0022\u003E\u003Ccode\u003EFilterSearch\u003C/code\u003E\u003C/a\u003E\u0026#39;s defaults to \u0026quot;Search\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FilterFieldBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EControl height and text size. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FilterFieldBase" } ], "events": [], "methods": [], "types": [ "ControlSize" ] }, { "name": "FilterSelect", "displayName": "FilterSelect", "fullName": "IzzyBlazor.FilterSelect", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA select for a \u003Ca href=\u0022cref:T:IzzyBlazor.FilterForm\u0022\u003E\u003Ccode\u003EFilterForm\u003C/code\u003E\u003C/a\u003E, with an \u0026quot;all\u0026quot; option first. Options come from \u003Ca href=\u0022cref:P:IzzyBlazor.FilterSelect.Items\u0022\u003E\u003Ccode\u003EItems\u003C/code\u003E\u003C/a\u003E or an enum (\u003Ca href=\u0022cref:P:IzzyBlazor.FilterSelect.EnumType\u0022\u003E\u003Ccode\u003EEnumType\u003C/code\u003E\u003C/a\u003E, using [Display(Name)]).\u003C/p\u003E", "bases": [], "properties": [ { "name": "Items", "type": "IEnumerable\u003Cstring\u003E?", "summary": "\u003Cp\u003EThe values to choose from.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EnumType", "type": "Type?", "summary": "\u003Cp\u003EAn enum whose names are the values.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemText", "type": "Func\u003Cstring, string\u003E?", "summary": "\u003Cp\u003EDisplay text for a value, when it differs from the value.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "AllText", "type": "string?", "default": "\u0022{Label}: All\u0022", "summary": "\u003Cp\u003EThe first option, meaning no filter. Defaults to \u0026quot;{Label}: All\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Name", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe query-string name, such as \u003Ccode\u003Estatus\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FilterFieldBase" }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe field\u0026#39;s name for screen readers (shown beside a \u003Ca href=\u0022cref:T:IzzyBlazor.FilterCheckbox\u0022\u003E\u003Ccode\u003EFilterCheckbox\u003C/code\u003E\u003C/a\u003E). Filter bars are compact, so a search box\u0026#39;s and a select\u0026#39;s isn\u0026#39;t shown. Required on \u003Ca href=\u0022cref:T:IzzyBlazor.FilterSelect\u0022\u003E\u003Ccode\u003EFilterSelect\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.FilterCheckbox\u0022\u003E\u003Ccode\u003EFilterCheckbox\u003C/code\u003E\u003C/a\u003E; \u003Ca href=\u0022cref:T:IzzyBlazor.FilterSearch\u0022\u003E\u003Ccode\u003EFilterSearch\u003C/code\u003E\u003C/a\u003E\u0026#39;s defaults to \u0026quot;Search\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FilterFieldBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EControl height and text size. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FilterFieldBase" } ], "events": [], "methods": [], "types": [ "ControlSize" ] }, { "name": "Form", "displayName": "Form", "fullName": "IzzyBlazor.Form", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA styled EditForm. Works three ways:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003EStatic page, no JavaScript: a real POST, validated on the server, re-rendered with errors.\u003C/li\u003E\u003Cli\u003EStatic page with JavaScript: Blazor\u0026#39;s enhanced form handling (no full reload), native browser validation before posting, and a loading state on the submit button. A field\u0026#39;s errors from the last post go once its value changes (a form reset brings them back), and the next post checks it again; a FormErrors summary keeps them.\u003C/li\u003E\u003Cli\u003EInteractive page: EditForm validation as usual.\u003C/li\u003E\u003C/ul\u003E", "examples": [ "\u003CForm Model=\u0022Model\u0022 FormName=\u0022profile\u0022 OnValidSubmit=\u0022Save\u0022\u003E\n \u003CTextField @bind-Value=\u0022Model.Name\u0022 /\u003E\n \u003CTextField @bind-Value=\u0022Model.Email\u0022 /\u003E\n \u003CFormActions\u003E\u003CButton Submit\u003ESave\u003C/Button\u003E\u003C/FormActions\u003E\n\u003C/Form\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Eform\u003C/code\u003E. With \u003Ccode\u003ENativeValidation\u003C/code\u003E (the default), the browser stops a submit with a missing or malformed value, focuses that field and shows its own message.\u003C/li\u003E\u003Cli\u003EEach field links its errors with \u003Ccode\u003Earia-describedby\u003C/code\u003E and sets \u003Ccode\u003Earia-invalid\u003C/code\u003E; errors aren\u0026#39;t announced as they appear.\u003C/li\u003E\u003Cli\u003EPlace a \u003Ccode\u003EFormErrors\u003C/code\u003E at the top: it takes focus after a submit that fails validation, with JavaScript off too, and screen readers read its title and messages then (it isn\u0026#39;t also a live region, which would read it twice). Form moves no focus itself. On static pages a CheckboxGroup, RadioGroup or SegmentedControl with an error takes focus after the post too (its error belongs to the group, so no one box reads it); whichever of these comes first on the page keeps it.\u003C/li\u003E\u003Cli\u003EThe summary\u0026#39;s messages are plain text, not links to their fields.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ERequiredMark\u003C/code\u003E changes only what\u0026#39;s shown: the asterisk is hidden from screen readers, which hear \u0026quot;required\u0026quot; from the control, and \u0026quot;(optional)\u0026quot; is read with the label.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EDisabled\u003C/code\u003E fields can\u0026#39;t be focused. With \u003Ccode\u003EReadOnly\u003C/code\u003E, text fields stay focusable and are announced as read only; checkboxes, switches, radios, segments and sliders are disabled.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Fieldset", "TextField", "Button", "Alert" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Model", "type": "object?", "summary": "\u003Cp\u003EThe object the form edits. Set this or \u003Ca href=\u0022cref:P:IzzyBlazor.Form.EditContext\u0022\u003E\u003Ccode\u003EEditContext\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EditContext", "type": "EditContext?", "summary": "\u003Cp\u003EAn explicit edit context. Set this or \u003Ca href=\u0022cref:P:IzzyBlazor.Form.Model\u0022\u003E\u003Ccode\u003EModel\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FormName", "type": "string?", "summary": "\u003Cp\u003EThe form\u0026#39;s name. Required on static pages, where it tells Blazor which form a POST belongs to; pair it with \u003Ccode\u003E[SupplyParameterFromForm(FormName = \u0026quot;...\u0026quot;)]\u003C/code\u003E on the model property.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Multipart", "type": "bool", "default": "false", "summary": "\u003Cp\u003EPosts as \u003Ccode\u003Emultipart/form-data\u003C/code\u003E, which a \u003Ca href=\u0022cref:T:IzzyBlazor.FileUpload\u0022\u003E\u003Ccode\u003EFileUpload\u003C/code\u003E\u003C/a\u003E needs to send its files on static pages. Without it, a post sends only the file names.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Enhance", "type": "bool", "default": "true", "summary": "\u003Cp\u003EUses Blazor\u0026#39;s enhanced form handling on static pages (no full page reload). Defaults to true.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "NativeValidation", "type": "bool", "default": "true", "summary": "\u003Cp\u003ELets the browser check required fields, lengths and formats before posting. Defaults to true.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Validator", "type": "RenderFragment?", "summary": "\u003Cp\u003EReplaces the default DataAnnotations validator, for example with a FluentValidation one.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Layout", "type": "FormLayout", "default": "FormLayout.Vertical", "summary": "\u003Cp\u003EHow labels sit next to fields. Defaults to stacked.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Gap", "type": "Responsive\u003Cint\u003E", "default": "5", "summary": "\u003Cp\u003ESpace between fields, in spacing steps. Defaults to 5.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Columns", "type": "int", "default": "1", "summary": "\u003Cp\u003ELays the fields out in up to this many columns (1 to 4). Defaults to 1. The form shows fewer when it\u0026#39;s narrow, by its own width rather than the screen\u0026#39;s, so the same form fits a page, a dialog and a drawer: two columns from 32rem, three from 48rem, four from 64rem. Fields take one column and anything else (text, errors, buttons, a Fieldset) the whole row; set \u003Ccode\u003EColSpan\u003C/code\u003E to change either.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables every field in the form. Disabled fields can\u0026#39;t be changed or focused and aren\u0026#39;t posted. Buttons are left as they are.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ReadOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMakes every field read-only: shown and posted, but not changed, as on a page that shows a record before editing it. HTML has no read-only select, checkbox, radio or range, so a read-only Select, Combobox or MultiSelect shows its value in a read-only text field, and checkboxes, switches, radios, segments and sliders are disabled; their values post from hidden inputs.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RequiredMark", "type": "RequiredMark", "default": "RequiredMark.Required", "summary": "\u003Cp\u003EWhich fields are marked beside their labels: \u003Ca href=\u0022cref:F:IzzyBlazor.RequiredMark.Required\u0022\u003E\u003Ccode\u003ERequiredMark.Required\u003C/code\u003E\u003C/a\u003E (an asterisk on required fields, the default), \u003Ca href=\u0022cref:F:IzzyBlazor.RequiredMark.Optional\u0022\u003E\u003Ccode\u003ERequiredMark.Optional\u003C/code\u003E\u003C/a\u003E (\u0026quot;(optional)\u0026quot; on the others) or \u003Ca href=\u0022cref:F:IzzyBlazor.RequiredMark.None\u0022\u003E\u003Ccode\u003ERequiredMark.None\u003C/code\u003E\u003C/a\u003E. Whether a field is required still comes from \u003Ccode\u003E[Required]\u003C/code\u003E or its own \u003Ccode\u003ERequired\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe fields and buttons.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [ { "name": "OnValidSubmit", "type": "EventCallback\u003CEditContext\u003E", "summary": "\u003Cp\u003ERuns on the server after a submit that passes validation.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "OnInvalidSubmit", "type": "EventCallback\u003CEditContext\u003E", "summary": "\u003Cp\u003ERuns on the server after a submit that fails validation.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "OnSubmit", "type": "EventCallback\u003CEditContext\u003E", "summary": "\u003Cp\u003ERuns on every submit, instead of the valid and invalid callbacks. You validate yourself.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "methods": [], "types": [ "FormLayout", "RequiredMark" ] }, { "name": "FormActions", "displayName": "FormActions", "fullName": "IzzyBlazor.FormActions", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe row of buttons at the end of a form. It takes the whole row in a form with Columns and puts the buttons at the end. Last in a form that fills a Dialog or Drawer, it becomes the dialog\u0026#39;s footer, like DialogFooter: it reaches the edges and stays in view when the body scrolls.\u003C/p\u003E", "examples": [ "\u003CFormActions\u003E\n \u003CButton Href=\u0022/orders\u0022 Variant=\u0022ButtonVariant.Outline\u0022\u003ECancel\u003C/Button\u003E\n \u003CButton Submit\u003ESave\u003C/Button\u003E\n\u003C/FormActions\u003E" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe buttons, in reading order: usually Cancel, then the main action.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EWhere the buttons go along the row. Defaults to the end.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true } ], "events": [], "methods": [], "types": [ "Justify" ] }, { "name": "FormErrors", "displayName": "FormErrors", "fullName": "IzzyBlazor.FormErrors", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA summary of every validation message in the form. Place it at the top of a long form. After a submit that fails validation it takes focus, so keyboard and screen reader users start from the list of problems, and screen readers read it then: a group named by its title and described by the messages. It isn\u0026#39;t a live region as well, which would read it twice (once as it appears, once on focus):\u003C/p\u003E\u003Cul\u003E\u003Cli\u003Estatic pages: native autofocus on a full page load (works with JavaScript off), and the script for an enhanced post, which patches the page so autofocus doesn\u0026#39;t fire;\u003C/li\u003E\u003Cli\u003Einteractive pages: focused from C# after the submit, but not as messages change while typing.\u003C/li\u003E\u003C/ul\u003E", "examples": [ "\u003CFormErrors /\u003E" ], "bases": [], "properties": [ { "name": "Title", "type": "string?", "default": "\u0022Please fix the following\u0022", "summary": "\u003Cp\u003EThe heading. Defaults to \u0026quot;Please fix the following\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "Grid", "displayName": "Grid", "fullName": "IzzyBlazor.Grid", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA CSS grid. Columns come from, in order of precedence:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Grid.Template\u0022\u003E\u003Ccode\u003ETemplate\u003C/code\u003E\u003C/a\u003E: your own column sizes, such as \u003Ccode\u003E240px 1fr\u003C/code\u003E, per breakpoint.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Grid.Columns\u0022\u003E\u003Ccode\u003EColumns\u003C/code\u003E\u003C/a\u003E: a number of equal columns, per breakpoint.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Grid.MinChildWidth\u0022\u003E\u003Ccode\u003EMinChildWidth\u003C/code\u003E\u003C/a\u003E: as many columns as fit, with no breakpoints.\u003C/li\u003E\u003C/ul\u003E", "examples": [ "\u003CGrid Columns=\u0022new() { Base = 1, Sm = 2, Lg = 3 }\u0022 Gap=\u00224\u0022\u003E...\u003C/Grid\u003E\n\u003CGrid MinChildWidth=\u002216.Rem\u0022 Gap=\u00224\u0022\u003E...\u003C/Grid\u003E\n\u003CGrid Template=\u0027new() { Base = \u00221fr\u0022, Md = \u0022240px 1fr\u0022 }\u0027 Gap=\u00226\u0022\u003E...\u003C/Grid\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Ediv\u003C/code\u003E with no role: a layout, not a data grid. For rows and columns of data, use \u003Ca href=\u0022cref:T:IzzyBlazor.Table\u00601\u0022\u003E\u003Ccode\u003ETable\u0026lt;T\u0026gt;\u003C/code\u003E\u003C/a\u003E.\u003C/li\u003E\u003Cli\u003EColumn counts and spans (\u003Ccode\u003EColSpan\u003C/code\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.GridItem.RowSpan\u0022\u003E\u003Ccode\u003ERowSpan\u003C/code\u003E\u003C/a\u003E) change only placement: keyboard and screen-reader order stays the source order.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Stack", "Container", "Table", "Card" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Columns", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EThe number of equal columns (1 to 12), per breakpoint.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Template", "type": "Responsive\u003Cstring\u003E", "summary": "\u003Cp\u003EColumn sizes as CSS \u003Ccode\u003Egrid-template-columns\u003C/code\u003E, per breakpoint: \u003Ccode\u003E\u0026quot;240px 1fr\u0026quot;\u003C/code\u003E for a fixed side column, \u003Ccode\u003E\u0026quot;2fr 1fr\u0026quot;\u003C/code\u003E, \u003Ccode\u003E\u0026quot;auto 1fr auto\u0026quot;\u003C/code\u003E. Wins over \u003Ca href=\u0022cref:P:IzzyBlazor.Grid.Columns\u0022\u003E\u003Ccode\u003EColumns\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MinChildWidth", "type": "Length?", "summary": "\u003Cp\u003EThe smallest a column may be; the grid fits as many as there is room for. Used when neither \u003Ca href=\u0022cref:P:IzzyBlazor.Grid.Template\u0022\u003E\u003Ccode\u003ETemplate\u003C/code\u003E\u003C/a\u003E nor \u003Ca href=\u0022cref:P:IzzyBlazor.Grid.Columns\u0022\u003E\u003Ccode\u003EColumns\u003C/code\u003E\u003C/a\u003E is set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Stretch", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWith \u003Ca href=\u0022cref:P:IzzyBlazor.Grid.MinChildWidth\u0022\u003E\u003Ccode\u003EMinChildWidth\u003C/code\u003E\u003C/a\u003E: when there are fewer items than fit in a row, stretch them to fill it. By default they keep their size and the rest of the row stays empty, so every item is the same width.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between cells, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003EHow items line up in their cells, block direction. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Length" ] }, { "name": "GridItem", "displayName": "GridItem", "fullName": "IzzyBlazor.GridItem", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA cell of a \u003Ca href=\u0022cref:T:IzzyBlazor.Grid\u0022\u003E\u003Ccode\u003EGrid\u003C/code\u003E\u003C/a\u003E that spans several rows, or columns. Any component takes \u003Ccode\u003EColSpan\u003C/code\u003E; GridItem adds \u003Ca href=\u0022cref:P:IzzyBlazor.GridItem.RowSpan\u0022\u003E\u003Ccode\u003ERowSpan\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "examples": [ "\u003CGridItem ColSpan=\u0022new() { Base = 1, Lg = 2 }\u0022\u003E...\u003C/GridItem\u003E" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "RowSpan", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EHow many rows it spans, per breakpoint.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [] }, { "name": "Heading", "displayName": "Heading", "fullName": "IzzyBlazor.Heading", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA heading. \u003Ca href=\u0022cref:P:IzzyBlazor.Heading.Level\u0022\u003E\u003Ccode\u003ELevel\u003C/code\u003E\u003C/a\u003E sets the element (\u003Ccode\u003Eh1\u003C/code\u003E to \u003Ccode\u003Eh6\u003C/code\u003E) and a default size; \u003Ccode\u003ESize\u003C/code\u003E overrides the look without changing the document structure.\u003C/p\u003E", "remarks": "\u003Cp\u003EDefaults: bold, tight line height, balanced wrapping, no margins. Every default can be overridden with the typography props.\u003C/p\u003E\u003Cp\u003EIn an \u003Ca href=\u0022cref:T:IzzyBlazor.AppMain\u0022\u003E\u003Ccode\u003EAppMain\u003C/code\u003E\u003C/a\u003E on a page with an \u003Ca href=\u0022cref:T:IzzyBlazor.OnThisPage\u0022\u003E\u003Ccode\u003EOnThisPage\u003C/code\u003E\u003C/a\u003E, a heading gets an id from its text (unless it sets one) and is listed there; headings at the levels it lists also become links to themselves, with a \u0026quot;#\u0026quot; shown on hover, so a section can be linked.\u003C/p\u003E", "examples": [ "\u003CHeading Level=\u00221\u0022\u003EBuild a multi-step wizard\u003C/Heading\u003E\n\u003CHeading Level=\u00222\u0022 Size=\u0022new() { Base = TextSize.Xl2, Md = TextSize.Xl4 }\u0022\u003E...\u003C/Heading\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Heading.Level\u0022\u003E\u003Ccode\u003ELevel\u003C/code\u003E\u003C/a\u003E sets the element; \u003Ccode\u003ESize\u003C/code\u003E changes only the look, so keep levels in order, with one \u003Ccode\u003Eh1\u003C/code\u003E per page.\u003C/li\u003E\u003Cli\u003EIt doesn\u0026#39;t take \u003Ccode\u003EAs\u003C/code\u003E, so the element always matches the level; for text that only looks like a heading, use \u003Ca href=\u0022cref:T:IzzyBlazor.TextBlock\u0022\u003E\u003Ccode\u003ETextBlock\u003C/code\u003E\u003C/a\u003E.\u003C/li\u003E\u003Cli\u003EAn anchored heading\u0026#39;s text is the link, so the link\u0026#39;s name is the heading\u0026#39;s text; the \u0026quot;#\u0026quot; is CSS with empty alt text and isn\u0026#39;t read.\u003C/li\u003E\u003Cli\u003EEach anchored heading is a tab stop, and shows its focus ring and \u0026quot;#\u0026quot; on keyboard focus.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003EOutline=\u0026quot;false\u0026quot;\u003C/code\u003E leaves a heading out of the \u003Ca href=\u0022cref:T:IzzyBlazor.OnThisPage\u0022\u003E\u003Ccode\u003EOnThisPage\u003C/code\u003E\u003C/a\u003E and gives it no link; \u003Ccode\u003EAnchor=\u0026quot;false\u0026quot;\u003C/code\u003E removes only the link.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "TextBlock", "OnThisPage", "Prose" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Level", "type": "int", "default": "2", "summary": "\u003Cp\u003EThe heading level, 1 to 6, which sets the element (\u003Ccode\u003Eh1\u003C/code\u003E to \u003Ccode\u003Eh6\u003C/code\u003E). Defaults to 2.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Outline", "type": "bool", "default": "true", "summary": "\u003Cp\u003ELists the heading in the page\u0026#39;s \u003Ca href=\u0022cref:T:IzzyBlazor.OnThisPage\u0022\u003E\u003Ccode\u003EOnThisPage\u003C/code\u003E\u003C/a\u003E (when its level is one it lists). Defaults to true; false leaves it out and gives it no anchor link.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Anchor", "type": "bool?", "summary": "\u003Cp\u003EMakes the heading a link to itself, with a \u0026quot;#\u0026quot; on hover, so a section can be linked. By default, headings listed in an \u003Ca href=\u0022cref:T:IzzyBlazor.OnThisPage\u0022\u003E\u003Ccode\u003EOnThisPage\u003C/code\u003E\u003C/a\u003E are; true adds the link to any heading with an id, false removes it. A heading whose content holds a link or button of its own (an \u003Ccode\u003Ea\u003C/code\u003E, \u003Ccode\u003Ebutton\u003C/code\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.Anchor\u0022\u003E\u003Ccode\u003EAnchor\u003C/code\u003E\u003C/a\u003E or button component) never gets one, since links can\u0026#39;t nest. A heading holding a component that isn\u0026#39;t one of IzzyBlazor\u0026#39;s plain ones (\u003Ca href=\u0022cref:T:IzzyBlazor.Icon\u0022\u003E\u003Ccode\u003EIcon\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.Badge\u0022\u003E\u003Ccode\u003EBadge\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.Kbd\u0022\u003E\u003Ccode\u003EKbd\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.TextBlock\u0022\u003E\u003Ccode\u003ETextBlock\u003C/code\u003E\u003C/a\u003E) gets one only with true, since it might render a link. Set it as \u003Ccode\u003EAnchor=\u0026quot;true\u0026quot;\u003C/code\u003E: the attribute needs a value.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "Responsive\u003CTextSize\u003E", "summary": "\u003Cp\u003EFont size. Responsive.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "TextBase" }, { "name": "Weight", "type": "FontWeight?", "summary": "\u003Cp\u003EFont weight.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Family", "type": "FontFamily?", "summary": "\u003Cp\u003EFont family.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Align", "type": "Responsive\u003CTextAlign\u003E", "summary": "\u003Cp\u003EHorizontal alignment. Responsive.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "TextBase" }, { "name": "LineHeight", "type": "LineHeight?", "summary": "\u003Cp\u003ELine height.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "LetterSpacing", "type": "LetterSpacing?", "summary": "\u003Cp\u003ELetter spacing.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Transform", "type": "TextTransform?", "summary": "\u003Cp\u003ELetter case.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Decoration", "type": "TextDecoration?", "summary": "\u003Cp\u003EUnderline or strike-through.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Italic", "type": "bool", "default": "false", "summary": "\u003Cp\u003EItalic.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Wrap", "type": "TextWrap?", "summary": "\u003Cp\u003EHow lines break: normal, never, balanced or pretty.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Truncate", "type": "bool", "default": "false", "summary": "\u003Cp\u003EKeep to one line and end with an ellipsis when it does not fit.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "LineClamp", "type": "int?", "summary": "\u003Cp\u003EShow at most this many lines, ending with an ellipsis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "TabularNums", "type": "bool", "default": "false", "summary": "\u003Cp\u003EEqual-width digits, so numbers line up in columns and do not jitter when they change.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "MinSize", "type": "TextSize?", "summary": "\u003Cp\u003EMakes the size fluid: the text is \u003Ca href=\u0022cref:P:IzzyBlazor.TextBase.MinSize\u0022\u003E\u003Ccode\u003EMinSize\u003C/code\u003E\u003C/a\u003E on a 360px screen and grows smoothly to \u003Ca href=\u0022cref:P:IzzyBlazor.TextBase.Size\u0022\u003E\u003Ccode\u003ESize\u003C/code\u003E\u003C/a\u003E at 1280px and up, as for a hero heading: \u003Ccode\u003E\u0026lt;Heading Size=\u0026quot;TextSize.Xl5\u0026quot; MinSize=\u0026quot;TextSize.Xl3\u0026quot;\u0026gt;\u003C/code\u003E. Replaces per-breakpoint sizes: with them, it grows to the size for the widest breakpoint given.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "FontFamily", "FontWeight", "LetterSpacing", "LineHeight", "TextAlign", "TextDecoration", "TextSize", "TextTransform", "TextWrap" ] }, { "name": "Highlight", "displayName": "Highlight", "fullName": "IzzyBlazor.Highlight", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EText with the words of a search marked: each match in a \u003Ccode\u003Emark\u003C/code\u003E, for search results, a filtered list or a table filtered by a \u003Ca href=\u0022cref:T:IzzyBlazor.FilterForm\u0022\u003E\u003Ccode\u003EFilterForm\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "remarks": "\u003Cp\u003EThe query is split into words at spaces and punctuation, and each word is marked wherever it matches, ignoring case. By default a word matches the start of a word in the text, and the words inside a name written in PascalCase count: \u0026quot;field\u0026quot; marks the \u0026quot;Field\u0026quot; of \u0026quot;TextField\u0026quot;. Overlapping matches are marked as one.\u003C/p\u003E", "examples": [ "\u003CHighlight Text=\u0022@product.Name\u0022 Query=\u0022@Query\u0022 /\u003E\n\u003CHighlight Text=\u0022@product.Description\u0022 Query=\u0022@Query\u0022 Match=\u0022HighlightMatch.Anywhere\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EThe text stays one run of text; matches are \u003Ccode\u003Emark\u003C/code\u003E elements inside it, which some screen readers announce as highlighted.\u003C/li\u003E\u003Cli\u003EThe marks are a tint behind the text, which keeps its color, so the contrast is the text\u0026#39;s own.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "FilterForm", "Table" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Text", "type": "string?", "summary": "\u003Cp\u003EThe text to show.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false, "addedIn": "0.1.0-alpha.15" }, { "name": "Query", "type": "string?", "summary": "\u003Cp\u003EThe search whose words are marked. Empty or blank marks nothing.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.15" }, { "name": "Match", "type": "HighlightMatch", "default": "HighlightMatch.WordStart", "summary": "\u003Cp\u003EWhere a word of the query may match: at the start of a word (the default) or anywhere.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.15" } ], "events": [], "methods": [], "types": [ "HighlightMatch" ], "addedIn": "0.1.0-alpha.15" }, { "name": "Icon", "displayName": "Icon", "fullName": "IzzyBlazor.Icon", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ERenders an icon as inline SVG on the server: no font or script to load, works on static pages, and follows the text color and size around it.\u003C/p\u003E", "examples": [ "\u003CIcon Name=\u0022Lucide.House\u0022 /\u003E\n\u003CIcon Name=\u0022Lucide.TriangleAlert\u0022 Size=\u0022IconSize.Lg\u0022 Color=\u0022Color.WarningText\u0022 Label=\u0022Warning\u0022 /\u003E\n\u003CIcon Role=\u0022IconRole.Close\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EWithout a \u003Ca href=\u0022cref:P:IzzyBlazor.Icon.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E it\u0026#39;s decorative: \u003Ccode\u003Earia-hidden=\u0026quot;true\u0026quot;\u003C/code\u003E, which is right when visible text sits next to it.\u003C/li\u003E\u003Cli\u003EWith a \u003Ca href=\u0022cref:P:IzzyBlazor.Icon.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E it\u0026#39;s \u003Ccode\u003Erole=\u0026quot;img\u0026quot;\u003C/code\u003E named by the label; give one to an icon that stands alone and means something.\u003C/li\u003E\u003Cli\u003EIt never takes focus. An action shown only as an icon needs a button with a name: use \u003Ca href=\u0022cref:T:IzzyBlazor.IconButton\u0022\u003E\u003Ccode\u003EIconButton\u003C/code\u003E\u003C/a\u003E.\u003C/li\u003E\u003Cli\u003EWith reduced motion set, \u003Ca href=\u0022cref:P:IzzyBlazor.Icon.Spin\u0022\u003E\u003Ccode\u003ESpin\u003C/code\u003E\u003C/a\u003E slows down rather than stops, since the spin says \u0026quot;still working\u0026quot;.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "IconButton", "Badge", "Image" ], "bases": [ "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Name", "type": "IconData?", "summary": "\u003Cp\u003EThe icon to show, such as \u003Ccode\u003ELucide.House\u003C/code\u003E. Set this or \u003Ca href=\u0022cref:P:IzzyBlazor.Icon.Role\u0022\u003E\u003Ccode\u003ERole\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Role", "type": "IconRole?", "summary": "\u003Cp\u003EA purpose such as \u003Ca href=\u0022cref:F:IzzyBlazor.IconRole.Close\u0022\u003E\u003Ccode\u003EIconRole.Close\u003C/code\u003E\u003C/a\u003E, resolved through the current icon set. Set this or \u003Ca href=\u0022cref:P:IzzyBlazor.Icon.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "IconSize", "default": "IconSize.Md", "summary": "\u003Cp\u003ESize relative to the surrounding text. Defaults to the text size (1em).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Color", "type": "Responsive\u003CColor\u003E", "default": "computed", "summary": "\u003Cp\u003EColor. Defaults to the surrounding text color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EAccessible name. When set, the icon is announced as an image with this label; when not, it is decorative and hidden from assistive technology.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StrokeWidth", "type": "double?", "summary": "\u003Cp\u003EOverrides the stroke width of outlined icons (IzzyBlazor draws Lucide at 1.5).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Spin", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERotates continuously, for loading indicators. Respects reduced-motion settings.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Color", "IconRole", "IconSize" ] }, { "name": "IconButton", "displayName": "IconButton", "fullName": "IzzyBlazor.IconButton", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA square button showing one icon. \u003Ca href=\u0022cref:P:IzzyBlazor.IconButton.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E is required: it becomes the accessible name and the hover tooltip, so an icon-only button is never unlabeled.\u003C/p\u003E", "examples": [ "\u003CIconButton Icon=\u0022Lucide.Pencil\u0022 Label=\u0022Edit\u0022 Variant=\u0022ButtonVariant.Ghost\u0022 Accent=\u0022Accent.Neutral\u0022 /\u003E\n\u003CIconButton Icon=\u0022Lucide.ExternalLink\u0022 Label=\u0022Open the docs\u0022 Href=\u0022https://example.com/docs\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Ebutton\u003C/code\u003E, or an \u003Ccode\u003Ea\u003C/code\u003E with \u003Ca href=\u0022cref:P:IzzyBlazor.IconButton.Href\u0022\u003E\u003Ccode\u003EHref\u003C/code\u003E\u003C/a\u003E, so Enter, Space and focus work as the browser defines them.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.IconButton.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E is required and becomes its \u003Ccode\u003Earia-label\u003C/code\u003E; the icon itself is hidden from screen readers.\u003C/li\u003E\u003Cli\u003EThe tooltip is the native \u003Ccode\u003Etitle\u003C/code\u003E, so it shows on mouse hover, not on keyboard focus. Inside a \u003Ca href=\u0022cref:T:IzzyBlazor.Tooltip\u0022\u003E\u003Ccode\u003ETooltip\u003C/code\u003E\u003C/a\u003E it has none, and the Tooltip shows on hover and focus.\u003C/li\u003E\u003Cli\u003EA loading button (not a link) keeps focus and sets \u003Ccode\u003Earia-busy\u003C/code\u003E and \u003Ccode\u003Earia-disabled\u003C/code\u003E; screen readers hear \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.LoadingLabel\u0022\u003E\u003Ccode\u003ELoadingLabel\u003C/code\u003E\u003C/a\u003E before the label (\u0026quot;Loading Delete\u0026quot;).\u003C/li\u003E\u003Cli\u003EA disabled or loading link loses its \u003Ccode\u003Ehref\u003C/code\u003E, keeps \u003Ccode\u003Erole=\u0026quot;link\u0026quot;\u003C/code\u003E and sets \u003Ccode\u003Earia-disabled\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EA toggle (\u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Pressed\u0022\u003E\u003Ccode\u003EPressed\u003C/code\u003E\u003C/a\u003E) sets \u003Ccode\u003Earia-pressed\u003C/code\u003E, so screen readers hear \u0026quot;pressed\u0026quot; or \u0026quot;not pressed\u0026quot;; pressed, it shows an edge in the accent color as well as a tint.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Button", "ButtonGroup", "Tooltip", "CopyButton" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Icon", "type": "IconData", "summary": "\u003Cp\u003EThe icon.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EWhat the button does, for screen readers and the tooltip.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003ERenders a link to this URL instead of a button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Submit", "type": "bool", "default": "false", "summary": "\u003Cp\u003ESubmits the form it\u0026#39;s in (or \u003Ca href=\u0022cref:P:IzzyBlazor.IconButton.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E), when it\u0026#39;s a button (not a link), like \u003Ccode\u003Etype=\u0026quot;submit\u0026quot;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Reset", "type": "bool", "default": "false", "summary": "\u003Cp\u003EResets the form it\u0026#39;s in, when it\u0026#39;s a button, like \u003Ccode\u003Etype=\u0026quot;reset\u0026quot;\u003C/code\u003E. Can\u0026#39;t be combined with \u003Ca href=\u0022cref:P:IzzyBlazor.IconButton.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EPosted with the form as \u003Ccode\u003EName=Value\u003C/code\u003E when this button submits it, so one handler can tell which button was pressed, such as which row\u0026#39;s Delete. Not \u003Ccode\u003Eaction\u003C/code\u003E, \u003Ccode\u003Emethod\u003C/code\u003E or \u003Ccode\u003Etarget\u003C/code\u003E: a control with one of those names hides the form\u0026#39;s own property, and Blazor\u0026#39;s enhanced form handling then posts to the wrong address.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value posted with \u003Ca href=\u0022cref:P:IzzyBlazor.IconButton.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "FormAction", "type": "string?", "summary": "\u003Cp\u003ESubmits to this URL instead of the form\u0026#39;s own action (native \u003Ccode\u003Eformaction\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Form", "type": "string?", "summary": "\u003Cp\u003EThe id of a form elsewhere on the page that this button submits (native \u003Ccode\u003Eform\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Accent", "type": "Accent", "default": "Accent.Primary", "summary": "\u003Cp\u003EPrimary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (\u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E, \u003Ccode\u003EAccent.Token(\u0026quot;brand\u0026quot;)\u003C/code\u003E); text on a custom color is chosen for contrast. Emphasis comes from \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Variant\u0022\u003E\u003Ccode\u003EVariant\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Solid", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Solid\u0022\u003E\u003Ccode\u003EButtonVariant.Solid\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "EndIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon after the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches to the full width of its container.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Loading", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows a spinner in place of the start icon and blocks further clicks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "LoadingLabel", "type": "string?", "default": "\u0022Loading\u0022", "summary": "\u003Cp\u003ERead to screen readers while \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Loading\u0022\u003E\u003Ccode\u003ELoading\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Loading\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" }, { "name": "Pressed", "type": "bool?", "summary": "\u003Cp\u003EMakes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (\u003Ccode\u003Earia-pressed\u003C/code\u003E). With \u003Ccode\u003E@bind-Pressed\u003C/code\u003E a click turns it on and off on interactive pages; on static pages the server decides, as with a submit button\u0026#39;s \u003Ccode\u003EName\u003C/code\u003E and \u003Ccode\u003EValue\u003C/code\u003E. Null (the default) is an ordinary button. Not for links.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.14", "declaredOn": "ButtonBase" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ButtonBase" } ], "events": [ { "name": "OnClick", "type": "EventCallback\u003CMouseEventArgs\u003E", "summary": "\u003Cp\u003ERuns on click on interactive pages (a link still navigates).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" } } ], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize" ] }, { "name": "Image", "displayName": "Image", "fullName": "IzzyBlazor.Image", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EAn image that loads lazily and keeps its space while loading: \u003Ccode\u003Ewidth\u003C/code\u003E and \u003Ccode\u003Eheight\u003C/code\u003E or a \u003Ca href=\u0022cref:P:IzzyBlazor.Image.Ratio\u0022\u003E\u003Ccode\u003ERatio\u003C/code\u003E\u003C/a\u003E reserve the box, so the page doesn\u0026#39;t jump. \u003Ca href=\u0022cref:P:IzzyBlazor.Image.Caption\u0022\u003E\u003Ccode\u003ECaption\u003C/code\u003E\u003C/a\u003E wraps it in a \u003Ccode\u003Efigure\u003C/code\u003E.\u003C/p\u003E", "examples": [ "\u003CImage Src=\u0022/shots/console.png\u0022 Alt=\u0022The rules list\u0022 Ratio=\u002216 / 9.0\u0022 Radius=\u0022Radius.Lg\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Eimg\u003C/code\u003E whose \u003Ccode\u003Ealt\u003C/code\u003E is \u003Ca href=\u0022cref:P:IzzyBlazor.Image.Alt\u0022\u003E\u003Ccode\u003EAlt\u003C/code\u003E\u003C/a\u003E, a required parameter: say what the picture shows.\u003C/li\u003E\u003Cli\u003EPass \u003Ccode\u003EAlt=\u0026quot;\u0026quot;\u003C/code\u003E for a purely decorative image, so screen readers skip it.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Image.Caption\u0022\u003E\u003Ccode\u003ECaption\u003C/code\u003E\u003C/a\u003E wraps it in a \u003Ccode\u003Efigure\u003C/code\u003E with a \u003Ccode\u003Efigcaption\u003C/code\u003E; screen readers read both, so don\u0026#39;t repeat the caption in \u003Ca href=\u0022cref:P:IzzyBlazor.Image.Alt\u0022\u003E\u003Ccode\u003EAlt\u003C/code\u003E\u003C/a\u003E.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "AspectRatio", "Avatar", "VideoEmbed" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Src", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe image URL.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Alt", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EWhat the image shows, for screen readers and when it fails to load. Use \u0026quot;\u0026quot; for a purely decorative image.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "IntrinsicWidth", "type": "int?", "summary": "\u003Cp\u003EThe image\u0026#39;s own width in pixels, so the browser reserves its space before it loads.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "IntrinsicHeight", "type": "int?", "summary": "\u003Cp\u003EThe image\u0026#39;s own height in pixels. See \u003Ca href=\u0022cref:P:IzzyBlazor.Image.IntrinsicWidth\u0022\u003E\u003Ccode\u003EIntrinsicWidth\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Ratio", "type": "double?", "summary": "\u003Cp\u003EA shape to show it in, width over height, such as \u003Ccode\u003E16 / 9.0\u003C/code\u003E or \u003Ccode\u003E1\u003C/code\u003E; the image fills it per \u003Ca href=\u0022cref:P:IzzyBlazor.Image.Fit\u0022\u003E\u003Ccode\u003EFit\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Fit", "type": "ImageFit", "default": "ImageFit.Cover", "summary": "\u003Cp\u003EHow it fills a \u003Ca href=\u0022cref:P:IzzyBlazor.Image.Ratio\u0022\u003E\u003Ccode\u003ERatio\u003C/code\u003E\u003C/a\u003E of a different shape. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ImageFit.Cover\u0022\u003E\u003Ccode\u003EImageFit.Cover\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lazy", "type": "bool", "default": "true", "summary": "\u003Cp\u003ELoads only when the image nears the screen. Defaults to true; set false for the first image on a page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Caption", "type": "string?", "summary": "\u003Cp\u003EA caption under the image; wraps it in a \u003Ccode\u003Efigure\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ImageFit" ] }, { "name": "IzzyTheme", "displayName": "IzzyTheme", "fullName": "IzzyBlazor.IzzyTheme", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe theme in one place. For the app, put it in App.razor\u0026#39;s \u003Ccode\u003E\u0026lt;head\u0026gt;\u003C/code\u003E:\u003C/p\u003E", "remarks": "\u003Cp\u003EPreset sets density, shape and type; Brand, Gray, Radius, Density and the fonts override its defaults; ColorScheme is the default light or dark. Brand and Gray take a built-in name or a hex color. Everything is server-rendered (meta tags the theme CSS matches, and a small \u003Ccode\u003E\u0026lt;style\u0026gt;\u003C/code\u003E block for hex colors and the fonts), so it\u0026#39;s in place on first paint, needs no script and works in every render mode.\u003C/p\u003E\u003Cp\u003EWith content, it themes that part of the page instead, in a div: Brand, a built-in Gray, Radius, Density, Preset (shape, density and depth only) and ColorScheme; what it doesn\u0026#39;t set comes from around it. Fonts, HeadingWeight and a hex Gray are app-wide only. For one exact value, use CSS: its variable in your stylesheet, or Style and Class on a nested IzzyTheme (izzyblazor.com/docs/theming/tokens).\u003C/p\u003E", "examples": [ "\u003CIzzyTheme Preset=\u0022ThemePreset.Compact\u0022 Brand=\u0022#0a7d5a\u0022 BodyFont=\u0022Inter, sans-serif\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders nothing people interact with: tags in the \u003Ccode\u003Ehead\u003C/code\u003E, or a \u003Ccode\u003Ediv\u003C/code\u003E around its content.\u003C/li\u003E\u003Cli\u003EWith \u003Ccode\u003EColorScheme\u003C/code\u003E unset the page follows the device\u0026#39;s light or dark setting, and a choice made with a ColorSchemeSwitch wins over the default.\u003C/li\u003E\u003Cli\u003EIt sets CSS \u003Ccode\u003Ecolor-scheme\u003C/code\u003E, so the browser\u0026#39;s own controls and scrollbars match the scheme.\u003C/li\u003E\u003Cli\u003EA hex \u003Ccode\u003EBrand\u003C/code\u003E is adjusted until text on it, and the accent as text, reach 4.5:1 contrast; a hex \u003Ccode\u003EGray\u003C/code\u003E keeps muted text at 4.5:1 or more on the page and surfaces.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "ColorSchemeSwitch", "AppShell" ], "bases": [], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Preset", "type": "ThemePreset?", "summary": "\u003Cp\u003EThe starting set of defaults: density, shape and type, and a default accent and gray, which the other settings override. Unset: Standard.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Brand", "type": "string?", "summary": "\u003Cp\u003EThe brand color, over the preset\u0026#39;s: a hex color (\u003Ccode\u003E\u0026quot;#0a7d5a\u0026quot;\u003C/code\u003E), from which the fill, the text on it, the accent as text and the soft tint are derived in light and dark, each pair at AA (see \u003Ca href=\u0022cref:T:IzzyBlazor.BrandPalette\u0022\u003E\u003Ccode\u003EBrandPalette\u003C/code\u003E\u003C/a\u003E); or a built-in, hand-tuned one: \u003Ccode\u003Eblue\u003C/code\u003E (the default), \u003Ccode\u003Eink\u003C/code\u003E (monochrome), \u003Ccode\u003Eindigo\u003C/code\u003E, \u003Ccode\u003Eviolet\u003C/code\u003E, \u003Ccode\u003Eteal\u003C/code\u003E, \u003Ccode\u003Egreen\u003C/code\u003E, \u003Ccode\u003Erose\u003C/code\u003E. \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Primary\u0022\u003E\u003Ccode\u003EPrimary\u003C/code\u003E\u003C/a\u003E controls are painted with it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Gray", "type": "string?", "summary": "\u003Cp\u003EThe grays (page, surfaces, fills, borders and text), over the preset\u0026#39;s: a built-in set, \u003Ccode\u003Eneutral\u003C/code\u003E (the default), \u003Ccode\u003Eslate\u003C/code\u003E (cool) or \u003Ccode\u003Estone\u003C/code\u003E (warm paper); or a hex color for your light page background (\u003Ccode\u003E\u0026quot;#f4efe6\u0026quot;\u003C/code\u003E), from which the rest is derived with contrast checked (see \u003Ca href=\u0022cref:T:IzzyBlazor.GrayPalette\u0022\u003E\u003Ccode\u003EGrayPalette\u003C/code\u003E\u003C/a\u003E). A hex gray is app-wide only.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Radius", "type": "ThemeRadius?", "summary": "\u003Cp\u003EThe radius scale, over the preset\u0026#39;s.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Density", "type": "ThemeDensity?", "summary": "\u003Cp\u003EControl heights, table rows and card padding, over the preset\u0026#39;s.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "BodyFont", "type": "string?", "summary": "\u003Cp\u003EThe body font, as a CSS font-family list (\u003Ccode\u003E\u0026quot;Sora, system-ui, sans-serif\u0026quot;\u003C/code\u003E). Inter, served with IzzyBlazor, when unset. Load any other font yourself; end the list with a generic family so text shows while it loads.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HeadingFont", "type": "string?", "summary": "\u003Cp\u003EThe font for headings, card and dialog titles, as a CSS font-family list. Unset: the preset\u0026#39;s (the body font, or Newsreader in Editorial).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MonoFont", "type": "string?", "summary": "\u003Cp\u003EThe font for code, Kbd and the color picker\u0026#39;s hex box, as a CSS font-family list, such as \u003Ccode\u003E\u0026quot;\u0026#39;JetBrains Mono\u0026#39;, ui-monospace, monospace\u0026quot;\u003C/code\u003E. Unset: the system\u0026#39;s monospace font.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HeadingWeight", "type": "int?", "summary": "\u003Cp\u003EThe headings\u0026#39; weight, 100 to 900. Unset: semibold (600).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ColorScheme", "type": "ColorScheme?", "summary": "\u003Cp\u003EThe color scheme until the user picks one with a \u003Ca href=\u0022cref:T:IzzyBlazor.ColorSchemeSwitch\u0022\u003E\u003Ccode\u003EColorSchemeSwitch\u003C/code\u003E\u003C/a\u003E (their choice, kept in the \u003Ccode\u003Eib-scheme\u003C/code\u003E cookie, wins). Unset or \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Auto\u0022\u003E\u003Ccode\u003EColorScheme.Auto\u003C/code\u003E\u003C/a\u003E: follow the device. \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Inverse\u0022\u003E\u003Ccode\u003EColorScheme.Inverse\u003C/code\u003E\u003C/a\u003E is for part of a page only.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Scrollbars", "type": "ThemeScrollbars?", "summary": "\u003Cp\u003EWhose scrollbars the app uses. Unset or \u003Ca href=\u0022cref:F:IzzyBlazor.ThemeScrollbars.Auto\u0022\u003E\u003Ccode\u003EThemeScrollbars.Auto\u003C/code\u003E\u003C/a\u003E: the system\u0026#39;s on the page, thin themed ones in the library\u0026#39;s scroll areas. \u003Ca href=\u0022cref:F:IzzyBlazor.ThemeScrollbars.Themed\u0022\u003E\u003Ccode\u003EThemeScrollbars.Themed\u003C/code\u003E\u003C/a\u003E puts the thin ones on the page too (always visible); \u003Ca href=\u0022cref:F:IzzyBlazor.ThemeScrollbars.Native\u0022\u003E\u003Ccode\u003EThemeScrollbars.Native\u003C/code\u003E\u003C/a\u003E uses the system\u0026#39;s everywhere. App-wide only.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Nonce", "type": "string?", "summary": "\u003Cp\u003EA CSP nonce for the style element, if your Content-Security-Policy needs one. Toolbars on the page use it too.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part of the page to theme. Unset: the theme is the app\u0026#39;s (put it in \u003Ccode\u003E\u0026lt;head\u0026gt;\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Class", "type": "string?", "summary": "\u003Cp\u003EClasses for the part\u0026#39;s div, such as one that sets CSS variables in your stylesheet.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Style", "type": "string?", "summary": "\u003Cp\u003EInline style for the part\u0026#39;s div, such as \u003Ccode\u003E\u0026quot;--ib-card-padding: 1rem\u0026quot;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ColorScheme", "ThemeDensity", "ThemePreset", "ThemeRadius", "ThemeScrollbars" ] }, { "name": "Kbd", "displayName": "Kbd", "fullName": "IzzyBlazor.Kbd", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA key or a key combination, as people type it: \u003Ccode\u003Ekbd\u003C/code\u003E elements, nested for a combination the way the HTML spec describes. Sized in em, so it fits the text around it.\u003C/p\u003E", "examples": [ "Press \u003CKbd\u003EEsc\u003C/Kbd\u003E to close.\n\u003CKbd Keys=\u0022Ctrl\u002BK\u0022 /\u003E\n\u003CKbd Keys=\u0022\u2318\u002BShift\u002BP\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Ekbd\u003C/code\u003E; a combination is a \u003Ccode\u003Ekbd\u003C/code\u003E holding one \u003Ccode\u003Ekbd\u003C/code\u003E per key, as the HTML spec describes.\u003C/li\u003E\u003Cli\u003EKeys and the \u003Ca href=\u0022cref:P:IzzyBlazor.Kbd.Separator\u0022\u003E\u003Ccode\u003ESeparator\u003C/code\u003E\u003C/a\u003E are plain text, so screen readers read them as written.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Code", "Tooltip" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EOne key, such as \u0026quot;Esc\u0026quot;. For a combination, use \u003Ca href=\u0022cref:P:IzzyBlazor.Kbd.Keys\u0022\u003E\u003Ccode\u003EKeys\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Keys", "type": "string?", "summary": "\u003Cp\u003EA combination, keys joined with \u0026quot;\u002B\u0026quot;, such as \u0026quot;Ctrl\u002BK\u0026quot; or \u0026quot;Ctrl\u002BShift\u002BP\u0026quot;. Spaces around the \u0026quot;\u002B\u0026quot; are ignored, and a \u0026quot;\u002B\u0026quot; at the end is the plus key (\u0026quot;Ctrl\u002B\u002B\u0026quot;). Each key gets its own box. Empty or blank falls back to \u003Ca href=\u0022cref:P:IzzyBlazor.Kbd.ChildContent\u0022\u003E\u003Ccode\u003EChildContent\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Separator", "type": "string", "default": "\u0022\u002B\u0022", "summary": "\u003Cp\u003EWhat\u0026#39;s shown between the keys of a combination. Defaults to \u0026quot;\u002B\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "List", "displayName": "List", "fullName": "IzzyBlazor.List", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA bulleted, numbered or icon list of \u003Ca href=\u0022cref:T:IzzyBlazor.ListItem\u0022\u003E\u003Ccode\u003EListItem\u003C/code\u003E\u003C/a\u003Es, spaced with \u003Ca href=\u0022cref:P:IzzyBlazor.List.Gap\u0022\u003E\u003Ccode\u003EGap\u003C/code\u003E\u003C/a\u003E. \u003Ccode\u003E\u0026lt;List Icon=\u0026quot;Lucide.Check\u0026quot; IconColor=\u0026quot;Color.SuccessText\u0026quot;\u0026gt;\u003C/code\u003E makes a check list.\u003C/p\u003E", "examples": [ "\u003CList Icon=\u0022Lucide.Check\u0022 IconColor=\u0022Color.SuccessText\u0022\u003E\n \u003CListItem\u003EUnlimited projects\u003C/ListItem\u003E\n \u003CListItem\u003EPriority support\u003C/ListItem\u003E\n\u003C/List\u003E\n\n\u003CList Ordered\u003E\n \u003CListItem\u003EInstall the package.\u003C/ListItem\u003E\n \u003CListItem\u003EAdd IzzyTheme to App.razor.\u003C/ListItem\u003E\n\u003C/List\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Eul\u003C/code\u003E, or an \u003Ccode\u003Eol\u003C/code\u003E when \u003Ca href=\u0022cref:P:IzzyBlazor.List.Ordered\u0022\u003E\u003Ccode\u003EOrdered\u003C/code\u003E\u003C/a\u003E, of \u003Ccode\u003Eli\u003C/code\u003E items, so screen readers announce a list and its count.\u003C/li\u003E\u003Cli\u003ELists without bullets (\u003Ca href=\u0022cref:P:IzzyBlazor.List.Plain\u0022\u003E\u003Ccode\u003EPlain\u003C/code\u003E\u003C/a\u003E or an \u003Ca href=\u0022cref:P:IzzyBlazor.List.Icon\u0022\u003E\u003Ccode\u003EIcon\u003C/code\u003E\u003C/a\u003E) keep \u003Ccode\u003Erole=\u0026quot;list\u0026quot;\u003C/code\u003E, which Safari otherwise drops from a list with no markers.\u003C/li\u003E\u003Cli\u003EItem icons are decorative and hidden from screen readers, so the item\u0026#39;s text must carry the meaning, such as \u0026quot;Included\u0026quot; or \u0026quot;Not included\u0026quot;.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "DescriptionList", "Prose", "Timeline" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Ordered", "type": "bool", "default": "false", "summary": "\u003Cp\u003EA numbered list (\u003Ccode\u003Eol\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Plain", "type": "bool", "default": "false", "summary": "\u003Cp\u003ENo bullets or numbers, and no indent.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon in place of each bullet, such as \u003Ccode\u003ELucide.Check\u003C/code\u003E. An item\u0026#39;s own icon wins.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "IconColor", "type": "Color?", "default": "computed", "summary": "\u003Cp\u003EThe icons\u0026#39; color. Defaults to the text color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Gap", "type": "Responsive\u003Cint\u003E", "default": "2", "summary": "\u003Cp\u003ESpace between items, on the spacing scale. Defaults to 2 (8px).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "As", "type": "string", "default": "\u0022ul\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Color" ] }, { "name": "ListItem", "displayName": "ListItem", "fullName": "IzzyBlazor.ListItem", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EAn item in a \u003Ca href=\u0022cref:P:IzzyBlazor.ListItem.List\u0022\u003E\u003Ccode\u003EList\u003C/code\u003E\u003C/a\u003E: a \u003Ccode\u003Eli\u003C/code\u003E, with the list\u0026#39;s icon or its own.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon for this item, in place of the list\u0026#39;s.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "IconColor", "type": "Color?", "summary": "\u003Cp\u003EThis item\u0026#39;s icon color, in place of the list\u0026#39;s.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Color" ] }, { "name": "Menu", "displayName": "Menu", "fullName": "IzzyBlazor.Menu", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA dropdown of actions or links, built on the Popover API: a button with popovertarget opens a [popover] panel in the top layer. Opening, Escape and clicking outside are all native, so the menu works with JavaScript off. The script adds arrow-key navigation and positioning in browsers without CSS anchor positioning.\u003C/p\u003E", "remarks": "\u003Cp\u003EA custom trigger takes the wiring attributes as its context:\u003C/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;Menu\u0026gt;\n \u0026lt;Trigger\u0026gt;\u0026lt;IconButton Icon=\u0026quot;Lucide.Ellipsis\u0026quot; Label=\u0026quot;More\u0026quot; @attributes=\u0026quot;context\u0026quot; /\u0026gt;\u0026lt;/Trigger\u0026gt;\n ...\n\u0026lt;/Menu\u0026gt;\u003C/code\u003E\u003C/pre\u003E", "examples": [ "\u003CMenu Label=\u0022Options\u0022\u003E\n \u003CMenuItem Href=\u0022/settings\u0022 Icon=\u0022Lucide.Settings\u0022\u003ESettings\u003C/MenuItem\u003E\n \u003CMenuDivider /\u003E\n \u003CMenuItem Submit FormAction=\u0022/logout\u0022 Icon=\u0022Lucide.LogOut\u0022\u003ESign out\u003C/MenuItem\u003E\n\u003C/Menu\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EWith script, it\u0026#39;s a \u003Ccode\u003Emenu\u003C/code\u003E named by its trigger, with \u003Ccode\u003Emenuitem\u003C/code\u003E, \u003Ccode\u003Emenuitemcheckbox\u003C/code\u003E and \u003Ccode\u003Emenuitemradio\u003C/code\u003E items (\u003Ccode\u003Earia-checked\u003C/code\u003E); a MenuGroup is a \u003Ccode\u003Egroup\u003C/code\u003E named by its \u003Ccode\u003ELabel\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EOpening it focuses the first item; Down and Up on the trigger open it at the first or last. Escape closes it, and focus goes back to the trigger.\u003C/li\u003E\u003Cli\u003EDown and Up move through the items and wrap, Home and End go to the ends, typing jumps to the next item starting with those letters, and Tab closes the menu. Disabled items are skipped.\u003C/li\u003E\u003Cli\u003ERight opens a MenuSub and focuses its first item; Left closes it (the other way round on right-to-left pages).\u003C/li\u003E\u003Cli\u003EWith JavaScript off, items are plain links and buttons with no menu roles; a checked one has \u003Ccode\u003Earia-pressed\u003C/code\u003E (buttons) or \u003Ccode\u003Earia-current\u003C/code\u003E (links).\u003C/li\u003E\u003Cli\u003EA custom \u003Ccode\u003ETrigger\u003C/code\u003E needs a name of its own, such as an IconButton\u0026#39;s \u003Ccode\u003ELabel\u003C/code\u003E. A \u003Ccode\u003EShortcut\u003C/code\u003E is display only: the app handles the keys.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Popover", "NavMenu", "ButtonGroup", "IconButton" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the menu opens and closes, but arrow keys and type-ahead don\u0027t move between items." }, "properties": [ { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent", "default": "Accent.Neutral", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s color. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Neutral\u0022\u003E\u003Ccode\u003ENeutral\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Outline", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Outline\u0022\u003E\u003Ccode\u003EButtonVariant.Outline\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s size.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the default trigger\u0026#39;s text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Trigger", "type": "RenderFragment\u003CIReadOnlyDictionary\u003Cstring, object\u003E\u003E?", "summary": "\u003Cp\u003EA custom trigger in place of the default button. Its context holds the attributes that wire it to the menu; pass them on with \u003Ccode\u003E@attributes=\u0026quot;context\u0026quot;\u003C/code\u003E. It must be a \u003Ccode\u003Ebutton\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placement", "type": "Placement", "default": "Placement.BottomStart", "summary": "\u003Cp\u003EWhere the menu opens. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Placement.BottomStart\u0022\u003E\u003Ccode\u003EPlacement.BottomStart\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PanelWidth", "type": "Length?", "default": "computed", "summary": "\u003Cp\u003EThe width of the menu panel, such as \u003Ccode\u003ELength.Rem(16)\u003C/code\u003E for a column of long labels. Defaults to the content\u0026#39;s width, at least 10rem and the trigger\u0026#39;s width, up to 24rem. Never wider than the screen.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe \u003Ca href=\u0022cref:T:IzzyBlazor.MenuItem\u0022\u003E\u003Ccode\u003EMenuItem\u003C/code\u003E\u003C/a\u003Es, \u003Ca href=\u0022cref:T:IzzyBlazor.MenuGroup\u0022\u003E\u003Ccode\u003EMenuGroup\u003C/code\u003E\u003C/a\u003Es and \u003Ca href=\u0022cref:T:IzzyBlazor.MenuDivider\u0022\u003E\u003Ccode\u003EMenuDivider\u003C/code\u003E\u003C/a\u003Es.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Open", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it is open. Use \u003Ccode\u003E@bind-Open\u003C/code\u003E to follow changes on interactive pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" } ], "events": [], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize", "Length", "Placement" ] }, { "name": "MenuDivider", "displayName": "MenuDivider", "fullName": "IzzyBlazor.MenuDivider", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA line between groups of items in a Menu.\u003C/p\u003E", "bases": [], "properties": [], "events": [], "methods": [], "types": [] }, { "name": "MenuGroup", "displayName": "MenuGroup", "fullName": "IzzyBlazor.MenuGroup", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA labeled section of a Menu.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe section heading.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe section\u0026#39;s \u003Ca href=\u0022cref:T:IzzyBlazor.MenuItem\u0022\u003E\u003Ccode\u003EMenuItem\u003C/code\u003E\u003C/a\u003Es.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "MenuItem", "displayName": "MenuItem", "fullName": "IzzyBlazor.MenuItem", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EOne entry in a Menu. Three kinds, so items act on static pages too:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003EHref: a link.\u003C/li\u003E\u003Cli\u003ESubmit: posts the surrounding form (or Form=\u0026quot;id\u0026quot;), optionally to FormAction.\u003C/li\u003E\u003Cli\u003EOnClick: runs C# on interactive pages; the item closes the menu natively.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003ECheckable: @bind-Checked makes it a checkbox item (menuitemcheckbox). Inside a MenuRadioGroup it\u0026#39;s one of a set (menuitemradio), identified by Value. On static pages the action still comes from Href or a form post, and the server decides what\u0026#39;s checked.\u003C/p\u003E\u003Cp\u003EMenu roles promise arrow keys, which need the script. So static pages render them as data-ib-* attributes, and \u003Ccode\u003E\u0026lt;ib-popover\u0026gt;\u003C/code\u003E turns them into roles when it adds the keys; with JavaScript off, items are plain links and buttons, a checked one marked aria-pressed (buttons) or aria-current (links). Interactive pages always have the script, so they render the roles directly.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EMakes the item a link to this URL.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Submit", "type": "bool", "default": "false", "summary": "\u003Cp\u003EFor button items: posts the surrounding form (or \u003Ccode\u003EForm\u003C/code\u003E), optionally to \u003Ccode\u003EFormAction\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Checked", "type": "bool?", "summary": "\u003Cp\u003EMakes this a checkbox item that shows a check when true, with \u003Ccode\u003E@bind-Checked\u003C/code\u003E on interactive pages. Null (the default) is an ordinary item.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EPosted as \u003Ccode\u003EName=Value\u003C/code\u003E when a submit item is chosen. Not \u003Ccode\u003Eaction\u003C/code\u003E, \u003Ccode\u003Emethod\u003C/code\u003E or \u003Ccode\u003Etarget\u003C/code\u003E: a control with one of those names hides the form\u0026#39;s own property, and Blazor\u0026#39;s enhanced form handling then posts to the wrong address.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value posted with \u003Ca href=\u0022cref:P:IzzyBlazor.MenuItem.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E; in a \u003Ca href=\u0022cref:T:IzzyBlazor.MenuRadioGroup\u0022\u003E\u003Ccode\u003EMenuRadioGroup\u003C/code\u003E\u003C/a\u003E, the option this item picks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FormAction", "type": "string?", "summary": "\u003Cp\u003ESubmits to this URL instead of the form\u0026#39;s own action.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Form", "type": "string?", "summary": "\u003Cp\u003EThe id of the form to submit, when the menu is not inside it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Shortcut", "type": "string?", "summary": "\u003Cp\u003EA keyboard hint shown at the end in a key cap, such as \u0026quot;Ctrl\u002BC\u0026quot; or \u0026quot;\u2318\u002BC\u0026quot;. Display only. The Mac modifier symbols \u2318 \u2325 \u21E7 \u2303 are drawn as icons, so they look the same on every system.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent", "default": "Accent.Neutral", "summary": "\u003Cp\u003EThe text color. \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Neutral\u0022\u003E\u003Ccode\u003ENeutral\u003C/code\u003E\u003C/a\u003E (the default) is plain; use \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Danger\u0022\u003E\u003Ccode\u003EDanger\u003C/code\u003E\u003C/a\u003E for destructive items. A custom color is used as text, mixed toward the text color so it stays readable.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "KeepOpen", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELeaves the menu open when the item is chosen, so several checkbox items can be ticked in a row. A link item still navigates (with JavaScript off the page reloads and the menu closes).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows the item but stops it from being chosen.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe item text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [ { "name": "OnClick", "type": "EventCallback\u003CMouseEventArgs\u003E", "summary": "\u003Cp\u003ERuns on click on interactive pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" } } ], "methods": [], "types": [ "Accent" ] }, { "name": "MenuRadioGroup", "displayName": "MenuRadioGroup", "fullName": "IzzyBlazor.MenuRadioGroup", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA set of menu options where one is chosen (menuitemradio), each a MenuItem with a Value. How choosing works, so it works on static pages too:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003EQueryKey: each option is a link that sets ?key=value, and the chosen one comes from the URL.\u003C/li\u003E\u003Cli\u003EName: each option is a submit button posting Name=Value with the form it\u0026#39;s in.\u003C/li\u003E\u003Cli\u003E@bind-Value: on interactive pages, choosing updates C#.\u003C/li\u003E\u003C/ul\u003E", "examples": [ "\u003CMenu Label=\u0022Sort\u0022\u003E\n \u003CMenuRadioGroup Label=\u0022Sort by\u0022 QueryKey=\u0022sort\u0022 Value=\u0022@Sort\u0022\u003E\n \u003CMenuItem Value=\u0022name\u0022\u003EName\u003C/MenuItem\u003E\n \u003CMenuItem Value=\u0022date\u0022\u003EDate\u003C/MenuItem\u003E\n \u003C/MenuRadioGroup\u003E\n\u003C/Menu\u003E" ], "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe section heading, which also names the group for screen readers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe chosen option\u0026#39;s value. With \u003Ca href=\u0022cref:P:IzzyBlazor.MenuRadioGroup.QueryKey\u0022\u003E\u003Ccode\u003EQueryKey\u003C/code\u003E\u003C/a\u003E and no value set, it\u0026#39;s read from the URL.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "QueryKey", "type": "string?", "summary": "\u003Cp\u003EMakes each option a link that sets this query-string key, keeping the rest of the URL: \u003Ccode\u003E?sort=name\u003C/code\u003E. The page reads it with \u003Ccode\u003E[SupplyParameterFromQuery]\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EMakes each option a submit button that posts \u003Ccode\u003EName=Value\u003C/code\u003E with its form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe \u003Ca href=\u0022cref:T:IzzyBlazor.MenuItem\u0022\u003E\u003Ccode\u003EMenuItem\u003C/code\u003E\u003C/a\u003Es, each with a \u003Ca href=\u0022cref:P:IzzyBlazor.MenuItem.Value\u0022\u003E\u003Ccode\u003EValue\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "MenuSub", "displayName": "MenuSub", "fullName": "IzzyBlazor.MenuSub", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA submenu: an item that opens a second menu beside it. It\u0026#39;s a nested popover, so clicking the item opens it with no script. With script it also opens on hover and with the arrow key toward it (Right in left-to-right pages), and Left or Escape closes it. Choosing an item in it closes the whole menu.\u003C/p\u003E", "examples": [ "\u003CMenu Label=\u0022Actions\u0022\u003E\n \u003CMenuSub Label=\u0022Move to\u0022 Icon=\u0022Lucide.FolderInput\u0022\u003E\n \u003CMenuItem\u003EInbox\u003C/MenuItem\u003E\n \u003CMenuItem\u003EArchive\u003C/MenuItem\u003E\n \u003C/MenuSub\u003E\n\u003C/Menu\u003E" ], "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe item\u0026#39;s text.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows the item but stops the submenu from opening.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe submenu\u0026#39;s \u003Ca href=\u0022cref:T:IzzyBlazor.MenuItem\u0022\u003E\u003Ccode\u003EMenuItem\u003C/code\u003E\u003C/a\u003Es, groups and dividers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "MultiSelect", "displayName": "MultiSelect\u003CTValue, TItem\u003E", "fullName": "IzzyBlazor.MultiSelect\u00602", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA select for several choices, bound to a collection.\u003C/p\u003E", "remarks": "\u003Cp\u003EHow it works three ways:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003ENo script: a native \u003Ccode\u003E\u0026lt;select multiple\u0026gt;\u003C/code\u003E holds and posts the values (repeated form fields, which Blazor binds to the collection).\u003C/li\u003E\u003Cli\u003EWith script (\u003Ccode\u003E\u0026lt;ib-combobox\u0026gt;\u003C/code\u003E): the chosen options show as chips in a field you can type in to filter the list; choosing toggles an option and the list stays open.\u003C/li\u003E\u003Cli\u003EInteractive: the same, and @bind-Value follows every change.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003EFor a short list, CheckboxGroup shows every option at once.\u003C/p\u003E", "examples": [ "\u003CMultiSelect @bind-Value=\u0022Model.Skills\u0022 Items=\u0022AllSkills\u0022 Placeholder=\u0022Add skills\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EWith script, the input is a \u003Ccode\u003Ecombobox\u003C/code\u003E with a multi-select \u003Ccode\u003Elistbox\u003C/code\u003E: chosen options have \u003Ccode\u003Earia-selected\u003C/code\u003E, and focus stays in the input as Down and Up move through them.\u003C/li\u003E\u003Cli\u003EEnter toggles the highlighted option and the list stays open; Escape or Tab closes it.\u003C/li\u003E\u003Cli\u003EBackspace in the empty input removes the last chosen option. The chips\u0026#39; remove buttons, named \u0026quot;Remove\u0026quot; and the option (\u0026quot;Remove Design\u0026quot;, \u003Ccode\u003ERemoveLabel\u003C/code\u003E), are left out of the Tab order.\u003C/li\u003E\u003Cli\u003EWhen nothing matches, \u0026quot;No matches\u0026quot; (\u003Ccode\u003EEmptyText\u003C/code\u003E) is announced politely.\u003C/li\u003E\u003Cli\u003EThe label names the input and the list. The chosen options are the input\u0026#39;s description, before the hint and errors (\u0026quot;Chosen: Design, Writing.\u0026quot;, \u003Ccode\u003EIzzyText.Chosen\u003C/code\u003E), so they\u0026#39;re heard on focus.\u003C/li\u003E\u003Cli\u003EWith JavaScript off, it\u0026#39;s a native multiple \u003Ccode\u003Eselect\u003C/code\u003E, with the browser\u0026#39;s own keys.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "CheckboxGroup", "Combobox", "Select" ], "typeParameters": [ "TValue", "TItem" ], "bases": [ "FieldBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, it\u0027s a plain multi-select list, without chips or typing to filter." }, "properties": [ { "name": "ReadOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMakes the field read-only: the chosen options show in a read-only text field, and the values still post.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Items", "type": "IEnumerable\u003CTItem\u003E?", "summary": "\u003Cp\u003EThe options. For an enum, pass its values: \u003Ccode\u003EItems=\u0026quot;Enum.GetValues\u0026lt;Skill\u0026gt;()\u0026quot;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "ItemText", "type": "Func\u003CTItem, string\u003E?", "default": "computed", "summary": "\u003Cp\u003EThe text for each option, also what\u0026#39;s typed to find it and the chip\u0026#39;s text. Defaults to the enum value\u0026#39;s \u003Ccode\u003E[Display(Name)]\u003C/code\u003E or its string form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemTemplate", "type": "RenderFragment\u003CTItem\u003E?", "summary": "\u003Cp\u003EMarkup for each option in the list, such as an icon. Chips show \u003Ca href=\u0022cref:P:IzzyBlazor.MultiSelect\u00602.ItemText\u0022\u003E\u003Ccode\u003EItemText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placeholder", "type": "string?", "summary": "\u003Cp\u003EText in the empty field, such as \u0026quot;Add skills\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EmptyText", "type": "string?", "summary": "\u003Cp\u003EShown when nothing matches.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ToggleLabel", "type": "string?", "summary": "\u003Cp\u003EThe accessible name of the button that opens the list.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RemoveLabel", "type": "string?", "default": "\u0022Remove\u0022", "summary": "\u003Cp\u003EThe start of each chip\u0026#39;s remove button name for screen readers, before the option\u0026#39;s text. Defaults to \u0026quot;Remove\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "TValue", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [] }, { "name": "NavDivider", "displayName": "NavDivider", "fullName": "IzzyBlazor.NavDivider", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA line between groups of items in a NavMenu. Hidden from screen readers: a list holds only items, so it can\u0026#39;t be a separator, and an empty item would be read as one.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [], "events": [], "methods": [], "types": [] }, { "name": "NavGroup", "displayName": "NavGroup", "fullName": "IzzyBlazor.NavGroup", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA collapsible group of nav items, built on \u003Ccode\u003E\u0026lt;details\u0026gt;\u003C/code\u003E, so it opens and closes with no JavaScript. It starts open when Open is set or the current page is under ActivePrefix; with JavaScript, any group containing the current page also opens itself.\u003C/p\u003E", "bases": [], "properties": [ { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe group\u0026#39;s heading.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the heading.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Open", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStarts open.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ActivePrefix", "type": "string?", "summary": "\u003Cp\u003EStarts open when the current path is at or below this path, such as \u003Ccode\u003E/projects\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe items in the group.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "NavItem", "displayName": "NavItem", "fullName": "IzzyBlazor.NavItem", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EOne navigation link. The active state is worked out on the server from the current URL, so it is right on static pages and after enhanced navigation. In a list of links (NavMenu, SiteNav), of links to one page told apart by the query, only one is current (NavLinks).\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Href", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe destination.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Match", "type": "NavLinkMatch", "default": "NavLinkMatch.Prefix", "summary": "\u003Cp\u003EHow the current URL must match \u003Ca href=\u0022cref:P:IzzyBlazor.NavItem.Href\u0022\u003E\u003Ccode\u003EHref\u003C/code\u003E\u003C/a\u003E to be active. \u003Ccode\u003EPrefix\u003C/code\u003E (the default) also matches pages below it; \u003Ccode\u003EAll\u003C/code\u003E matches only the exact page. A root link (\u0026quot;/\u0026quot;) always needs an exact match, and so does a link with a query string, whose query must be the same too. A link without a query is current on its page whatever the query, unless another link in the same \u003Ca href=\u0022cref:T:IzzyBlazor.NavMenu\u0022\u003E\u003Ccode\u003ENavMenu\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:T:IzzyBlazor.SiteNav\u0022\u003E\u003Ccode\u003ESiteNav\u003C/code\u003E\u003C/a\u003E with a query matches, so of links told apart by the query (\u003Ccode\u003E?view=starred\u003C/code\u003E) only one is current.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Badge", "type": "string?", "summary": "\u003Cp\u003EA small count or label after the text, such as \u0026quot;3\u0026quot; or \u0026quot;New\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "BadgeStatus", "type": "Status", "default": "Status.Neutral", "summary": "\u003Cp\u003EWhat the badge means. Defaults to neutral.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "BadgeAccent", "type": "Accent?", "summary": "\u003Cp\u003EA badge color in place of the status\u0026#39;s, such as \u003Ccode\u003EAccent.Primary\u003C/code\u003E for an unread count.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "BadgeVariant", "type": "BadgeVariant", "default": "BadgeVariant.Soft", "summary": "\u003Cp\u003EThe badge\u0026#39;s look. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.BadgeVariant.Soft\u0022\u003E\u003Ccode\u003EBadgeVariant.Soft\u003C/code\u003E\u003C/a\u003E; \u003Ca href=\u0022cref:F:IzzyBlazor.BadgeVariant.Plain\u0022\u003E\u003Ccode\u003EBadgeVariant.Plain\u003C/code\u003E\u003C/a\u003E is a quiet count with no fill, as docs and mail sidebars show totals.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe link text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Accent", "BadgeVariant", "Status" ] }, { "name": "NavLabel", "displayName": "NavLabel", "fullName": "IzzyBlazor.NavLabel", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA small heading that labels the items below it in a NavMenu: a plain list item, since a list holds only items.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe heading text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "NavMenu", "displayName": "NavMenu", "fullName": "IzzyBlazor.NavMenu", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA list of navigation links: vertical for sidebars, horizontal for headers.\u003C/p\u003E", "examples": [ "\u003CNavMenu\u003E\n \u003CNavLabel\u003EWorkspace\u003C/NavLabel\u003E\n \u003CNavItem Href=\u0022/\u0022 Icon=\u0022Lucide.House\u0022 Match=\u0022NavLinkMatch.All\u0022\u003EHome\u003C/NavItem\u003E\n \u003CNavGroup Label=\u0022Projects\u0022 Icon=\u0022Lucide.Folder\u0022 ActivePrefix=\u0022/projects\u0022\u003E\n \u003CNavItem Href=\u0022/projects/active\u0022\u003EActive\u003C/NavItem\u003E\n \u003C/NavGroup\u003E\n \u003CNavDivider /\u003E\n \u003CNavItem Href=\u0022/settings\u0022 Icon=\u0022Lucide.Settings\u0022\u003ESettings\u003C/NavItem\u003E\n\u003C/NavMenu\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Eul\u003C/code\u003E of links, not a landmark: put it in an AppSidebar (a \u003Ccode\u003Enav\u003C/code\u003E named \u0026quot;Main\u0026quot;) or in a \u003Ccode\u003Enav\u003C/code\u003E with its own \u003Ccode\u003Earia-label\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EThe active item has \u003Ccode\u003Earia-current=\u0026quot;page\u0026quot;\u003C/code\u003E; an item above the current page (\u003Ccode\u003EMatch\u003C/code\u003E Prefix) gets \u003Ccode\u003Earia-current=\u0026quot;true\u0026quot;\u003C/code\u003E, so screen readers hear one current page. Of links to one page told apart by the query (\u003Ccode\u003E?view=starred\u003C/code\u003E), only one is current.\u003C/li\u003E\u003Cli\u003EA \u003Ccode\u003ENavGroup\u003C/code\u003E is a native \u003Ccode\u003Edetails\u003C/code\u003E, so Enter and Space open and close it with no script; with script, a group holding the current page opens itself.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ENavLabel\u003C/code\u003E is a plain list item, read as text before the links under it, not a heading or a group name; \u003Ccode\u003ENavDivider\u003C/code\u003E is hidden from screen readers, as a list holds only items.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "AppSidebar", "SiteNav", "Tabs", "Breadcrumb" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Orientation", "type": "Orientation", "default": "Orientation.Vertical", "summary": "\u003Cp\u003EVertical for sidebars (the default), horizontal for header bars.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe items: \u003Ca href=\u0022cref:T:IzzyBlazor.NavItem\u0022\u003E\u003Ccode\u003ENavItem\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.NavGroup\u0022\u003E\u003Ccode\u003ENavGroup\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.NavLabel\u0022\u003E\u003Ccode\u003ENavLabel\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.NavDivider\u0022\u003E\u003Ccode\u003ENavDivider\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Orientation" ] }, { "name": "NumberField", "displayName": "NumberField\u003CTValue\u003E", "fullName": "IzzyBlazor.NumberField\u00601", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA number field with optional stepper buttons.\u003C/p\u003E", "examples": [ "\u003CNumberField @bind-Value=\u0022Model.Quantity\u0022 Min=\u00221\u0022 Max=\u002299\u0022 /\u003E\n\u003CNumberField @bind-Value=\u0022Model.Guests\u0022 StepButtons=\u0022StepButtons.Split\u0022 /\u003E\n\u003CNumberField @bind-Value=\u0022Model.Price\u0022 Step=\u00220.01\u0022\u003E\n \u003CStartAddon\u003E$\u003C/StartAddon\u003E\n\u003C/NumberField\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native number \u003Ccode\u003Einput\u003C/code\u003E (a spin button to screen readers): Up and Down arrows step it within \u003Ccode\u003EMin\u003C/code\u003E and \u003Ccode\u003EMax\u003C/code\u003E, with or without script.\u003C/li\u003E\u003Cli\u003EThe step buttons are named \u0026quot;Increase\u0026quot; and \u0026quot;Decrease\u0026quot; (\u003Ccode\u003EIncreaseLabel\u003C/code\u003E, \u003Ccode\u003EDecreaseLabel\u003C/code\u003E). They aren\u0026#39;t tab stops, since the arrow keys do the same, but screen readers can press them.\u003C/li\u003E\u003Cli\u003EEach step button is disabled at its end of the range, and both are disabled when the field is disabled or read-only.\u003C/li\u003E\u003Cli\u003ELabel, hint and errors work as in \u003Ccode\u003ETextField\u003C/code\u003E; put a unit that matters in the label, since add-on text isn\u0026#39;t part of the name.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Slider", "TextField", "Form" ], "typeParameters": [ "TValue" ], "bases": [ "FieldBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, there are no increase and decrease buttons; arrow keys and typing still work." }, "properties": [ { "name": "ReadOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMakes the field read-only: it can be focused, its steppers are off, and it still posts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Min", "type": "double?", "default": "computed", "summary": "\u003Cp\u003EThe lowest value. Defaults to \u003Ccode\u003E[Range]\u003C/code\u003E\u0026#39;s minimum.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Max", "type": "double?", "default": "computed", "summary": "\u003Cp\u003EThe highest value. Defaults to \u003Ccode\u003E[Range]\u003C/code\u003E\u0026#39;s maximum.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Step", "type": "double?", "default": "computed", "summary": "\u003Cp\u003EThe step between allowed values, such as 0.01 for cents. Defaults to 1 for whole-number types and to any value for decimal types.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placeholder", "type": "string?", "summary": "\u003Cp\u003EExample text shown when empty.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon inside the field, before the number.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StartAddon", "type": "RenderFragment?", "summary": "\u003Cp\u003EContent attached before the control, outside its border. See \u003Ca href=\u0022cref:P:IzzyBlazor.TextField.StartAddon\u0022\u003E\u003Ccode\u003EStartAddon\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EndAddon", "type": "RenderFragment?", "summary": "\u003Cp\u003EContent attached after the control, outside its border, such as a unit.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StepButtons", "type": "StepButtons", "default": "StepButtons.Stacked", "summary": "\u003Cp\u003EIncrease and decrease buttons, shown once scripts run: stacked at the end (the default), split across both ends, or none. The browser\u0026#39;s own spin buttons are hidden while these show; with JavaScript off they show in their place, unless this is \u003Ca href=\u0022cref:F:IzzyBlazor.StepButtons.None\u0022\u003E\u003Ccode\u003EStepButtons.None\u003C/code\u003E\u003C/a\u003E. Arrow keys step either way.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "IncreaseLabel", "type": "string?", "summary": "\u003Cp\u003EThe increase button\u0026#39;s accessible name.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "DecreaseLabel", "type": "string?", "summary": "\u003Cp\u003EThe decrease button\u0026#39;s accessible name.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "TValue", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [ "StepButtons" ] }, { "name": "OnThisPage", "displayName": "OnThisPage", "fullName": "IzzyBlazor.OnThisPage", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003E\u0026quot;On this page\u0026quot;: links to the page\u0026#39;s sections, for an AppAside.\u003C/p\u003E", "remarks": "\u003Cp\u003EEach Heading in AppMain adds itself to the shell\u0026#39;s outline while the page renders, so the list is in the first response and works with JavaScript off; the headings get ids from their text. With script, \u003Ccode\u003E\u0026lt;ib-on-this-page\u0026gt;\u003C/code\u003E marks the section in view (aria-current=\u0026quot;location\u0026quot;) and adds headings the server didn\u0026#39;t see: ones in raw HTML (Prose, rendered Markdown) that have ids. With no headings it renders hidden, so the script can still fill it in.\u003C/p\u003E", "examples": [ "\u003CAppAside\u003E\n \u003COnThisPage /\u003E\n\u003C/AppAside\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Enav\u003C/code\u003E named by its heading, an \u003Ccode\u003Eh2\u003C/code\u003E reading \u0026quot;On this page\u0026quot; (\u003Ccode\u003ETitle\u003C/code\u003E).\u003C/li\u003E\u003Cli\u003ELinks to \u003Ccode\u003EHeading\u003C/code\u003E components are in the server\u0026#39;s response, so they work with JavaScript off; headings inside raw HTML, such as \u003Ccode\u003EProse\u003C/code\u003E, are added by the script.\u003C/li\u003E\u003Cli\u003EWith script, the link to the section in view has \u003Ccode\u003Earia-current=\u0026quot;location\u0026quot;\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith no headings to list it\u0026#39;s hidden, so there\u0026#39;s no empty landmark.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Heading", "PrevNext", "NavMenu" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the section in view isn\u0027t highlighted, and headings in raw HTML aren\u0027t listed." }, "properties": [ { "name": "Title", "type": "string?", "default": "\u0022On this page\u0022", "summary": "\u003Cp\u003EThe list\u0026#39;s heading. Defaults to \u0026quot;On this page\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MinLevel", "type": "int", "default": "2", "summary": "\u003Cp\u003EThe highest heading level listed (h2 by default), 1 to 6.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MaxLevel", "type": "int", "default": "3", "summary": "\u003Cp\u003EThe lowest heading level listed (h3 by default), 1 to 6. Lower levels are indented under higher ones.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "Pagination", "displayName": "Pagination", "fullName": "IzzyBlazor.Pagination", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EPage links. Each page is a link that sets the page in the query string, so paging works on static pages with no script, survives reloads and can be shared; the page reads it with [SupplyParameterFromQuery]. On interactive pages, @bind-Page turns the links into buttons that update C# without touching the URL.\u003C/p\u003E", "examples": [ "\u003CPagination PageCount=\u002212\u0022 /\u003E reads and writes ?page=\n\u003CPagination @bind-Page=\u0022page\u0022 PageCount=\u002212\u0022 /\u003E interactive, no URL" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Enav\u003C/code\u003E named \u0026quot;Pagination\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E); give each one on a page its own \u003Ccode\u003ELabel\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EPage numbers are read as \u0026quot;Page 3\u0026quot; (\u003Ccode\u003EPageLabel\u003C/code\u003E), and the current page has \u003Ccode\u003Earia-current=\u0026quot;page\u0026quot;\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EPrevious and next are named \u0026quot;Previous page\u0026quot; and \u0026quot;Next page\u0026quot; (\u003Ccode\u003EPreviousLabel\u003C/code\u003E, \u003Ccode\u003ENextLabel\u003C/code\u003E); at the ends they stay, with \u003Ccode\u003Earia-disabled\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith \u003Ccode\u003E@bind-Page\u003C/code\u003E they\u0026#39;re buttons: the current page and a disabled previous or next stay buttons, so focus isn\u0026#39;t lost when one is picked.\u003C/li\u003E\u003Cli\u003EThe gaps (\u0026quot;\u2026\u0026quot;) are hidden from screen readers.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Table", "PrevNext", "Breadcrumb" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Page", "type": "int?", "summary": "\u003Cp\u003EThe current page, from 1. When not set it is read from the query string (\u003Ca href=\u0022cref:P:IzzyBlazor.Pagination.QueryKey\u0022\u003E\u003Ccode\u003EQueryKey\u003C/code\u003E\u003C/a\u003E). With \u003Ccode\u003E@bind-Page\u003C/code\u003E on an interactive page, the links become buttons that update it.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "PageCount", "type": "int?", "summary": "\u003Cp\u003EHow many pages there are. Or set \u003Ca href=\u0022cref:P:IzzyBlazor.Pagination.TotalItems\u0022\u003E\u003Ccode\u003ETotalItems\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.Pagination.PageSize\u0022\u003E\u003Ccode\u003EPageSize\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TotalItems", "type": "int?", "summary": "\u003Cp\u003EHow many items there are, with \u003Ca href=\u0022cref:P:IzzyBlazor.Pagination.PageSize\u0022\u003E\u003Ccode\u003EPageSize\u003C/code\u003E\u003C/a\u003E, in place of \u003Ca href=\u0022cref:P:IzzyBlazor.Pagination.PageCount\u0022\u003E\u003Ccode\u003EPageCount\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PageSize", "type": "int", "default": "20", "summary": "\u003Cp\u003EItems per page, with \u003Ca href=\u0022cref:P:IzzyBlazor.Pagination.TotalItems\u0022\u003E\u003Ccode\u003ETotalItems\u003C/code\u003E\u003C/a\u003E. Defaults to 20.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "QueryKey", "type": "string", "default": "\u0022page\u0022", "summary": "\u003Cp\u003EThe query-string key for the page. Defaults to \u003Ccode\u003Epage\u003C/code\u003E. Page 1 leaves it out of the URL.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Siblings", "type": "int", "default": "1", "summary": "\u003Cp\u003EPages shown on each side of the current one. Defaults to 1.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Boundaries", "type": "int", "default": "1", "summary": "\u003Cp\u003EPages always shown at each end. Defaults to 1.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EButton size, shared with buttons and fields. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Pagination\u0022", "summary": "\u003Cp\u003EThe navigation landmark\u0026#39;s name. Defaults to \u0026quot;Pagination\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PreviousLabel", "type": "string?", "default": "\u0022Previous page\u0022", "summary": "\u003Cp\u003EThe previous button\u0026#39;s name. Defaults to \u0026quot;Previous page\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "NextLabel", "type": "string?", "default": "\u0022Next page\u0022", "summary": "\u003Cp\u003EThe next button\u0026#39;s name. Defaults to \u0026quot;Next page\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PageLabel", "type": "string?", "default": "\u0022Page\u0022", "summary": "\u003Cp\u003ERead before each page number by screen readers. Defaults to \u0026quot;Page\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ControlSize" ] }, { "name": "Popover", "displayName": "Popover", "fullName": "IzzyBlazor.Popover", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EFloating, non-modal content next to its trigger: filters, a small form, an info card. Same mechanism as Menu (the Popover API), with role=\u0026quot;dialog\u0026quot;.\u003C/p\u003E", "examples": [ "\u003CPopover Label=\u0022Filters\u0022 Title=\u0022Filter results\u0022\u003E\n ...\n\u003C/Popover\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EThe panel is a non-modal \u003Ccode\u003Edialog\u003C/code\u003E named by \u003Ccode\u003ETitle\u003C/code\u003E, or by its trigger without one; the trigger has \u003Ccode\u003Earia-haspopup=\u0026quot;dialog\u0026quot;\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith script, opening it moves focus to an element with \u003Ccode\u003Eautofocus\u003C/code\u003E, or to the panel, and closing it puts focus back on the trigger. Focus isn\u0026#39;t trapped: Tab can leave it.\u003C/li\u003E\u003Cli\u003EIn \u003Ccode\u003EAuto\u003C/code\u003E mode, Escape and a click outside close it. A \u003Ccode\u003EManual\u003C/code\u003E popover doesn\u0026#39;t close on Escape, so it shows a close button, named \u0026quot;Close\u0026quot; (\u003Ccode\u003ECloseLabel\u003C/code\u003E).\u003C/li\u003E\u003Cli\u003EWith JavaScript off, it opens and closes, and focus moves in only to an element with \u003Ccode\u003Eautofocus\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EA custom \u003Ccode\u003ETrigger\u003C/code\u003E must be a \u003Ccode\u003Ebutton\u003C/code\u003E with a name of its own.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Dialog", "Menu", "Tooltip", "Drawer" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, it opens and closes, but focus moves into it only to an autofocus element, and Open from the server doesn\u0027t show it." }, "properties": [ { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CloseLabel", "type": "string?", "default": "\u0022Close\u0022", "summary": "\u003Cp\u003EThe close button\u0026#39;s name. Defaults to \u0026quot;Close\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent", "default": "Accent.Neutral", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s color. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Neutral\u0022\u003E\u003Ccode\u003ENeutral\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Outline", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Outline\u0022\u003E\u003Ccode\u003EButtonVariant.Outline\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s size.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the default trigger\u0026#39;s text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Trigger", "type": "RenderFragment\u003CIReadOnlyDictionary\u003Cstring, object\u003E\u003E?", "summary": "\u003Cp\u003EA custom trigger in place of the default button. Pass its context on with \u003Ccode\u003E@attributes=\u0026quot;context\u0026quot;\u003C/code\u003E. It must be a \u003Ccode\u003Ebutton\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EA heading at the top, which also names the popover for screen readers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ShowCloseButton", "type": "bool?", "summary": "\u003Cp\u003EShows a close button at the top. Always shown in \u003Ca href=\u0022cref:F:IzzyBlazor.PopoverMode.Manual\u0022\u003E\u003Ccode\u003EPopoverMode.Manual\u003C/code\u003E\u003C/a\u003E unless set to false.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Mode", "type": "PopoverMode", "default": "PopoverMode.Auto", "summary": "\u003Cp\u003EHow it closes. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.PopoverMode.Auto\u0022\u003E\u003Ccode\u003EPopoverMode.Auto\u003C/code\u003E\u003C/a\u003E: Escape, a click outside, or another popover opening.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placement", "type": "Placement", "default": "Placement.BottomStart", "summary": "\u003Cp\u003EWhere it opens. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Placement.BottomStart\u0022\u003E\u003Ccode\u003EPlacement.BottomStart\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PanelWidth", "type": "Length?", "default": "computed", "summary": "\u003Cp\u003EThe width of the panel, such as \u003Ccode\u003ELength.Rem(32)\u003C/code\u003E for a filter form. Defaults to the content\u0026#39;s width, up to 24rem. Never wider than the screen.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Open", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it is open. Use \u003Ccode\u003E@bind-Open\u003C/code\u003E to follow changes on interactive pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ToggleComponentBase" } ], "events": [], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize", "Length", "Placement", "PopoverMode" ] }, { "name": "PrevNext", "displayName": "PrevNext", "fullName": "IzzyBlazor.PrevNext", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EPrevious and next links for the end of an article: two cards with the page titles, side by side from 32rem of width up (the previous one at the start, the next at the end), stacked below. Plain links with rel=\u0026quot;prev\u0026quot; and rel=\u0026quot;next\u0026quot;, so it needs no script.\u003C/p\u003E", "examples": [ "\u003CPrevNext PreviousHref=\u0022docs/install\u0022 PreviousTitle=\u0022Install\u0022\n NextHref=\u0022docs/theming\u0022 NextTitle=\u0022Theming\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Enav\u003C/code\u003E named \u0026quot;More pages\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E) holding plain links.\u003C/li\u003E\u003Cli\u003EEach link\u0026#39;s name is its direction and the page title, as in \u0026quot;Next Theming\u0026quot;; a link needs its \u003Ccode\u003EPreviousTitle\u003C/code\u003E or \u003Ccode\u003ENextTitle\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith neither link it renders nothing, so there\u0026#39;s no empty landmark.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Pagination", "Breadcrumb", "OnThisPage" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "PreviousHref", "type": "string?", "summary": "\u003Cp\u003EThe previous page\u0026#39;s URL. Leave it out on the first page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PreviousTitle", "type": "string?", "summary": "\u003Cp\u003EThe previous page\u0026#39;s title.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "NextHref", "type": "string?", "summary": "\u003Cp\u003EThe next page\u0026#39;s URL. Leave it out on the last page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "NextTitle", "type": "string?", "summary": "\u003Cp\u003EThe next page\u0026#39;s title.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PreviousText", "type": "string?", "default": "\u0022Previous\u0022", "summary": "\u003Cp\u003EThe small text above the previous page\u0026#39;s title. Defaults to \u0026quot;Previous\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "NextText", "type": "string?", "default": "\u0022Next\u0022", "summary": "\u003Cp\u003EThe small text above the next page\u0026#39;s title. Defaults to \u0026quot;Next\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022More pages\u0022", "summary": "\u003Cp\u003EThe navigation landmark\u0026#39;s name. Defaults to \u0026quot;More pages\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "Progress", "displayName": "Progress", "fullName": "IzzyBlazor.Progress", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA progress bar. With a Value it shows how far along something is; without one it\u0026#39;s indeterminate (a bar that moves, for \u0026quot;working on it\u0026quot;). Rendered on the server, so it works on static pages; on interactive pages, update Value from C#.\u003C/p\u003E", "examples": [ "\u003CProgress Value=\u002240\u0022 Label=\u0022Uploading\u0022 ShowValue /\u003E\n\u003CProgress Value=\u00223\u0022 Max=\u00225\u0022 ValueText=\u00223 of 5 files\u0022 Accent=\u0022Accent.From(Color.Success)\u0022 /\u003E\n\u003CProgress Label=\u0022Preparing export\u0022 /\u003E (indeterminate)" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders \u003Ccode\u003Erole=\u0026quot;progressbar\u0026quot;\u003C/code\u003E with \u003Ccode\u003Earia-valuenow\u003C/code\u003E, \u003Ccode\u003Earia-valuemin\u003C/code\u003E and \u003Ccode\u003Earia-valuemax\u003C/code\u003E; screen readers hear \u003Ccode\u003EValueText\u003C/code\u003E or the percentage.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ELabel\u003C/code\u003E is the bar\u0026#39;s accessible name (through \u003Ccode\u003Earia-labelledby\u003C/code\u003E); without one, an \u003Ccode\u003Earia-label\u003C/code\u003E on the component names the bar.\u003C/li\u003E\u003Cli\u003EWithout a \u003Ccode\u003EValue\u003C/code\u003E it has no value attributes, which marks it as indeterminate.\u003C/li\u003E\u003Cli\u003EWith reduced motion, the indeterminate bar moves more slowly.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Spinner", "Stepper", "Skeleton" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Value", "type": "double?", "summary": "\u003Cp\u003EHow far along, from 0 to \u003Ca href=\u0022cref:P:IzzyBlazor.Progress.Max\u0022\u003E\u003Ccode\u003EMax\u003C/code\u003E\u003C/a\u003E. Leave it out for an indeterminate bar.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Max", "type": "double", "default": "100", "summary": "\u003Cp\u003EThe value that means done. Defaults to 100.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EA label above the bar, also its accessible name. Without one, give the component an \u003Ccode\u003Earia-label\u003C/code\u003E, which goes on the bar.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ShowValue", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows the percentage above the bar, at the end.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ValueText", "type": "string?", "summary": "\u003Cp\u003EText for the value in place of a percentage, such as \u0026quot;3 of 5 files\u0026quot;. Shown, and read by screen readers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent?", "default": "computed", "summary": "\u003Cp\u003EThe bar\u0026#39;s color, such as \u003Ccode\u003EAccent.Danger\u003C/code\u003E, \u003Ccode\u003EAccent.From(Color.Success)\u003C/code\u003E or \u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E. Defaults to the primary color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EThickness. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Accent", "ControlSize" ] }, { "name": "PropertyColumn", "displayName": "PropertyColumn\u003CTItem, TValue\u003E", "fullName": "IzzyBlazor.PropertyColumn\u00602", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA column that shows one property of each item, formatted, and can sort by it. The title and sort key come from the property ([Display(Name)] is used when present).\u003C/p\u003E", "examples": [ "\u003CPropertyColumn Property=\u0022o =\u003E o.Total\u0022 Format=\u0022C\u0022 Sortable /\u003E" ], "typeParameters": [ "TItem", "TValue" ], "bases": [], "properties": [ { "name": "Property", "type": "Expression\u003CFunc\u003CTItem, TValue\u003E\u003E", "summary": "\u003Cp\u003EThe property to show, such as \u003Ccode\u003Eo =\u0026gt; o.Customer.Name\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Format", "type": "string?", "summary": "\u003Cp\u003EA .NET format string for the value, such as \u003Ccode\u003EC\u003C/code\u003E, \u003Ccode\u003EN0\u003C/code\u003E or \u003Ccode\u003Eyyyy-MM-dd\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EThe header text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Sortable", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELets people sort by this column, with a link in its header.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "SortKey", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe name of this column in the URL\u0026#39;s sort parameter (\u003Ccode\u003E?sort=total\u003C/code\u003E, or \u003Ccode\u003E?sort=-total\u003C/code\u003E for descending) and its filter (\u003Ccode\u003E?f-total=\u003C/code\u003E). Defaults to the property name in lower case.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Filterable", "type": "bool", "default": "false", "summary": "\u003Cp\u003EAdds a filter under this column\u0026#39;s header: a text box for text (matching anywhere, ignoring case) and numbers (matching exactly), a date input for dates (matching the day), a select for enums and booleans. A \u003Ca href=\u0022cref:T:IzzyBlazor.TemplateColumn\u00601\u0022\u003E\u003Ccode\u003ETemplateColumn\u0026lt;T\u0026gt;\u003C/code\u003E\u003C/a\u003E filters by its \u003Ccode\u003EFilterBy\u003C/code\u003E text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "FilterMultiple", "type": "bool", "default": "false", "summary": "\u003Cp\u003EFor an enum filter: choose several values from a menu of checkboxes, and keep the items that have any of them. The URL repeats the key (\u003Ccode\u003E?f-status=Paid\u0026amp;f-status=Pending\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Align", "type": "CellAlign?", "default": "computed", "summary": "\u003Cp\u003EHow the cells line up. Defaults to the end for numbers and the start otherwise.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Width", "type": "Length?", "summary": "\u003Cp\u003EThe column width, such as \u003Ccode\u003ELength.Rem(8)\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Class", "type": "string?", "summary": "\u003Cp\u003EA class for this column\u0026#39;s cells and header.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "FooterText", "type": "string?", "summary": "\u003Cp\u003EText for this column in the table\u0026#39;s footer row, such as a total.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Footer", "type": "RenderFragment?", "summary": "\u003Cp\u003EContent for this column in the table\u0026#39;s footer row, in place of \u003Ca href=\u0022cref:P:IzzyBlazor.ColumnBase\u00601.FooterText\u0022\u003E\u003Ccode\u003EFooterText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" } ], "events": [], "methods": [], "types": [ "CellAlign", "Length" ] }, { "name": "Prose", "displayName": "Prose", "fullName": "IzzyBlazor.Prose", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EStyles plain HTML inside it, such as Markdown output or a CMS field: headings, paragraphs, links, lists, quotes, code, tables, images and rules, in the library\u0026#39;s type and colors.\u003C/p\u003E", "remarks": "\u003Cp\u003EThe rules have the lowest weight (\u003Ccode\u003E:where()\u003C/code\u003E), so library components inside keep their own look, and your own classes win. Only render HTML you trust or have sanitized.\u003C/p\u003E", "examples": [ "\u003CProse\u003E@((MarkupString)html)\u003C/Prose\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt only styles the HTML inside it: heading levels, alt text, table headers and link text come from that HTML, so check what your Markdown or CMS produces.\u003C/li\u003E\u003Cli\u003ELinks are underlined, not marked by color alone.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Heading", "TextBlock", "Code" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Size", "type": "ProseSize", "default": "ProseSize.Md", "summary": "\u003Cp\u003EText size. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ProseSize.Md\u0022\u003E\u003Ccode\u003EProseSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "ProseSize" ] }, { "name": "RadioGroup", "displayName": "RadioGroup\u003CTValue\u003E", "fullName": "IzzyBlazor.RadioGroup\u00601", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ERadio buttons for one choice, from Items or an enum.\u003C/p\u003E", "examples": [ "\u003CRadioGroup @bind-Value=\u0022Model.Contact\u0022 Orientation=\u0022Orientation.Horizontal\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders native radio buttons in a \u003Ccode\u003Efieldset\u003C/code\u003E whose \u003Ccode\u003Elegend\u003C/code\u003E is the label, so Tab reaches the group and the arrow keys move the choice.\u003C/li\u003E\u003Cli\u003EEach option\u0026#39;s text is its \u003Ccode\u003Elabel\u003C/code\u003E; the hint and errors are linked to the group with \u003Ccode\u003Earia-describedby\u003C/code\u003E, and each radio sets \u003Ccode\u003Earia-invalid\u003C/code\u003E when the field is invalid.\u003C/li\u003E\u003Cli\u003EAfter a post that fails with an error here, the checked radio (or the first) takes focus, so screen readers read the group\u0026#39;s name and error (its description); a \u003Ccode\u003EFormErrors\u003C/code\u003E earlier in the page takes it first. Not on interactive pages: there, use a \u003Ccode\u003EFormErrors\u003C/code\u003E.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "SegmentedControl", "Select", "CheckboxGroup" ], "typeParameters": [ "TValue" ], "bases": [ "FieldBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Items", "type": "IEnumerable\u003CTValue\u003E?", "summary": "\u003Cp\u003EThe options. Not needed for enums, whose values are listed automatically.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemText", "type": "Func\u003CTValue, string\u003E?", "default": "computed", "summary": "\u003Cp\u003EThe text for each option. Defaults to the enum value\u0026#39;s \u003Ccode\u003E[Display(Name)]\u003C/code\u003E or its string form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Orientation", "type": "Orientation", "default": "Orientation.Vertical", "summary": "\u003Cp\u003EStack options vertically (the default) or in a row.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "TValue", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [ "Orientation" ] }, { "name": "Row", "displayName": "Row", "fullName": "IzzyBlazor.Row", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ELays children out horizontally. For a direction that changes by screen size, use \u003Ca href=\u0022cref:T:IzzyBlazor.Stack\u0022\u003E\u003Ccode\u003EStack\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "examples": [ "\u003CRow Gap=\u00222\u0022 Align=\u0022Align.Center\u0022\u003E\n \u003CAvatar Name=\u0022Ada Lovelace\u0022 /\u003E\n \u003CTextBlock\u003EAda Lovelace\u003C/TextBlock\u003E\n \u003CSpacer /\u003E\n \u003CButton Size=\u0022ControlSize.Sm\u0022\u003EFollow\u003C/Button\u003E\n\u003C/Row\u003E" ], "seeAlso": [ "Stack", "Column", "Spacer", "Grid" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between children, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003ECross-axis alignment. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EMain-axis distribution. Defaults to start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether children wrap onto new lines: \u003Ccode\u003E\u0026lt;Row Wrap\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E so the container sits in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Justify" ] }, { "name": "Section", "displayName": "Section", "fullName": "IzzyBlazor.Section", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA band of a page, such as a hero, a feature row or a newsletter sign-up: a \u003Ccode\u003Esection\u003C/code\u003E with vertical padding and an optional background. Inside an \u003Ca href=\u0022cref:T:IzzyBlazor.AppMain\u0022\u003E\u003Ccode\u003EAppMain\u003C/code\u003E\u003C/a\u003E with a \u003Ccode\u003EContentWidth\u003C/code\u003E, it spans the whole main area (full bleed) while its content stays on the column, lined up with the rest of the page.\u003C/p\u003E", "remarks": "\u003Cp\u003EIt works out the bleed from the main area and the column, so put it at the page\u0026#39;s top level or in containers without side padding of their own. It works with no script.\u003C/p\u003E", "examples": [ "\u003CSection Bg=\u0022Color.FillSubtle\u0022\u003E\n \u003CHeading Level=\u00222\u0022\u003EGet the newsletter\u003C/Heading\u003E ...\n\u003C/Section\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Esection\u003C/code\u003E, which screen readers list as a region only when it has a name: point \u003Ccode\u003Earia-labelledby\u003C/code\u003E at its heading\u0026#39;s \u003Ccode\u003Eid\u003C/code\u003E.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Container", "Heading", "Box", "AppShell" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Spacing", "type": "SectionSpacing", "default": "SectionSpacing.Md", "summary": "\u003Cp\u003EVertical padding. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.SectionSpacing.Md\u0022\u003E\u003Ccode\u003ESectionSpacing.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FullBleed", "type": "bool", "default": "true", "summary": "\u003Cp\u003ESpans the whole main area when the page has a content width. Defaults to true; set false for a band that stays on the column (rounded, for instance).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "As", "type": "string", "default": "\u0022section\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "SectionSpacing" ] }, { "name": "SegmentedControl", "displayName": "SegmentedControl\u003CTValue\u003E", "fullName": "IzzyBlazor.SegmentedControl\u00601", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA row of segments for one choice, from Items or an enum.\u003C/p\u003E", "examples": [ "\u003CSegmentedControl @bind-Value=\u0022Model.View\u0022 HideLabel /\u003E\n\u003CSegmentedControl @bind-Value=\u0022Model.Align\u0022 ItemIcon=\u0022AlignIcon\u0022 IconOnly /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EScreen readers hear a radio group: a \u003Ccode\u003Efieldset\u003C/code\u003E named by its \u003Ccode\u003Elegend\u003C/code\u003E, with a native radio in each segment, so Tab reaches the group and the arrow keys move the choice.\u003C/li\u003E\u003Cli\u003EThe focus ring is drawn around the focused segment.\u003C/li\u003E\u003Cli\u003EAfter a post that fails with an error here, the checked segment (or the first) takes focus, so screen readers read the group\u0026#39;s name and error (its description); a \u003Ccode\u003EFormErrors\u003C/code\u003E earlier in the page takes it first. Not on interactive pages: there, use a \u003Ccode\u003EFormErrors\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith \u003Ccode\u003EIconOnly\u003C/code\u003E, each option\u0026#39;s text stays for screen readers and shows as its hover tooltip.\u003C/li\u003E\u003Cli\u003EA field with no visible label needs \u003Ccode\u003EHideLabel\u003C/code\u003E, not an empty label, so the group keeps its name.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "RadioGroup", "Tabs", "Switch", "ButtonGroup" ], "typeParameters": [ "TValue" ], "bases": [ "FieldBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Items", "type": "IEnumerable\u003CTValue\u003E?", "summary": "\u003Cp\u003EThe options. Not needed for enums, whose values are listed automatically.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemText", "type": "Func\u003CTValue, string\u003E?", "default": "computed", "summary": "\u003Cp\u003EThe text for each option. Defaults to the enum value\u0026#39;s \u003Ccode\u003E[Display(Name)]\u003C/code\u003E or its string form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemIcon", "type": "Func\u003CTValue, IconData?\u003E?", "summary": "\u003Cp\u003EAn icon for each option, before its text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "IconOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows only the icons; the text stays for screen readers and as a tooltip.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EFills the available width, the segments sharing it equally.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "TValue", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [] }, { "name": "Select", "displayName": "Select\u003CTValue\u003E", "fullName": "IzzyBlazor.Select\u00601", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA native select, with options from Items or an enum.\u003C/p\u003E", "remarks": "\u003Cp\u003EWhere the browser supports the customizable select (appearance: base-select), the open list is themed and ItemTemplate\u0026#39;s markup is shown in it and in the closed field. Elsewhere the browser\u0026#39;s own list shows ItemText, so keep both.\u003C/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;Select @bind-Value=\u0026quot;Model.Plan\u0026quot; ItemTemplate=\u0026quot;plan =\u0026gt; @\u0026lt;span\u0026gt;@plan \u0026lt;small class=\u0026quot;ib-option-hint\u0026quot;\u0026gt;@Prices[plan]\u0026lt;/small\u0026gt;\u0026lt;/span\u0026gt;\u0026quot; /\u0026gt;\u003C/code\u003E\u003C/pre\u003E", "examples": [ "\u003CSelect @bind-Value=\u0022Model.Plan\u0022 /\u003E\n\u003CSelect @bind-Value=\u0022Model.CountryId\u0022 Items=\u0022Countries\u0022 ItemText=\u0022c =\u003E Names[c]\u0022 Placeholder=\u0022Choose a country\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Eselect\u003C/code\u003E with a \u003Ccode\u003Elabel\u003C/code\u003E linked to it, so the keyboard, typing to jump to an option and the screen reader\u0026#39;s announcements are the browser\u0026#39;s own.\u003C/li\u003E\u003Cli\u003EThe hint and, when the field is invalid, its errors are linked with \u003Ccode\u003Earia-describedby\u003C/code\u003E; an invalid field sets \u003Ccode\u003Earia-invalid\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EA read-only Select shows its value in a read-only text field, which can be focused and is announced as read-only, where a disabled select would be skipped.\u003C/li\u003E\u003Cli\u003EThe chosen text\u0026#39;s hover tooltip is on the wrapper, not the select, so screen readers don\u0026#39;t hear the value twice.\u003C/li\u003E\u003Cli\u003EWith \u003Ccode\u003EItemTemplate\u003C/code\u003E, keep \u003Ccode\u003EItemText\u003C/code\u003E: browsers without the customizable select show and read it in place of the markup.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Combobox", "RadioGroup", "SegmentedControl", "MultiSelect" ], "typeParameters": [ "TValue" ], "bases": [ "FieldBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "ReadOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMakes the field read-only: the chosen text shows in a read-only text field, and the value still posts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Items", "type": "IEnumerable\u003CTValue\u003E?", "summary": "\u003Cp\u003EThe options. Not needed for enums, whose values are listed automatically.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemText", "type": "Func\u003CTValue, string\u003E?", "default": "computed", "summary": "\u003Cp\u003EThe text for each option. Defaults to the enum value\u0026#39;s \u003Ccode\u003E[Display(Name)]\u003C/code\u003E or its string form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemTemplate", "type": "RenderFragment\u003CTValue\u003E?", "summary": "\u003Cp\u003EMarkup for each option, such as an icon, avatar or a second line (class \u003Ccode\u003Eib-option-hint\u003C/code\u003E, hidden in the closed field). In the closed field, text in its own element (a \u003Ccode\u003Espan\u003C/code\u003E) ends in an ellipsis when it doesn\u0026#39;t fit. Shown where the browser supports the customizable select; elsewhere the option shows \u003Ca href=\u0022cref:P:IzzyBlazor.Select\u00601.ItemText\u0022\u003E\u003Ccode\u003EItemText\u003C/code\u003E\u003C/a\u003E. Keep it non-interactive: options can\u0026#39;t hold links or buttons.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placeholder", "type": "string?", "summary": "\u003Cp\u003EA first, empty option such as \u0026quot;Choose a plan\u0026quot;. Not selectable again when the field is required.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "TValue", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [] }, { "name": "SidebarBody", "displayName": "SidebarBody", "fullName": "IzzyBlazor.SidebarBody", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EAn \u003Ca href=\u0022cref:T:IzzyBlazor.AppSidebar\u0022\u003E\u003Ccode\u003EAppSidebar\u003C/code\u003E\u003C/a\u003E\u0026#39;s scrolling content with layout props: a column with \u003Ccode\u003EGap\u003C/code\u003E, \u003Ccode\u003EAlign\u003C/code\u003E and \u003Ccode\u003EJustify\u003C/code\u003E, like \u003Ca href=\u0022cref:T:IzzyBlazor.Stack\u0022\u003E\u003Ccode\u003EStack\u003C/code\u003E\u003C/a\u003E. Optional: content written straight in the sidebar is its body too.\u003C/p\u003E", "examples": [ "\u003CSidebarBody Gap=\u00224\u0022\u003E\u003CNavMenu\u003E...\u003C/NavMenu\u003E\u003CNavMenu\u003E...\u003C/NavMenu\u003E\u003C/SidebarBody\u003E" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between children, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003ECross-axis alignment. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EMain-axis distribution. Defaults to start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether children wrap onto new lines: \u003Ccode\u003E\u0026lt;Row Wrap\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E so the container sits in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Justify" ] }, { "name": "SidebarFooter", "displayName": "SidebarFooter", "fullName": "IzzyBlazor.SidebarFooter", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EPinned to the bottom of an \u003Ca href=\u0022cref:T:IzzyBlazor.AppSidebar\u0022\u003E\u003Ccode\u003EAppSidebar\u003C/code\u003E\u003C/a\u003E, below the scrolling content: an account menu or settings. Write it directly in the sidebar.\u003C/p\u003E", "examples": [ "\u003CSidebarFooter\u003E\u003CMenu ...\u003E...\u003C/Menu\u003E\u003C/SidebarFooter\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "SidebarHeader", "displayName": "SidebarHeader", "fullName": "IzzyBlazor.SidebarHeader", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EPinned to the top of an \u003Ca href=\u0022cref:T:IzzyBlazor.AppSidebar\u0022\u003E\u003Ccode\u003EAppSidebar\u003C/code\u003E\u003C/a\u003E, above the scrolling content: a brand or workspace switcher. In the drawer it shares the top bar with the close button. In the icon rail an \u003Ca href=\u0022cref:T:IzzyBlazor.AppBrand\u0022\u003E\u003Ccode\u003EAppBrand\u003C/code\u003E\u003C/a\u003E\u0026#39;s name hides by itself; mark other text with \u003Ccode\u003Eclass=\u0026quot;ib-collapsed-hide\u0026quot;\u003C/code\u003E. Write it directly in the sidebar.\u003C/p\u003E", "examples": [ "\u003CSidebarHeader\u003E\u003CAppBrand Href=\u0022/\u0022 Icon=\u0022Lucide.Zap\u0022 Label=\u0022Acme\u0022 /\u003E\u003C/SidebarHeader\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "SidebarToggle", "displayName": "SidebarToggle", "fullName": "IzzyBlazor.SidebarToggle", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe menu button that opens an AppShell\u0026#39;s sidebar below its breakpoint. Hidden above it. It is a link to the sidebar\u0026#39;s id, so it works with no JavaScript; with JavaScript the shell opens the drawer without changing the URL, and makes it a button (role, Space, aria-expanded kept in step). With no JavaScript it stays a link: it couldn\u0026#39;t keep aria-expanded true.\u003C/p\u003E\u003Cp\u003EWhen the sidebar is Collapsible, a second button takes its place above the breakpoint: a label for the sidebar\u0026#39;s collapse checkbox, so it works with no JavaScript too. The checkbox itself is the control screen readers and keyboards use; this label is a mouse shortcut.\u003C/p\u003E", "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Label", "type": "string?", "default": "\u0022Open menu\u0022", "summary": "\u003Cp\u003EThe accessible name. Defaults to \u0026quot;Open menu\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "For", "type": "string", "default": "\u0022ib-sidebar\u0022", "summary": "\u003Cp\u003EThe sidebar to open. Defaults to \u003Ccode\u003Eib-sidebar\u003C/code\u003E, AppShell\u0026#39;s default.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Ghost", "summary": "\u003Cp\u003EVisual weight. Defaults to ghost.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CloseLabel", "type": "string?", "default": "\u0022Close menu\u0022", "summary": "\u003Cp\u003EThe name of the button that takes the menu button\u0026#39;s place while a \u003Ca href=\u0022cref:F:IzzyBlazor.SidebarSmallScreen.Panel\u0022\u003E\u003Ccode\u003ESidebarSmallScreen.Panel\u003C/code\u003E\u003C/a\u003E sidebar is open. Defaults to \u0026quot;Close menu\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CollapseLabel", "type": "string?", "default": "\u0022Collapse sidebar\u0022", "summary": "\u003Cp\u003EThe tooltip on the wide-screen collapse button. Defaults to \u0026quot;Collapse sidebar\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ButtonVariant" ] }, { "name": "SiteNav", "displayName": "SiteNav", "fullName": "IzzyBlazor.SiteNav", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA site\u0026#39;s links in an AppHeader: a row of links on wide screens and, below Breakpoint, a menu button that opens the same links in a panel just under the header. The same button closes it (its icon turns into a close icon), so the header, with the site\u0026#39;s name, stays in view. For sites with no sidebar; an app with a sidebar puts its links there and uses SidebarToggle.\u003C/p\u003E", "remarks": "\u003Cp\u003EThe items render twice, once in the row and once in the panel; only one of them shows at a time. The panel is a native popover opened by its button, so it works with JavaScript off (light dismiss and Escape come from the browser). It sits under the header through CSS anchor positioning, or under the shell\u0026#39;s header height where that isn\u0026#39;t supported. With script, \u003Ccode\u003E\u0026lt;ib-site-nav\u0026gt;\u003C/code\u003E also closes it when a link is followed (enhanced navigation keeps the page) or the screen grows past the breakpoint, and moves focus to the first link when it opens.\u003C/p\u003E\u003Cp\u003EInside an AppShell with an AppSidebar, the menu button and panel stay hidden: below the breakpoint the links show at the top of the sidebar (its drawer on phones), so there is one menu.\u003C/p\u003E", "examples": [ "\u003CAppHeader\u003E\n \u003CAppBrand Href=\u0022/\u0022 Label=\u0022Acme\u0022 /\u003E\n \u003CBox Grow /\u003E\n \u003CSiteNav\u003E\n \u003CNavItem Href=\u0022/projects\u0022\u003EProjects\u003C/NavItem\u003E\n \u003CNavItem Href=\u0022/articles\u0022\u003EArticles\u003C/NavItem\u003E\n \u003CSiteNavFooter\u003E\u003CColorSchemeSwitch /\u003E\u003C/SiteNavFooter\u003E\n \u003C/SiteNav\u003E\n\u003C/AppHeader\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EThe links are in a \u003Ccode\u003Enav\u003C/code\u003E landmark named \u0026quot;Site\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E); in an AppShell with an AppSidebar, the copy shown on small screens is in the sidebar\u0026#39;s \u0026quot;Main\u0026quot; instead.\u003C/li\u003E\u003Cli\u003EThe links render more than once, but only one copy shows at a time, so screen readers meet them once.\u003C/li\u003E\u003Cli\u003EThe menu button is a native \u003Ccode\u003Ebutton\u003C/code\u003E named \u0026quot;Menu\u0026quot; (\u003Ccode\u003EMenuLabel\u003C/code\u003E) that opens a native popover: the browser reports whether it\u0026#39;s open, and Escape or a tap outside closes it, with no script.\u003C/li\u003E\u003Cli\u003EWith JavaScript, opening moves focus to the first link, and following a link closes the panel.\u003C/li\u003E\u003Cli\u003EThe panel doesn\u0026#39;t trap focus: Tab can move past its last link to the rest of the page.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "NavMenu", "AppSidebar", "AppShell", "Menu" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the panel opens and closes, but focus doesn\u0027t move into it." }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe links: \u003Ca href=\u0022cref:T:IzzyBlazor.NavItem\u0022\u003E\u003Ccode\u003ENavItem\u003C/code\u003E\u003C/a\u003E, plus \u003Ca href=\u0022cref:T:IzzyBlazor.NavDivider\u0022\u003E\u003Ccode\u003ENavDivider\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.SiteNav.NavLabel\u0022\u003E\u003Ccode\u003ENavLabel\u003C/code\u003E\u003C/a\u003E, and any \u003Ca href=\u0022cref:T:IzzyBlazor.SiteNavFooter\u0022\u003E\u003Ccode\u003ESiteNavFooter\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Breakpoint", "type": "Breakpoint", "default": "Breakpoint.Md", "summary": "\u003Cp\u003EBelow this width the links fold into the menu button. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Breakpoint.Md\u0022\u003E\u003Ccode\u003EBreakpoint.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe navigation landmark\u0026#39;s name for screen readers. Defaults to \u0026quot;Site\u0026quot;, so it differs from the sidebar\u0026#39;s \u0026quot;Main\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MenuLabel", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe menu button\u0026#39;s name. Defaults to \u0026quot;Menu\u0026quot;; screen readers also hear whether the panel is open.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MenuButtonPosition", "type": "MenuButtonPosition", "default": "MenuButtonPosition.End", "summary": "\u003Cp\u003EWhere the menu button sits in the header on small screens: \u003Ca href=\u0022cref:F:IzzyBlazor.MenuButtonPosition.End\u0022\u003E\u003Ccode\u003EMenuButtonPosition.End\u003C/code\u003E\u003C/a\u003E (the default), after everything else; \u003Ca href=\u0022cref:F:IzzyBlazor.MenuButtonPosition.Start\u0022\u003E\u003Ccode\u003EMenuButtonPosition.Start\u003C/code\u003E\u003C/a\u003E, before the brand, to match pages whose header starts with a \u003Ca href=\u0022cref:T:IzzyBlazor.SidebarToggle\u0022\u003E\u003Ccode\u003ESidebarToggle\u003C/code\u003E\u003C/a\u003E; or \u003Ca href=\u0022cref:F:IzzyBlazor.MenuButtonPosition.InPlace\u0022\u003E\u003Ccode\u003EMenuButtonPosition.InPlace\u003C/code\u003E\u003C/a\u003E, where the links are. Start and End move it visually (CSS order), so Tab still reaches it where the SiteNav is written.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.16" }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe panel\u0026#39;s id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Breakpoint", "MenuButtonPosition" ] }, { "name": "SiteNavFooter", "displayName": "SiteNavFooter", "fullName": "IzzyBlazor.SiteNavFooter", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EContent under the links in a \u003Ca href=\u0022cref:T:IzzyBlazor.SiteNav\u0022\u003E\u003Ccode\u003ESiteNav\u003C/code\u003E\u003C/a\u003E\u0026#39;s panel, shown below its breakpoint only: social links, a color scheme switch, a call to action. Write it directly in the SiteNav.\u003C/p\u003E", "examples": [ "\u003CSiteNavFooter\u003E\u003CButton Href=\u0022/signup\u0022 FullWidth\u003ESign up\u003C/Button\u003E\u003C/SiteNavFooter\u003E" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe part\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ComponentPart" } ], "events": [], "methods": [], "types": [] }, { "name": "Skeleton", "displayName": "Skeleton", "fullName": "IzzyBlazor.Skeleton", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA shimmering placeholder in the shape of content that\u0026#39;s still loading: lines of text, a block (an image, a card) or a circle (an avatar).\u003C/p\u003E", "examples": [ "\u003CSkeleton Lines=\u00223\u0022 /\u003E\n\u003CSkeleton Circle Width=\u0022Length.Rem(3)\u0022 /\u003E\n\u003CSkeleton Height=\u0022Length.Rem(10)\u0022 /\u003E @* a block, such as an image or a card *@\n\u003CSkeleton Loaded=\u0022_order is not null\u0022 Lines=\u00222\u0022\u003E@_order.Summary\u003C/Skeleton\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EThe placeholder has \u003Ccode\u003Earia-hidden=\u0026quot;true\u0026quot;\u003C/code\u003E, so screen readers skip it.\u003C/li\u003E\u003Cli\u003ENothing is announced while it loads or when \u003Ca href=\u0022cref:P:IzzyBlazor.Skeleton.Loaded\u0022\u003E\u003Ccode\u003ELoaded\u003C/code\u003E\u003C/a\u003E swaps in the content: announce the loading with a \u003Ca href=\u0022cref:T:IzzyBlazor.Spinner\u0022\u003E\u003Ccode\u003ESpinner\u003C/code\u003E\u003C/a\u003E or the region\u0026#39;s \u003Ccode\u003Earia-busy\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith reduced motion the shimmer slows down.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Spinner", "Progress", "EmptyState" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Lines", "type": "int", "default": "1", "summary": "\u003Cp\u003ELines of text to stand in for. The last of several is shorter. Defaults to 1.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Circle", "type": "bool", "default": "false", "summary": "\u003Cp\u003EA circle, such as an avatar. Its size is \u003Ccode\u003EWidth\u003C/code\u003E or \u003Ccode\u003EHeight\u003C/code\u003E (2.5rem by default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Loaded", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhen true, shows \u003Ca href=\u0022cref:P:IzzyBlazor.Skeleton.ChildContent\u0022\u003E\u003Ccode\u003EChildContent\u003C/code\u003E\u003C/a\u003E in place of the placeholder.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe real content, shown once \u003Ca href=\u0022cref:P:IzzyBlazor.Skeleton.Loaded\u0022\u003E\u003Ccode\u003ELoaded\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "Slider", "displayName": "Slider\u003CTValue\u003E", "fullName": "IzzyBlazor.Slider\u00601", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA range slider.\u003C/p\u003E", "examples": [ "\u003CSlider @bind-Value=\u0022Model.Volume\u0022 ShowValue /\u003E\n\u003CSlider @bind-Value=\u0022Model.Discount\u0022 Min=\u00220\u0022 Max=\u002250\u0022 Step=\u00225\u0022 ShowValue ValueFormat=\u0022{0}%\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native range \u003Ccode\u003Einput\u003C/code\u003E (a slider to screen readers): arrow keys, Page Up/Down and Home/End move it with no script.\u003C/li\u003E\u003Cli\u003EScreen readers hear the value as \u003Ccode\u003EValueFormat\u003C/code\u003E writes it (\u0026quot;20%\u0026quot;, through \u003Ccode\u003Earia-valuetext\u003C/code\u003E) once scripts run or on interactive pages; on a static page without script, the bare number.\u003C/li\u003E\u003Cli\u003EThe value \u003Ccode\u003EShowValue\u003C/code\u003E shows is hidden from screen readers, which hear the slider\u0026#39;s own value.\u003C/li\u003E\u003Cli\u003ELabel, hint and errors work as in \u003Ccode\u003ETextField\u003C/code\u003E.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "NumberField", "SegmentedControl", "Progress" ], "typeParameters": [ "TValue" ], "bases": [ "FieldBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the track doesn\u0027t fill to the thumb and the value doesn\u0027t follow it." }, "properties": [ { "name": "Min", "type": "double?", "default": "computed", "summary": "\u003Cp\u003EThe lowest value. Defaults to \u003Ccode\u003E[Range]\u003C/code\u003E\u0026#39;s minimum, or 0.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Max", "type": "double?", "default": "computed", "summary": "\u003Cp\u003EThe highest value. Defaults to \u003Ccode\u003E[Range]\u003C/code\u003E\u0026#39;s maximum, or 100.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Step", "type": "double?", "default": "1", "summary": "\u003Cp\u003EThe step between values. Defaults to 1.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ShowValue", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows the current value beside the slider.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ValueFormat", "type": "string", "default": "\u0022{0}\u0022", "summary": "\u003Cp\u003EHow the value reads, with \u003Ccode\u003E{0}\u003C/code\u003E for the number: \u003Ccode\u003E\u0026quot;{0}%\u0026quot;\u003C/code\u003E, \u003Ccode\u003E\u0026quot;${0}\u0026quot;\u003C/code\u003E. Used for the shown value and for what screen readers announce. Defaults to the number alone.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Live", "type": "bool", "default": "false", "summary": "\u003Cp\u003EOn interactive pages, update the bound value while dragging rather than on release. Each move is a round trip, so use it only when something on the page follows the value live.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "TValue", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [] }, { "name": "Spacer", "displayName": "Spacer", "fullName": "IzzyBlazor.Spacer", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003ETakes up the free space in a \u003Ca href=\u0022cref:T:IzzyBlazor.Stack\u0022\u003E\u003Ccode\u003EStack\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:T:IzzyBlazor.Row\u0022\u003E\u003Ccode\u003ERow\u003C/code\u003E\u003C/a\u003E, pushing what follows to the end.\u003C/p\u003E", "examples": [ "\u003CRow\u003E\u003CLogo /\u003E\u003CSpacer /\u003E\u003CButton\u003ESign in\u003C/Button\u003E\u003C/Row\u003E" ], "seeAlso": [ "Row", "Stack", "Box" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [] }, { "name": "Spinner", "displayName": "Spinner", "fullName": "IzzyBlazor.Spinner", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA spinning ring that says something is working. Sized in em like \u003Ca href=\u0022cref:T:IzzyBlazor.Icon\u0022\u003E\u003Ccode\u003EIcon\u003C/code\u003E\u003C/a\u003E, so it matches the text beside it, and announced to screen readers as \u003Ca href=\u0022cref:P:IzzyBlazor.Spinner.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E. Pure CSS: it spins on static pages too.\u003C/p\u003E", "examples": [ "\u003CSpinner /\u003E \u003CSpinner Size=\u0022IconSize.Xl2\u0022 Color=\u0022Color.Primary\u0022 Label=\u0022Loading orders\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt has \u003Ccode\u003Erole=\u0026quot;status\u0026quot;\u003C/code\u003E and visually hidden text, \u003Ca href=\u0022cref:P:IzzyBlazor.Spinner.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E (default \u0026quot;Loading\u0026quot;); the ring itself is hidden from screen readers.\u003C/li\u003E\u003Cli\u003EWith reduced motion it spins more slowly rather than stopping, since the motion says \u0026quot;still working\u0026quot;.\u003C/li\u003E\u003Cli\u003EFor a button that\u0026#39;s working, use its \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Loading\u0022\u003E\u003Ccode\u003ELoading\u003C/code\u003E\u003C/a\u003E, which sets \u003Ccode\u003Earia-busy\u003C/code\u003E, rather than a spinner inside it.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Progress", "Skeleton", "Button" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Size", "type": "IconSize", "default": "IconSize.Md", "summary": "\u003Cp\u003ESize, on the same scale as icons (relative to the text). Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.IconSize.Md\u0022\u003E\u003Ccode\u003EIconSize.Md\u003C/code\u003E\u003C/a\u003E (1em).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Color", "type": "Color?", "default": "computed", "summary": "\u003Cp\u003EThe ring\u0026#39;s color. Defaults to the text color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Loading\u0022", "summary": "\u003Cp\u003EWhat screen readers hear. Defaults to \u0026quot;Loading\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Color", "IconSize" ] }, { "name": "Stack", "displayName": "Stack", "fullName": "IzzyBlazor.Stack", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EThe general flexbox container: vertical by default, any direction with \u003Ca href=\u0022cref:P:IzzyBlazor.Stack.Direction\u0022\u003E\u003Ccode\u003EDirection\u003C/code\u003E\u003C/a\u003E, which can change per breakpoint. For a direction that never changes, \u003Ca href=\u0022cref:T:IzzyBlazor.Row\u0022\u003E\u003Ccode\u003ERow\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.Column\u0022\u003E\u003Ccode\u003EColumn\u003C/code\u003E\u003C/a\u003E say it in the name.\u003C/p\u003E", "examples": [ "\u003CStack Direction=\u0022new() { Base = Direction.Column, Md = Direction.Row }\u0022 Gap=\u00224\u0022 Align=\u0022Align.Center\u0022\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Ediv\u003C/code\u003E with no role; \u003Ccode\u003EAs\u003C/code\u003E makes it another element, such as \u003Ccode\u003Eul\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:F:IzzyBlazor.Direction.RowReverse\u0022\u003E\u003Ccode\u003EDirection.RowReverse\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:F:IzzyBlazor.Direction.ColumnReverse\u0022\u003E\u003Ccode\u003EDirection.ColumnReverse\u003C/code\u003E\u003C/a\u003E reverse only what people see: keyboard and screen-reader order stays the source order.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Row", "Column", "Grid", "Spacer" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Direction", "type": "Responsive\u003CDirection\u003E", "default": "computed", "summary": "\u003Cp\u003ELayout direction. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Direction.Column\u0022\u003E\u003Ccode\u003EDirection.Column\u003C/code\u003E\u003C/a\u003E (vertical).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Gap", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ESpace between children, in spacing steps (0 to 16).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Align", "type": "Responsive\u003CAlign\u003E", "default": "computed", "summary": "\u003Cp\u003ECross-axis alignment. Defaults to stretch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Justify", "type": "Responsive\u003CJustify\u003E", "default": "computed", "summary": "\u003Cp\u003EMain-axis distribution. Defaults to start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "FlexBase" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether children wrap onto new lines: \u003Ccode\u003E\u0026lt;Row Wrap\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "Inline", "type": "bool", "default": "false", "summary": "\u003Cp\u003ERenders as \u003Ccode\u003Einline-flex\u003C/code\u003E so the container sits in a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "FlexBase" }, { "name": "As", "type": "string", "default": "\u0022div\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "Align", "Direction", "Justify" ] }, { "name": "Stat", "displayName": "Stat", "fullName": "IzzyBlazor.Stat", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA key figure: a label, a large value, and optionally how it changed and a note. No script.\u003C/p\u003E", "examples": [ "\u003CStat Label=\u0022Revenue\u0022 Value=\u0022$48,210\u0022 Change=\u002212%\u0022 Trend=\u0022StatTrend.Up\u0022 Description=\u0022vs last month\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Edl\u003C/code\u003E: \u003Ccode\u003ELabel\u003C/code\u003E is the \u003Ccode\u003Edt\u003C/code\u003E, the value a \u003Ccode\u003Edd\u003C/code\u003E, and the change and note share a second \u003Ccode\u003Edd\u003C/code\u003E, so the label names the figure for screen readers.\u003C/li\u003E\u003Cli\u003EThe trend arrow is hidden from screen readers; the change is read with \u003Ccode\u003ETrendLabel\u003C/code\u003E in front of it, \u0026quot;Up\u0026quot;, \u0026quot;Down\u0026quot; or \u0026quot;No change\u0026quot; by default.\u003C/li\u003E\u003Cli\u003EThe change\u0026#39;s color isn\u0026#39;t read, so when the color carries meaning (\u003Ccode\u003EChangeStatus\u003C/code\u003E), say it in \u003Ccode\u003EDescription\u003C/code\u003E or \u003Ccode\u003ETrendLabel\u003C/code\u003E too.\u003C/li\u003E\u003Cli\u003EThe \u003Ccode\u003EIcon\u003C/code\u003E is decorative and hidden from screen readers.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Card", "DescriptionList", "Progress", "Badge" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EWhat the figure is, such as \u0026quot;Revenue\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe figure, such as \u0026quot;$48,210\u0026quot;. Format it the way it should read.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003ECustom value content, such as a number with a unit in smaller text. Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.Stat.Value\u0022\u003E\u003Ccode\u003EValue\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Change", "type": "string?", "summary": "\u003Cp\u003EHow much it changed, such as \u0026quot;12%\u0026quot; or \u0026quot;\u002B340\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Trend", "type": "StatTrend", "default": "StatTrend.None", "summary": "\u003Cp\u003EWhich way it moved: adds an arrow before \u003Ca href=\u0022cref:P:IzzyBlazor.Stat.Change\u0022\u003E\u003Ccode\u003EChange\u003C/code\u003E\u003C/a\u003E and colors it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChangeStatus", "type": "Status?", "summary": "\u003Cp\u003EThe change\u0026#39;s color. By default up is \u003Ca href=\u0022cref:F:IzzyBlazor.Status.Success\u0022\u003E\u003Ccode\u003EStatus.Success\u003C/code\u003E\u003C/a\u003E, down is \u003Ca href=\u0022cref:F:IzzyBlazor.Status.Danger\u0022\u003E\u003Ccode\u003EStatus.Danger\u003C/code\u003E\u003C/a\u003E and flat is neutral; set it when down is good, such as for costs or response times.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TrendLabel", "type": "string?", "default": "computed", "summary": "\u003Cp\u003ERead before the change in place of the arrow. Defaults to \u0026quot;Up\u0026quot;, \u0026quot;Down\u0026quot; or \u0026quot;No change\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Description", "type": "string?", "summary": "\u003Cp\u003EA muted note after the change, such as \u0026quot;vs last month\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon in a tinted square at the end.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EText size. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ControlSize", "StatTrend", "Status" ] }, { "name": "Step", "displayName": "Step", "fullName": "IzzyBlazor.Step", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EOne step in a Stepper: a numbered marker (a check once done), its label and an optional description. For a step that only sometimes applies, set Hidden rather than wrapping it in @if: Blazor renders a step added later after the others, which would number it out of order.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe step\u0026#39;s name, such as \u0026quot;Shipping\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Description", "type": "string?", "summary": "\u003Cp\u003EA muted line under the label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EMakes the label a link, such as back to a finished step.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Hidden", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELeaves the step out (not rendered, not numbered) while keeping its place, for a step that only sometimes applies. Use this rather than \u003Ccode\u003E@if\u003C/code\u003E, which would number a step that appears later out of order.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon in the marker in place of the number (until the step is done).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "Stepper", "displayName": "Stepper", "fullName": "IzzyBlazor.Stepper", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EWhere someone is in a process, such as a checkout or a setup wizard: an ordered list of steps, those before Current marked done, Current marked with aria-current=\u0026quot;step\u0026quot;. Steps with an Href are links (to go back to a finished step, say). A row; on phones only the current step\u0026#39;s text shows, beside a row of markers. No script.\u003C/p\u003E", "examples": [ "\u003CStepper Current=\u00222\u0022\u003E\n \u003CStep Label=\u0022Account\u0022 Href=\u0022/signup/account\u0022 /\u003E\n \u003CStep Label=\u0022Profile\u0022 Description=\u0022Name and photo\u0022 /\u003E\n \u003CStep Label=\u0022Done\u0022 /\u003E\n\u003C/Stepper\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders an ordered list named \u0026quot;Progress\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E); the current step has \u003Ccode\u003Earia-current=\u0026quot;step\u0026quot;\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EThe markers are hidden from screen readers; a finished step\u0026#39;s check mark is heard as \u0026quot;(completed)\u0026quot; after its label (\u003Ccode\u003ECompletedLabel\u003C/code\u003E).\u003C/li\u003E\u003Cli\u003EA step with \u003Ccode\u003EHref\u003C/code\u003E is a plain link; the others are text and don\u0026#39;t take focus.\u003C/li\u003E\u003Cli\u003EIt doesn\u0026#39;t move focus or announce anything when \u003Ccode\u003ECurrent\u003C/code\u003E changes: a wizard moves focus itself, such as to the new step\u0026#39;s heading.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Progress", "Tabs", "Timeline" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe \u003Ca href=\u0022cref:T:IzzyBlazor.Step\u0022\u003E\u003Ccode\u003EStep\u003C/code\u003E\u003C/a\u003Es, in order.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Current", "type": "int", "default": "1", "summary": "\u003Cp\u003EThe current step, counting from 1. Steps before it show as done. Past the last step, every step is done; 0 means none has started.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Orientation", "type": "Orientation", "default": "Orientation.Horizontal", "summary": "\u003Cp\u003EA row (the default) or a column. On phones a row shows only the current step\u0026#39;s label; the other steps are markers, and a finished step with an \u003Ca href=\u0022cref:P:IzzyBlazor.Step.Href\u0022\u003E\u003Ccode\u003EHref\u003C/code\u003E\u003C/a\u003E is still a link on its marker.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Progress\u0022", "summary": "\u003Cp\u003EThe list\u0026#39;s accessible name. Defaults to \u0026quot;Progress\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CompletedLabel", "type": "string?", "default": "\u0022(completed)\u0022", "summary": "\u003Cp\u003ERead after a finished step\u0026#39;s label, in place of its check mark. Defaults to \u0026quot;(completed)\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EThe marker and text size. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ControlSize", "Orientation" ] }, { "name": "Switch", "displayName": "Switch", "fullName": "IzzyBlazor.Switch", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EAn on/off switch: a checkbox with \u003Ccode\u003Erole=\u0026quot;switch\u0026quot;\u003C/code\u003E and a track-and-thumb look. Use it for settings that apply immediately or read as on/off; use \u003Ca href=\u0022cref:T:IzzyBlazor.Checkbox\u0022\u003E\u003Ccode\u003ECheckbox\u003C/code\u003E\u003C/a\u003E for agreeing or choosing.\u003C/p\u003E", "examples": [ "\u003CSwitch @bind-Value=\u0022Model.EmailNotifications\u0022 Label=\u0022Email notifications\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native checkbox with \u003Ccode\u003Erole=\u0026quot;switch\u0026quot;\u003C/code\u003E inside its \u003Ccode\u003Elabel\u003C/code\u003E, so Space toggles it and screen readers hear \u0026quot;on\u0026quot; or \u0026quot;off\u0026quot;.\u003C/li\u003E\u003Cli\u003EThe label text names it; the hint and errors are linked with \u003Ccode\u003Earia-describedby\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EIn Windows high-contrast mode it shows as the browser\u0026#39;s own checkbox.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Checkbox", "SegmentedControl", "CheckboxGroup" ], "bases": [ "FieldBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003ERich label content, such as text with a link. Overrides \u003Ccode\u003ELabel\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Checkbox" }, { "name": "ControlPosition", "type": "ControlPosition", "default": "ControlPosition.Start", "summary": "\u003Cp\u003EWhich side of the label the box or switch sits on. \u003Ccode\u003EEnd\u003C/code\u003E puts it at the end of the row, with the hint and errors under the label, as in a list of settings. Defaults to \u003Ccode\u003EStart\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Checkbox" }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the label, such as a key for a security setting. With \u003Ccode\u003EControlPosition.End\u003C/code\u003E it\u0026#39;s centered on the label and hint, at the start of the row. Decorative: screen readers read only the label. Use icons on every row of a group or none.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Checkbox" }, { "name": "Value", "type": "bool", "default": "false", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [ "ControlPosition" ] }, { "name": "Tab", "displayName": "Tab", "fullName": "IzzyBlazor.Tab", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EOne tab of a Tabs: its label goes in the tab list and its content in a panel. All panels are rendered; CSS shows the selected one.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe label in the tab list.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Value", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe value that identifies this tab in \u003Ccode\u003E@bind-Selected\u003C/code\u003E and in the URL. Defaults to the title in lower case with dashes, such as \u003Ccode\u003Ebilling-history\u003C/code\u003E. Tabs that end up with the same value get \u003Ccode\u003E-2\u003C/code\u003E, \u003Ccode\u003E-3\u003C/code\u003E... added.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Badge", "type": "string?", "summary": "\u003Cp\u003EA small count or label after the title, such as \u0026quot;3\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows the tab but stops it being selected.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContentPadding", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EPadding inside this tab\u0026#39;s panel, in spacing steps, in place of the tabs\u0026#39; \u003Ccode\u003EContentPadding\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe panel content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] }, { "name": "TabLink", "displayName": "TabLink", "fullName": "IzzyBlazor.TabLink", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA tab that\u0026#39;s a link to its own page, for sections split across routes (/settings/profile, /settings/billing). A Tabs holding TabLinks renders a nav of real links: no script, no panels, and the tab for the current page is marked from the URL on the server. Don\u0026#39;t mix TabLinks with Tabs that have panels.\u003C/p\u003E", "examples": [ "\u003CTabs Label=\u0022Settings\u0022\u003E\n \u003CTabLink Href=\u0022settings/profile\u0022 Label=\u0022Profile\u0022 Icon=\u0022Lucide.User\u0022 /\u003E\n \u003CTabLink Href=\u0022settings/billing\u0022 Label=\u0022Billing\u0022 Badge=\u00222\u0022 /\u003E\n\u003C/Tabs\u003E" ], "bases": [], "properties": [ { "name": "Href", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe page the tab links to.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe tab\u0026#39;s text.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Badge", "type": "string?", "summary": "\u003Cp\u003EA small count or label after the text, such as \u0026quot;3\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows the tab but not as a link.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Match", "type": "NavLinkMatch", "default": "NavLinkMatch.Prefix", "summary": "\u003Cp\u003EHow the current URL must match \u003Ca href=\u0022cref:P:IzzyBlazor.TabLink.Href\u0022\u003E\u003Ccode\u003EHref\u003C/code\u003E\u003C/a\u003E for the tab to be selected. \u003Ccode\u003EPrefix\u003C/code\u003E (the default) also selects it on pages below it. A link with a query string (\u003Ccode\u003E?tab=billing\u003C/code\u003E) is selected only when the current query string is the same, and then a tab whose link has no query isn\u0026#39;t, so tabs for one page told apart by the query select one at a time.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Current", "type": "bool?", "summary": "\u003Cp\u003EMarks the tab current (\u003Ccode\u003Etrue\u003C/code\u003E) or not (\u003Ccode\u003Efalse\u003C/code\u003E) whatever the URL, for a choice the page knows from elsewhere, such as a cookie. Unset (the default): from the URL, by \u003Ca href=\u0022cref:P:IzzyBlazor.TabLink.Match\u0022\u003E\u003Ccode\u003EMatch\u003C/code\u003E\u003C/a\u003E, unless another tab is set current. A current tab set this way has \u003Ccode\u003Earia-current=\u0026quot;true\u0026quot;\u003C/code\u003E (a choice, not necessarily this page); a disabled tab is never current.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.16" } ], "events": [], "methods": [], "types": [] }, { "name": "Table", "displayName": "Table\u003CTItem\u003E", "fullName": "IzzyBlazor.Table\u00601", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA data table that sorts and pages through the URL: column headers and page numbers are links that set ?sort= and ?page=, so it works on static pages with no script, survives reloads, and can be shared. On interactive pages the links are ordinary navigations (with enhanced navigation the server renders the page again) and the table follows the URL.\u003C/p\u003E\u003Cp\u003EFilterable columns add a filter row under the headers. Filters go in the URL too (?f-customer=ada): with no script the boxes submit a GET form when you press Enter; with script they apply as you type.\u003C/p\u003E\u003Cp\u003EBind Sort, Page or Filters (@bind-Sort, @bind-Page, @bind-Filters) on an interactive page to keep them in the component instead: headers and page numbers become buttons, the URL doesn\u0026#39;t change, and the table sorts and pages in place, like a client-side grid. It starts from the URL\u0026#39;s values.\u003C/p\u003E\u003Cp\u003EGive it Items (a list, or an IQueryable that EF Core translates) and it sorts and pages them, or an ItemsProvider to load each page yourself.\u003C/p\u003E\u003Cp\u003ESelectable adds a checkbox per row: it posts the row\u0026#39;s ItemKey with the surrounding form, and @bind-SelectedKeys follows it on interactive pages. RowHref makes each row a link. Columns take FooterText or Footer for a footer row.\u003C/p\u003E", "examples": [ "\u003CTable Items=\u0022orders\u0022 PageSize=\u002210\u0022 Caption=\u0022Orders\u0022\u003E\n \u003CPropertyColumn Property=\u0022o =\u003E o.Customer\u0022 Sortable /\u003E\n \u003CPropertyColumn Property=\u0022o =\u003E o.Total\u0022 Format=\u0022C\u0022 Sortable /\u003E\n \u003CTemplateColumn Title=\u0022Status\u0022\u003E\u003CBadge\u003E@context.Status\u003C/Badge\u003E\u003C/TemplateColumn\u003E\n\u003C/Table\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003E\u003Ccode\u003ECaption\u003C/code\u003E names the table for screen readers; it isn\u0026#39;t shown. It also names the scrolling area, which can be scrolled from the keyboard.\u003C/li\u003E\u003Cli\u003ESortable headers are links, and the sorted column has \u003Ccode\u003Earia-sort\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EEach filter button is named for its column (\u0026quot;Filter Customer\u0026quot;), and the active filters are a group named \u0026quot;Filters\u0026quot;.\u003C/li\u003E\u003Cli\u003ERow checkboxes are named \u0026quot;Select\u0026quot; and the row\u0026#39;s \u003Ccode\u003ERowLabel\u003C/code\u003E (\u0026quot;Select order 1001\u0026quot;); without one, the \u003Ccode\u003EItemKey\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EThe range under the table (\u0026quot;1\u20135 of 23\u0026quot;) is read when it changes.\u003C/li\u003E\u003C/ul\u003E", "typeParameters": [ "TItem" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, there\u0027s no select-all checkbox, and filters apply when you press Apply, not as you type." }, "properties": [ { "name": "Items", "type": "IEnumerable\u003CTItem\u003E?", "summary": "\u003Cp\u003EThe items. A list is sorted and paged in memory; an \u003Ccode\u003EIQueryable\u003C/code\u003E (such as an EF Core query) is sorted and paged by the database.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemsProvider", "type": "Func\u003CTableRequest\u003CTItem\u003E, ValueTask\u003CTableResult\u003CTItem\u003E\u003E\u003E?", "summary": "\u003Cp\u003ELoads one page of items yourself, in place of \u003Ca href=\u0022cref:P:IzzyBlazor.Table\u00601.Items\u0022\u003E\u003Ccode\u003EItems\u003C/code\u003E\u003C/a\u003E. Use \u003Ca href=\u0022cref:M:IzzyBlazor.TableRequest\u00601.Apply(System.Linq.IQueryable{\u00600})\u0022\u003E\u003Ccode\u003EApply\u003C/code\u003E\u003C/a\u003E on your query.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe columns: \u003Ca href=\u0022cref:T:IzzyBlazor.PropertyColumn\u00602\u0022\u003E\u003Ccode\u003EPropertyColumn\u0026lt;T1, T2\u0026gt;\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.TemplateColumn\u00601\u0022\u003E\u003Ccode\u003ETemplateColumn\u0026lt;T\u0026gt;\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PageSize", "type": "int?", "summary": "\u003Cp\u003EItems per page. Leave it out to show every item.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "PageSizeOptions", "type": "IReadOnlyList\u003Cint\u003E?", "summary": "\u003Cp\u003ESizes to choose from in a \u0026quot;Rows per page\u0026quot; menu in the footer, such as \u003Ccode\u003Enew[] { 10, 25, 50 }\u003C/code\u003E. The URL carries the choice (\u003Ccode\u003E?size=25\u003C/code\u003E); only these sizes are accepted from it. \u003Ca href=\u0022cref:P:IzzyBlazor.Table\u00601.PageSize\u0022\u003E\u003Ccode\u003EPageSize\u003C/code\u003E\u003C/a\u003E is the default (the first option when not set).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "InitialSort", "type": "string?", "summary": "\u003Cp\u003EThe sort when the URL has none, such as \u003Ccode\u003E\u0026quot;name\u0026quot;\u003C/code\u003E or \u003Ccode\u003E\u0026quot;-date\u0026quot;\u003C/code\u003E (descending).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sort", "type": "string?", "summary": "\u003Cp\u003EThe sort, such as \u003Ccode\u003E\u0026quot;name\u0026quot;\u003C/code\u003E or \u003Ccode\u003E\u0026quot;-date\u0026quot;\u003C/code\u003E (descending); null for \u003Ca href=\u0022cref:P:IzzyBlazor.Table\u00601.InitialSort\u0022\u003E\u003Ccode\u003EInitialSort\u003C/code\u003E\u003C/a\u003E. Binding it (\u003Ccode\u003E@bind-Sort\u003C/code\u003E) on an interactive page keeps sort and page in the component instead of the URL.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "Page", "type": "int?", "summary": "\u003Cp\u003EThe page, from 1. Binding it (\u003Ccode\u003E@bind-Page\u003C/code\u003E) on an interactive page keeps sort and page in the component instead of the URL. Set it back to 1 when your filters change.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "FilterPlacement", "type": "FilterPlacement", "default": "FilterPlacement.Header", "summary": "\u003Cp\u003EWhere the column filters go: a filter button in each header that opens the filter (\u003Ca href=\u0022cref:F:IzzyBlazor.FilterPlacement.Header\u0022\u003E\u003Ccode\u003EFilterPlacement.Header\u003C/code\u003E\u003C/a\u003E, the default, with the active filters as removable tags above the table), or a row of fields under the headers (\u003Ca href=\u0022cref:F:IzzyBlazor.FilterPlacement.Row\u0022\u003E\u003Ccode\u003EFilterPlacement.Row\u003C/code\u003E\u003C/a\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Filters", "type": "IReadOnlyDictionary\u003Cstring, string\u003E?", "summary": "\u003Cp\u003EThe filter values of \u003Ca href=\u0022cref:P:IzzyBlazor.ColumnBase\u00601.Filterable\u0022\u003E\u003Ccode\u003EFilterable\u003C/code\u003E\u003C/a\u003E columns, by column key (\u003Ccode\u003E\u0026quot;customer\u0026quot;\u003C/code\u003E \u2192 \u003Ccode\u003E\u0026quot;ada\u0026quot;\u003C/code\u003E). Binding it (\u003Ccode\u003E@bind-Filters\u003C/code\u003E) on an interactive page keeps filters, sort and page in the component instead of the URL.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "QueryPrefix", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EPrefix for this table\u0026#39;s query-string keys, so several tables can share a page: \u003Ccode\u003EQueryPrefix=\u0026quot;orders-\u0026quot;\u003C/code\u003E uses \u003Ccode\u003E?orders-sort=\u003C/code\u003E and \u003Ccode\u003E?orders-page=\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Caption", "type": "string?", "summary": "\u003Cp\u003EThe table\u0026#39;s name for screen readers (a visually hidden caption).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EmptyContent", "type": "RenderFragment?", "default": "computed", "summary": "\u003Cp\u003EShown when there are no items. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.Table\u00601.EmptyText\u0022\u003E\u003Ccode\u003EEmptyText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EmptyText", "type": "string?", "default": "\u0022No items\u0022", "summary": "\u003Cp\u003EThe text when there are no items. Defaults to \u0026quot;No items\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RowClass", "type": "Func\u003CTItem, string?\u003E?", "summary": "\u003Cp\u003EA class for each row, such as one that highlights overdue orders.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Striped", "type": "bool", "default": "false", "summary": "\u003Cp\u003EAlternating row backgrounds.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RowLines", "type": "bool", "default": "true", "summary": "\u003Cp\u003EA line between rows. Defaults to true; the line under the header always shows.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ColumnLines", "type": "bool", "default": "false", "summary": "\u003Cp\u003EA line between columns. Defaults to false.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bordered", "type": "bool", "default": "true", "summary": "\u003Cp\u003EA rounded border around the table. Defaults to true; false for a table that sits inside a card or panel.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003ERow height and text size. \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Sm\u0022\u003E\u003Ccode\u003EControlSize.Sm\u003C/code\u003E\u003C/a\u003E for dense data. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MaxHeight", "type": "Length?", "summary": "\u003Cp\u003EA height limit: the rows scroll and the header stays in view.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ItemKey", "type": "Func\u003CTItem, string\u003E?", "default": "computed", "summary": "\u003Cp\u003EA unique, stable key for each item, such as its id. Selection posts and binds these keys. Defaults to the item\u0026#39;s string form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Selectable", "type": "bool", "default": "false", "summary": "\u003Cp\u003EAdds a checkbox to each row. Inside a form, the checked rows post their \u003Ca href=\u0022cref:P:IzzyBlazor.Table\u00601.ItemKey\u0022\u003E\u003Ccode\u003EItemKey\u003C/code\u003E\u003C/a\u003E under \u003Ca href=\u0022cref:P:IzzyBlazor.Table\u00601.SelectionName\u0022\u003E\u003Ccode\u003ESelectionName\u003C/code\u003E\u003C/a\u003E; on interactive pages \u003Ccode\u003E@bind-SelectedKeys\u003C/code\u003E follows them. With script, a header checkbox selects every row on the page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SelectionName", "type": "string?", "default": "\u0022{QueryPrefix}selected\u0022", "summary": "\u003Cp\u003EThe form field name the checked rows post under. Defaults to \u003Ccode\u003E\u0026quot;{QueryPrefix}selected\u0026quot;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SelectedKeys", "type": "IReadOnlyCollection\u003Cstring\u003E?", "summary": "\u003Cp\u003EThe keys of the selected rows (on any page). Read the posted ones with \u003Ccode\u003E[SupplyParameterFromForm]\u003C/code\u003E on static pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "RowHref", "type": "Func\u003CTItem, string?\u003E?", "summary": "\u003Cp\u003EMakes each row a link, such as to the item\u0026#39;s details page. The whole row is clickable; links, buttons and checkboxes inside it still work on their own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RowLabel", "type": "Func\u003CTItem, string\u003E?", "default": "computed", "summary": "\u003Cp\u003ENames a row for screen readers, in its link and its checkbox. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.Table\u00601.ItemKey\u0022\u003E\u003Ccode\u003EItemKey\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Loading", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows the table as loading: rows dim, or placeholder rows show while there are none. Set automatically while an \u003Ca href=\u0022cref:P:IzzyBlazor.Table\u00601.ItemsProvider\u0022\u003E\u003Ccode\u003EItemsProvider\u003C/code\u003E\u003C/a\u003E loads on interactive pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SelectAllLabel", "type": "string?", "default": "\u0022Select all rows\u0022", "summary": "\u003Cp\u003EThe header checkbox\u0026#39;s name for screen readers. Defaults to \u0026quot;Select all rows\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SelectRowLabel", "type": "string?", "default": "\u0022Select\u0022", "summary": "\u003Cp\u003EThe start of each row checkbox\u0026#39;s name for screen readers, before \u003Ca href=\u0022cref:P:IzzyBlazor.Table\u00601.RowLabel\u0022\u003E\u003Ccode\u003ERowLabel\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Select\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ControlSize", "FilterPlacement", "Length", "TableRequest", "TableResult" ] }, { "name": "Tabs", "displayName": "Tabs", "fullName": "IzzyBlazor.Tabs", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA set of tabs, in three layers:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003ENo script: each tab holds a radio button and its label, and CSS :has(:checked) shows the matching panel. Switching is instant and keeps form input; arrow keys move between tabs like any radio group.\u003C/li\u003E\u003Cli\u003EWith script: \u003Ccode\u003E\u0026lt;ib-tabs\u0026gt;\u003C/code\u003E turns the list into ARIA tabs (tablist, tab, aria-selected, roving focus) and, with QueryKey, keeps the URL in step so the tab can be linked to.\u003C/li\u003E\u003Cli\u003EInteractive: @bind-Selected follows the radios\u0026#39; change events and can set the tab from C#.\u003C/li\u003E\u003C/ul\u003E", "remarks": "\u003Cp\u003EOrientation=\u0026quot;Orientation.Vertical\u0026quot; puts the tabs in a column beside the panels from 640px up (a scrolling row above them on phones). With TabLink children instead of Tab, it renders a nav of links to separate pages; see TabLink. Up to 30 tabs show their panels: the CSS has a rule for each position.\u003C/p\u003E", "examples": [ "\u003CTabs @bind-Selected=\u0022tab\u0022 Label=\u0022Account\u0022\u003E\n \u003CTab Label=\u0022Profile\u0022 Icon=\u0022Lucide.User\u0022\u003E...\u003C/Tab\u003E\n \u003CTab Label=\u0022Billing\u0022 Badge=\u00222\u0022\u003E...\u003C/Tab\u003E\n\u003C/Tabs\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EWith script, the list is ARIA tabs (\u003Ccode\u003Etablist\u003C/code\u003E, \u003Ccode\u003Etab\u003C/code\u003E, \u003Ccode\u003Etabpanel\u003C/code\u003E, \u003Ccode\u003Earia-selected\u003C/code\u003E) with only the selected tab in the tab order; with JavaScript off it\u0026#39;s heard as a radio group.\u003C/li\u003E\u003Cli\u003EArrow keys select the next or previous tab, skipping disabled ones; with script, Home and End go to the first and last, and vertical tabs laid out as a column use Up and Down.\u003C/li\u003E\u003Cli\u003EIn a form with JavaScript off, there are no tabs: every panel shows in order, each after its tab\u0026#39;s label as plain text, so every field can be filled in.\u003C/li\u003E\u003Cli\u003EWith script, each panel is named by its tab and takes focus, so Tab moves from the tab to the panel.\u003C/li\u003E\u003Cli\u003E\u003Ccode\u003ELabel\u003C/code\u003E names the tab list (or the \u003Ccode\u003Enav\u003C/code\u003E of TabLinks). It\u0026#39;s optional, as in ARIA and other libraries, with no default; set it when the tabs\u0026#39; purpose isn\u0026#39;t clear from the heading before them, and give each \u003Ccode\u003Enav\u003C/code\u003E of TabLinks its own when a page has more than one.\u003C/li\u003E\u003Cli\u003EIn a form, with script, a tab whose fields have errors shows a count, read as part of its name (\u0026quot;Billing (1 error)\u0026quot;).\u003C/li\u003E\u003Cli\u003ETabLinks render a \u003Ccode\u003Enav\u003C/code\u003E of plain links that Tab moves between (no arrow keys); the current page\u0026#39;s link has \u003Ccode\u003Earia-current\u003C/code\u003E, and a disabled one is a link with no \u003Ccode\u003Ehref\u003C/code\u003E, announced as disabled (\u003Ccode\u003Earia-disabled\u003C/code\u003E).\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "SegmentedControl", "NavMenu", "Accordion" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, tabs switch as a radio group, but screen readers don\u0027t hear them as tabs and the URL doesn\u0027t follow." }, "properties": [ { "name": "Selected", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe selected tab\u0026#39;s \u003Ca href=\u0022cref:P:IzzyBlazor.Tab.Value\u0022\u003E\u003Ccode\u003EValue\u003C/code\u003E\u003C/a\u003E. Defaults to the first tab that isn\u0026#39;t disabled.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe tab list\u0026#39;s (or the TabLinks\u0026#39; \u003Ccode\u003Enav\u003C/code\u003E\u0026#39;s) name for screen readers, such as \u0026quot;Account settings\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "QueryKey", "type": "string?", "summary": "\u003Cp\u003EKeeps the selected tab in the URL under this query-string key, such as \u003Ccode\u003Etab\u003C/code\u003E: a link to \u003Ccode\u003E?tab=billing\u003C/code\u003E opens that tab, and with JavaScript switching tabs updates the URL.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "TabsVariant", "default": "TabsVariant.Line", "summary": "\u003Cp\u003EHow the tabs look. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.TabsVariant.Line\u0022\u003E\u003Ccode\u003ETabsVariant.Line\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003ETab height and text size, shared with buttons and fields. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches the tabs to share the full width (or, vertical, the list\u0026#39;s width).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContentPadding", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EPadding on every side of each panel, in spacing steps, in place of the default space above and below (the default has none at the sides). \u003Ccode\u003E0\u003C/code\u003E lets content such as a table run edge to edge. A \u003Ca href=\u0022cref:T:IzzyBlazor.Tab\u0022\u003E\u003Ccode\u003ETab\u003C/code\u003E\u003C/a\u003E can set its own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Orientation", "type": "Orientation", "default": "Orientation.Horizontal", "summary": "\u003Cp\u003EA row above the panels (the default), or a column beside them from 640px up. Vertical tabs stay a scrolling row on phones, where a column would crowd the content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id; tab and panel ids build on it. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe \u003Ca href=\u0022cref:T:IzzyBlazor.Tab\u0022\u003E\u003Ccode\u003ETab\u003C/code\u003E\u003C/a\u003Es.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "ControlSize", "Orientation", "TabsVariant" ] }, { "name": "Tag", "displayName": "Tag", "fullName": "IzzyBlazor.Tag", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA keyword, category or applied filter, larger than a \u003Ca href=\u0022cref:T:IzzyBlazor.Badge\u0022\u003E\u003Ccode\u003EBadge\u003C/code\u003E\u003C/a\u003E and optionally a link or removable. Removing is a link on static pages (\u003Ca href=\u0022cref:P:IzzyBlazor.Tag.RemoveHref\u0022\u003E\u003Ccode\u003ERemoveHref\u003C/code\u003E\u003C/a\u003E, such as the current URL without that filter) or C# on interactive ones (\u003Ca href=\u0022cref:P:IzzyBlazor.Tag.OnRemove\u0022\u003E\u003Ccode\u003EOnRemove\u003C/code\u003E\u003C/a\u003E).\u003C/p\u003E", "examples": [ "\u003CTag Label=\u0022Blazor\u0022 Href=\u0022/topics/blazor\u0022 /\u003E\n\u003CTag Label=\u0022Status: Paid\u0022 Status=\u0022Status.Success\u0022 RemoveHref=\u0022/invoices\u0022 OnRemove=\u0022ClearStatus\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Espan\u003C/code\u003E; with \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.Href\u0022\u003E\u003Ccode\u003EHref\u003C/code\u003E\u003C/a\u003E its text is a link.\u003C/li\u003E\u003Cli\u003EThe remove control is a \u003Ccode\u003Ebutton\u003C/code\u003E (\u003Ca href=\u0022cref:P:IzzyBlazor.Tag.OnRemove\u0022\u003E\u003Ccode\u003EOnRemove\u003C/code\u003E\u003C/a\u003E on an interactive page) or a link (\u003Ca href=\u0022cref:P:IzzyBlazor.Tag.RemoveHref\u0022\u003E\u003Ccode\u003ERemoveHref\u003C/code\u003E\u003C/a\u003E), named \u0026quot;Remove\u0026quot; and the label, as in \u0026quot;Remove Blazor\u0026quot; (\u003Ca href=\u0022cref:P:IzzyBlazor.Tag.RemoveLabel\u0022\u003E\u003Ccode\u003ERemoveLabel\u003C/code\u003E\u003C/a\u003E).\u003C/li\u003E\u003Cli\u003EWith only \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.ChildContent\u0022\u003E\u003Ccode\u003EChildContent\u003C/code\u003E\u003C/a\u003E and no \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E, the remove control is named just \u0026quot;Remove\u0026quot;, so give tags in a list a \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Tag.Status\u0022\u003E\u003Ccode\u003EStatus\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.Accent\u0022\u003E\u003Ccode\u003EAccent\u003C/code\u003E\u003C/a\u003E are color only: put the meaning in the text, as in \u0026quot;Status: Paid\u0026quot;.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Badge", "MultiSelect", "FilterForm" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe text. Also used in the remove button\u0026#39;s name.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003ECustom content in place of \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Status", "type": "Status", "default": "Status.Neutral", "summary": "\u003Cp\u003EThe color\u0026#39;s meaning. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Status.Neutral\u0022\u003E\u003Ccode\u003EStatus.Neutral\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent?", "summary": "\u003Cp\u003EA color in place of \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.Status\u0022\u003E\u003Ccode\u003EStatus\u003C/code\u003E\u003C/a\u003E\u0026#39;s, such as \u003Ccode\u003EAccent.Primary\u003C/code\u003E or \u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "TagVariant", "default": "TagVariant.Soft", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.TagVariant.Soft\u0022\u003E\u003Ccode\u003ETagVariant.Soft\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003ESize: 20, 24 (the default) or 28px tall.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EMakes the tag\u0026#39;s text a link.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RemoveHref", "type": "string?", "summary": "\u003Cp\u003EAdds a remove link to this address, such as the current page without this filter. Used on static pages, and on interactive ones when there\u0026#39;s no \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.OnRemove\u0022\u003E\u003Ccode\u003EOnRemove\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RemoveLabel", "type": "string?", "default": "\u0022Remove\u0022", "summary": "\u003Cp\u003EThe remove control\u0026#39;s name, before the label: \u0026quot;Remove Blazor\u0026quot;. Defaults to \u0026quot;Remove\u0026quot;. With only \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.ChildContent\u0022\u003E\u003Ccode\u003EChildContent\u003C/code\u003E\u003C/a\u003E and no \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E, the name is just this, so give tags in a list a \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E too.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [ { "name": "OnRemove", "type": "EventCallback", "summary": "\u003Cp\u003EAdds a remove button that runs this on interactive pages. Static pages need \u003Ca href=\u0022cref:P:IzzyBlazor.Tag.RemoveHref\u0022\u003E\u003Ccode\u003ERemoveHref\u003C/code\u003E\u003C/a\u003E to show a remove control; a prerender shows that link where there is one, else the button, inert until the page is interactive, so the tag keeps its width.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" } } ], "methods": [], "types": [ "Accent", "ControlSize", "Status", "TagVariant" ] }, { "name": "TemplateColumn", "displayName": "TemplateColumn\u003CTItem\u003E", "fullName": "IzzyBlazor.TemplateColumn\u00601", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA column with any content per item, such as a badge or buttons. Give it \u003Ca href=\u0022cref:P:IzzyBlazor.TemplateColumn\u00601.SortBy\u0022\u003E\u003Ccode\u003ESortBy\u003C/code\u003E\u003C/a\u003E to make it sortable.\u003C/p\u003E", "examples": [ "\u003CTemplateColumn Title=\u0022Status\u0022 SortBy=\u0022o =\u003E o.Status\u0022 Sortable\u003E\u003CBadge\u003E@context.Status\u003C/Badge\u003E\u003C/TemplateColumn\u003E" ], "typeParameters": [ "TItem" ], "bases": [], "properties": [ { "name": "ChildContent", "type": "RenderFragment\u003CTItem\u003E?", "summary": "\u003Cp\u003EThe cell content; \u003Ccode\u003Econtext\u003C/code\u003E is the item.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SortBy", "type": "Expression\u003CFunc\u003CTItem, object?\u003E\u003E?", "summary": "\u003Cp\u003EWhat to sort by when \u003Ca href=\u0022cref:P:IzzyBlazor.ColumnBase\u00601.Sortable\u0022\u003E\u003Ccode\u003ESortable\u003C/code\u003E\u003C/a\u003E. Needs a \u003Ca href=\u0022cref:P:IzzyBlazor.ColumnBase\u00601.SortKey\u0022\u003E\u003Ccode\u003ESortKey\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FilterBy", "type": "Expression\u003CFunc\u003CTItem, string?\u003E\u003E?", "summary": "\u003Cp\u003EThe text to filter by when \u003Ca href=\u0022cref:P:IzzyBlazor.ColumnBase\u00601.Filterable\u0022\u003E\u003Ccode\u003EFilterable\u003C/code\u003E\u003C/a\u003E, such as \u003Ccode\u003Eo =\u0026gt; o.Customer.Name\u003C/code\u003E. It matches anywhere, ignoring case. Needs a \u003Ca href=\u0022cref:P:IzzyBlazor.ColumnBase\u00601.SortKey\u0022\u003E\u003Ccode\u003ESortKey\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EThe header text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Sortable", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELets people sort by this column, with a link in its header.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "SortKey", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe name of this column in the URL\u0026#39;s sort parameter (\u003Ccode\u003E?sort=total\u003C/code\u003E, or \u003Ccode\u003E?sort=-total\u003C/code\u003E for descending) and its filter (\u003Ccode\u003E?f-total=\u003C/code\u003E). Defaults to the property name in lower case.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Filterable", "type": "bool", "default": "false", "summary": "\u003Cp\u003EAdds a filter under this column\u0026#39;s header: a text box for text (matching anywhere, ignoring case) and numbers (matching exactly), a date input for dates (matching the day), a select for enums and booleans. A \u003Ca href=\u0022cref:T:IzzyBlazor.TemplateColumn\u00601\u0022\u003E\u003Ccode\u003ETemplateColumn\u0026lt;T\u0026gt;\u003C/code\u003E\u003C/a\u003E filters by its \u003Ccode\u003EFilterBy\u003C/code\u003E text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "FilterMultiple", "type": "bool", "default": "false", "summary": "\u003Cp\u003EFor an enum filter: choose several values from a menu of checkboxes, and keep the items that have any of them. The URL repeats the key (\u003Ccode\u003E?f-status=Paid\u0026amp;f-status=Pending\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Align", "type": "CellAlign?", "default": "computed", "summary": "\u003Cp\u003EHow the cells line up. Defaults to the end for numbers and the start otherwise.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Width", "type": "Length?", "summary": "\u003Cp\u003EThe column width, such as \u003Ccode\u003ELength.Rem(8)\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Class", "type": "string?", "summary": "\u003Cp\u003EA class for this column\u0026#39;s cells and header.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "FooterText", "type": "string?", "summary": "\u003Cp\u003EText for this column in the table\u0026#39;s footer row, such as a total.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" }, { "name": "Footer", "type": "RenderFragment?", "summary": "\u003Cp\u003EContent for this column in the table\u0026#39;s footer row, in place of \u003Ca href=\u0022cref:P:IzzyBlazor.ColumnBase\u00601.FooterText\u0022\u003E\u003Ccode\u003EFooterText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "ColumnBase\u003CTItem\u003E" } ], "events": [], "methods": [], "types": [ "CellAlign", "Length" ] }, { "name": "TextArea", "displayName": "TextArea", "fullName": "IzzyBlazor.TextArea", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EMulti-line text with label, hint and errors.\u003C/p\u003E", "examples": [ "\u003CTextArea @bind-Value=\u0022Model.Message\u0022 Rows=\u00225\u0022 AutoGrow ShowCount /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003ELabel, hint and errors work as in \u003Ccode\u003ETextField\u003C/code\u003E: a linked \u003Ccode\u003Elabel\u003C/code\u003E, \u003Ccode\u003Earia-describedby\u003C/code\u003E and \u003Ccode\u003Earia-invalid\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EWith a maximum length, the browser stops typing at the limit (\u003Ccode\u003Emaxlength\u003C/code\u003E).\u003C/li\u003E\u003Cli\u003EWith script, the \u003Ccode\u003EShowCount\u003C/code\u003E counter (\u0026quot;12 / 200\u0026quot;) is the field\u0026#39;s description, after the hint and errors, so screen readers read it on focus; it isn\u0026#39;t announced as it changes. With JavaScript off it doesn\u0026#39;t update, so it isn\u0026#39;t linked.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "TextField", "Form", "FieldFrame" ], "bases": [ "FieldBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the character count doesn\u0027t update as you type." }, "properties": [ { "name": "ReadOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMakes the field read-only: it can be focused and its text selected, and it still posts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Rows", "type": "int", "default": "4", "summary": "\u003Cp\u003EVisible lines. Defaults to 4.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "AutoGrow", "type": "bool", "default": "false", "summary": "\u003Cp\u003EGrows with the text instead of scrolling, from \u003Ca href=\u0022cref:P:IzzyBlazor.TextArea.Rows\u0022\u003E\u003Ccode\u003ERows\u003C/code\u003E\u003C/a\u003E lines up, where the browser supports CSS \u003Ccode\u003Efield-sizing\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placeholder", "type": "string?", "summary": "\u003Cp\u003EExample text shown when empty.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MaxLength", "type": "int?", "default": "computed", "summary": "\u003Cp\u003EMaximum length. Defaults to \u003Ccode\u003E[StringLength]\u003C/code\u003E or \u003Ccode\u003E[MaxLength]\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MinLength", "type": "int?", "default": "computed", "summary": "\u003Cp\u003EMinimum length. Defaults to \u003Ccode\u003E[StringLength(MinimumLength)]\u003C/code\u003E or \u003Ccode\u003E[MinLength]\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ShowCount", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows \u0026quot;n / max\u0026quot; under the field. Needs a maximum length. Updates as you type once scripts run.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [] }, { "name": "TextBlock", "displayName": "TextBlock", "fullName": "IzzyBlazor.TextBlock", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EBody text. (Named TextBlock because Razor reserves \u003Ccode\u003E\u0026lt;text\u0026gt;\u003C/code\u003E inside code blocks.) Renders a \u003Ccode\u003Ep\u003C/code\u003E by default; set \u003Ccode\u003EAs\u003C/code\u003E to \u003Ccode\u003Espan\u003C/code\u003E, \u003Ccode\u003Esmall\u003C/code\u003E, \u003Ccode\u003Estrong\u003C/code\u003E, \u003Ccode\u003Elabel\u003C/code\u003E and so on.\u003C/p\u003E", "examples": [ "\u003CTextBlock Size=\u0022TextSize.Lg\u0022 Color=\u0022Color.Muted\u0022 Wrap=\u0022TextWrap.Pretty\u0022\u003E...\u003C/TextBlock\u003E\n\u003CTextBlock As=\u0022span\u0022 Size=\u0022TextSize.Xs\u0022 Weight=\u0022FontWeight.Semibold\u0022 Transform=\u0022TextTransform.Uppercase\u0022 LetterSpacing=\u0022LetterSpacing.Wider\u0022\u003ENew\u003C/TextBlock\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a \u003Ccode\u003Ep\u003C/code\u003E, so text styled to look like a heading is still a paragraph to screen readers; use \u003Ca href=\u0022cref:T:IzzyBlazor.Heading\u0022\u003E\u003Ccode\u003EHeading\u003C/code\u003E\u003C/a\u003E for a real one.\u003C/li\u003E\u003Cli\u003EWeight and size are only visual: for emphasis screen readers can hear, set \u003Ccode\u003EAs\u003C/code\u003E to \u003Ccode\u003Estrong\u003C/code\u003E or \u003Ccode\u003Eem\u003C/code\u003E.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Heading", "Prose", "Code" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Size", "type": "Responsive\u003CTextSize\u003E", "summary": "\u003Cp\u003EFont size. Responsive.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "TextBase" }, { "name": "Weight", "type": "FontWeight?", "summary": "\u003Cp\u003EFont weight.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Family", "type": "FontFamily?", "summary": "\u003Cp\u003EFont family.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Align", "type": "Responsive\u003CTextAlign\u003E", "summary": "\u003Cp\u003EHorizontal alignment. Responsive.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true, "declaredOn": "TextBase" }, { "name": "LineHeight", "type": "LineHeight?", "summary": "\u003Cp\u003ELine height.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "LetterSpacing", "type": "LetterSpacing?", "summary": "\u003Cp\u003ELetter spacing.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Transform", "type": "TextTransform?", "summary": "\u003Cp\u003ELetter case.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Decoration", "type": "TextDecoration?", "summary": "\u003Cp\u003EUnderline or strike-through.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Italic", "type": "bool", "default": "false", "summary": "\u003Cp\u003EItalic.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Wrap", "type": "TextWrap?", "summary": "\u003Cp\u003EHow lines break: normal, never, balanced or pretty.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "Truncate", "type": "bool", "default": "false", "summary": "\u003Cp\u003EKeep to one line and end with an ellipsis when it does not fit.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "LineClamp", "type": "int?", "summary": "\u003Cp\u003EShow at most this many lines, ending with an ellipsis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "TabularNums", "type": "bool", "default": "false", "summary": "\u003Cp\u003EEqual-width digits, so numbers line up in columns and do not jitter when they change.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "MinSize", "type": "TextSize?", "summary": "\u003Cp\u003EMakes the size fluid: the text is \u003Ca href=\u0022cref:P:IzzyBlazor.TextBase.MinSize\u0022\u003E\u003Ccode\u003EMinSize\u003C/code\u003E\u003C/a\u003E on a 360px screen and grows smoothly to \u003Ca href=\u0022cref:P:IzzyBlazor.TextBase.Size\u0022\u003E\u003Ccode\u003ESize\u003C/code\u003E\u003C/a\u003E at 1280px and up, as for a hero heading: \u003Ccode\u003E\u0026lt;Heading Size=\u0026quot;TextSize.Xl5\u0026quot; MinSize=\u0026quot;TextSize.Xl3\u0026quot;\u0026gt;\u003C/code\u003E. Replaces per-breakpoint sizes: with them, it grows to the size for the widest breakpoint given.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "TextBase" }, { "name": "As", "type": "string", "default": "\u0022p\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [ "FontFamily", "FontWeight", "LetterSpacing", "LineHeight", "TextAlign", "TextDecoration", "TextSize", "TextTransform", "TextWrap" ] }, { "name": "TextField", "displayName": "TextField", "fullName": "IzzyBlazor.TextField", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA single-line text input with label, hint and errors.\u003C/p\u003E", "remarks": "\u003Cp\u003EAdd-ons attach text, a button or another field to either end of the control:\u003C/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;TextField @bind-Value=\u0026quot;Model.Website\u0026quot;\u0026gt;\n \u0026lt;StartAddon\u0026gt;https://\u0026lt;/StartAddon\u0026gt;\n\u0026lt;/TextField\u0026gt;\n\u0026lt;TextField @bind-Value=\u0026quot;Model.Query\u0026quot; Type=\u0026quot;TextFieldType.Search\u0026quot;\u0026gt;\n \u0026lt;EndAddon\u0026gt;\u0026lt;Button Submit\u0026gt;Search\u0026lt;/Button\u0026gt;\u0026lt;/EndAddon\u0026gt;\n\u0026lt;/TextField\u0026gt;\u003C/code\u003E\u003C/pre\u003E\u003Cp\u003EA password field on a static page is empty after a post: the page doesn\u0026#39;t write the password back into its HTML, so it has to be typed again when the form comes back with errors.\u003C/p\u003E", "examples": [ "\u003CTextField @bind-Value=\u0022Model.Email\u0022 StartIcon=\u0022Lucide.Mail\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders a native \u003Ccode\u003Einput\u003C/code\u003E with a \u003Ccode\u003Elabel\u003C/code\u003E linked to it, so clicking the label focuses the field.\u003C/li\u003E\u003Cli\u003EThe hint and, when the field is invalid, its errors are linked with \u003Ccode\u003Earia-describedby\u003C/code\u003E; an invalid field sets \u003Ccode\u003Earia-invalid\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EA field with no visible label, such as a search box in a toolbar, needs \u003Ccode\u003EHideLabel\u003C/code\u003E, not an empty label: screen readers still hear the label.\u003C/li\u003E\u003Cli\u003EA placeholder isn\u0026#39;t a label: it\u0026#39;s gone once there\u0026#39;s text, and screen readers may not read it.\u003C/li\u003E\u003Cli\u003EAdd-on text isn\u0026#39;t part of the field\u0026#39;s name, so put a unit that matters in the label too, as in \u0026quot;Price (USD)\u0026quot;.\u003C/li\u003E\u003Cli\u003EThe show/hide button is a toggle named \u0026quot;Show password\u0026quot; (\u003Ccode\u003EShowPasswordLabel\u003C/code\u003E), pressed while the password shows.\u003C/li\u003E\u003C/ul\u003E", "bases": [ "FieldBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, password fields have no show/hide button." }, "properties": [ { "name": "ReadOnly", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMakes the field read-only: it can be focused and its text selected, and it still posts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Type", "type": "TextFieldType?", "summary": "\u003Cp\u003EThe kind of text. Defaults from the model: \u003Ccode\u003E[EmailAddress]\u003C/code\u003E, \u003Ccode\u003E[Phone]\u003C/code\u003E, \u003Ccode\u003E[Url]\u003C/code\u003E, \u003Ccode\u003E[DataType(DataType.Password)]\u003C/code\u003E; otherwise text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placeholder", "type": "string?", "summary": "\u003Cp\u003EExample text shown when empty. Not a substitute for a label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "AutoComplete", "type": "string?", "summary": "\u003Cp\u003EThe browser autofill hint, such as \u003Ccode\u003Eemail\u003C/code\u003E, \u003Ccode\u003Ename\u003C/code\u003E, \u003Ccode\u003Enew-password\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MaxLength", "type": "int?", "default": "computed", "summary": "\u003Cp\u003EMaximum length. Defaults to \u003Ccode\u003E[StringLength]\u003C/code\u003E or \u003Ccode\u003E[MaxLength]\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MinLength", "type": "int?", "default": "computed", "summary": "\u003Cp\u003EMinimum length. Defaults to \u003Ccode\u003E[StringLength(MinimumLength)]\u003C/code\u003E or \u003Ccode\u003E[MinLength]\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon inside the field, before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EndIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon inside the field, after the text. Ignored for passwords with \u003Ca href=\u0022cref:P:IzzyBlazor.TextField.Reveal\u0022\u003E\u003Ccode\u003EReveal\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "StartAddon", "type": "RenderFragment?", "summary": "\u003Cp\u003EContent attached before the control, outside its border: short text (\u003Ccode\u003Ehttps://\u003C/code\u003E, \u003Ccode\u003E$\u003C/code\u003E), a button, or another field such as a \u003Ca href=\u0022cref:T:IzzyBlazor.Select\u00601\u0022\u003E\u003Ccode\u003ESelect\u0026lt;T\u0026gt;\u003C/code\u003E\u003C/a\u003E (its label is kept for screen readers but not shown). Text here is not part of the field\u0026#39;s accessible name, so say it in the label when it matters, as in \u0026quot;Price (USD)\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EndAddon", "type": "RenderFragment?", "summary": "\u003Cp\u003EContent attached after the control, outside its border. See \u003Ca href=\u0022cref:P:IzzyBlazor.TextField.StartAddon\u0022\u003E\u003Ccode\u003EStartAddon\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Reveal", "type": "bool", "default": "true", "summary": "\u003Cp\u003EFor passwords: a button that shows or hides the text. Appears once scripts run. Defaults to true.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ShowPasswordLabel", "type": "string?", "default": "\u0022Show password\u0022", "summary": "\u003Cp\u003EThe reveal button\u0026#39;s name; it\u0026#39;s a toggle, pressed while the password shows. Defaults to \u0026quot;Show password\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value, bound with \u003Ccode\u003E@bind-Value\u003C/code\u003E.\u003C/p\u003E", "bindable": true, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" }, { "name": "DisplayName", "type": "string?", "summary": "\u003Cp\u003EThe field\u0027s name in validation messages from the input itself, such as a value that can\u0027t be parsed.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "InputBase\u003CTValue\u003E" } ], "events": [], "methods": [], "types": [ "TextFieldType" ] }, { "name": "Timeline", "displayName": "Timeline", "fullName": "IzzyBlazor.Timeline", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA vertical list of events, such as a commit log, an order\u0026#39;s history or a changelog: each \u003Ca href=\u0022cref:T:IzzyBlazor.TimelineItem\u0022\u003E\u003Ccode\u003ETimelineItem\u003C/code\u003E\u003C/a\u003E has a marker on a rail, a title and time, and any content under it (a link, a description, actions).\u003C/p\u003E", "examples": [ "\u003CTimeline\u003E\n \u003CTimelineItem Title=\u0022Add Section\u0022 Time=\u0022Oct 13\u0022 Current\u003E\n \u003CAnchor Href=\u0022...\u0022\u003E93c85d4\u003C/Anchor\u003E\n \u003C/TimelineItem\u003E\n\u003C/Timeline\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt renders an ordered list: an \u003Ccode\u003Eol\u003C/code\u003E with \u003Ccode\u003Erole=\u0026quot;list\u0026quot;\u003C/code\u003E (which Safari otherwise drops from a list with no markers), with each \u003Ca href=\u0022cref:T:IzzyBlazor.TimelineItem\u0022\u003E\u003Ccode\u003ETimelineItem\u003C/code\u003E\u003C/a\u003E an \u003Ccode\u003Eli\u003C/code\u003E, in the order written.\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.TimelineItem.Current\u0022\u003E\u003Ccode\u003ECurrent\u003C/code\u003E\u003C/a\u003E sets \u003Ccode\u003Earia-current=\u0026quot;true\u0026quot;\u003C/code\u003E on its item.\u003C/li\u003E\u003Cli\u003EThe marker and its icon are hidden, and its \u003Ca href=\u0022cref:P:IzzyBlazor.TimelineItem.Status\u0022\u003E\u003Ccode\u003EStatus\u003C/code\u003E\u003C/a\u003E color isn\u0026#39;t read: put a status that matters in the title or content.\u003C/li\u003E\u003Cli\u003EWith \u003Ca href=\u0022cref:P:IzzyBlazor.TimelineItem.Href\u0022\u003E\u003Ccode\u003EHref\u003C/code\u003E\u003C/a\u003E the title is a link; with \u003Ca href=\u0022cref:P:IzzyBlazor.TimelineItem.DateTime\u0022\u003E\u003Ccode\u003EDateTime\u003C/code\u003E\u003C/a\u003E the time is a \u003Ccode\u003Etime\u003C/code\u003E element.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Stepper", "List" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "As", "type": "string", "default": "\u0022ol\u0022", "summary": "\u003Cp\u003EThe element to render: \u003Ccode\u003Ediv\u003C/code\u003E on a Box; components built on it set their own (List a \u003Ccode\u003Eul\u003C/code\u003E, Section a \u003Ccode\u003Esection\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "declaredOn": "Box" } ], "events": [], "methods": [], "types": [] }, { "name": "TimelineItem", "displayName": "TimelineItem", "fullName": "IzzyBlazor.TimelineItem", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EOne event in a \u003Ca href=\u0022cref:T:IzzyBlazor.Timeline\u0022\u003E\u003Ccode\u003ETimeline\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Title", "type": "string?", "summary": "\u003Cp\u003EWhat happened.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EMakes the title a link.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Time", "type": "string?", "summary": "\u003Cp\u003EWhen, as shown: \u0026quot;Oct 13\u0026quot;, \u0026quot;2 hours ago\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "DateTime", "type": "string?", "summary": "\u003Cp\u003EThe time in machine-readable form for the \u003Ccode\u003Etime\u003C/code\u003E element\u0026#39;s \u003Ccode\u003Edatetime\u003C/code\u003E, such as \u003Ccode\u003E2026-10-13\u003C/code\u003E or \u003Ccode\u003E2026-10-13T21:58Z\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Icon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon in the marker in place of the dot, such as \u003Ccode\u003ELucide.GitCommitHorizontal\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Status", "type": "Status", "default": "Status.Neutral", "summary": "\u003Cp\u003EColors the marker, such as \u003Ca href=\u0022cref:F:IzzyBlazor.Status.Success\u0022\u003E\u003Ccode\u003EStatus.Success\u003C/code\u003E\u003C/a\u003E for a passed build.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Current", "type": "bool", "default": "false", "summary": "\u003Cp\u003EMarks this as where things stand now (the deployed commit, the current step): the marker lights in the accent and the item is announced as current.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EContent under the title: a description, a link, actions.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Status" ] }, { "name": "ToastRegion", "displayName": "ToastRegion", "fullName": "IzzyBlazor.ToastRegion", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EWhere toasts appear. Put one in the layout. Toasts come from ToastService:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003ENo script: toasts from a static response (or carried over a redirect) are rendered here and stay until closed; the close button is a checkbox and CSS, like Alert.\u003C/li\u003E\u003Cli\u003EWith script: \u003Ccode\u003E\u0026lt;ib-toasts\u0026gt;\u003C/code\u003E closes them after Duration (pausing while hovered or focused), and adds toasts that ToastService sends from interactive pages, from the templates below.\u003C/li\u003E\u003Cli\u003EInteractive: ToastService.Show() adds a toast in the browser straight away.\u003C/li\u003E\u003C/ul\u003E", "remarks": "\u003Cp\u003EThen, in a page with \u003Ccode\u003E@inject ToastService Toasts\u003C/code\u003E, call \u003Ccode\u003EToasts.Success(\u0026quot;Saved.\u0026quot;)\u003C/code\u003E.\u003C/p\u003E", "examples": [ "\u003CToastRegion Placement=\u0022ToastPlacement.BottomEnd\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt\u0026#39;s a \u003Ccode\u003Eregion\u003C/code\u003E landmark named \u0026quot;Notifications\u0026quot; (\u003Ccode\u003ELabel\u003C/code\u003E); every toast, errors included, is read politely through one \u003Ccode\u003Earia-live=\u0026quot;polite\u0026quot;\u003C/code\u003E container.\u003C/li\u003E\u003Cli\u003EBy default error toasts stay until closed (a toast\u0026#39;s own \u003Ccode\u003EDuration\u003C/code\u003E overrides it), a toast with an action stays twice \u003Ccode\u003EDuration\u003C/code\u003E, and \u003Ccode\u003EDuration=\u0026quot;0\u0026quot;\u003C/code\u003E keeps every toast open.\u003C/li\u003E\u003Cli\u003EWith script, the timers pause while the mouse is over the region, while focus is in it, and while the browser tab is hidden.\u003C/li\u003E\u003Cli\u003EWith script, the close control is a \u003Ccode\u003Ebutton\u003C/code\u003E named \u0026quot;Dismiss\u0026quot; (\u003Ccode\u003EDismissLabel\u003C/code\u003E); when a focused toast closes, focus moves to the next open toast, or back to where it came from.\u003C/li\u003E\u003Cli\u003EA toast doesn\u0026#39;t take focus when it appears, so an action in it should also be reachable somewhere else.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Alert", "Banner", "Dialog" ], "bases": [], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, toasts stay until closed instead of closing by themselves, and their close buttons are checkboxes to screen readers." }, "properties": [ { "name": "Placement", "type": "ToastPlacement", "default": "ToastPlacement.BottomEnd", "summary": "\u003Cp\u003EWhere toasts stack. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToastPlacement.BottomEnd\u0022\u003E\u003Ccode\u003EToastPlacement.BottomEnd\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Duration", "type": "int", "default": "5000", "summary": "\u003Cp\u003EMilliseconds before a toast closes itself (with JavaScript). Defaults to 5000; 0 keeps toasts open.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Variant", "type": "AlertVariant", "default": "AlertVariant.Outline", "summary": "\u003Cp\u003EHow toasts are drawn. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.AlertVariant.Outline\u0022\u003E\u003Ccode\u003EAlertVariant.Outline\u003C/code\u003E\u003C/a\u003E, a raised card with a colored icon.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string?", "default": "\u0022Notifications\u0022", "summary": "\u003Cp\u003EThe region\u0026#39;s name for screen readers. Defaults to \u0026quot;Notifications\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "DismissLabel", "type": "string?", "default": "\u0022Dismiss\u0022", "summary": "\u003Cp\u003EThe close buttons\u0026#39; accessible name. Defaults to \u0026quot;Dismiss\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "AlertVariant", "ToastPlacement" ] }, { "name": "Toolbar", "displayName": "Toolbar", "fullName": "IzzyBlazor.Toolbar", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA row of controls that stays one row: what doesn\u0026#39;t fit moves into a \u0026quot;\u2026\u0026quot; menu at the end, lowest priority first. Its ToolbarButtons, ToolbarIconButtons, ToolbarButtonGroups and ToolbarMenus become menu items there, with the same links, form posts and OnClick, so it works with JavaScript off: the server works out the widths at which each item moves, as container queries. The script measures the real widths and corrects them, and adds arrow-key movement.\u003C/p\u003E", "remarks": "\u003Cp\u003EEach item takes a Position (Start, the default; Center; End), a Priority (higher stays longer) and an Overflow: Never for the main action, Always for what\u0026#39;s only ever in the menu. Only toolbar items go directly in it: other controls throw there. ToolbarText is text that stays; ToolbarItem holds anything else (a field, a SegmentedControl, a Tooltip), with a Width so the widths without script allow for it, and MenuContent for what stands in for it in the menu (without that, it stays). The toolbar fills its container\u0026#39;s width; in a row, give it Grow. With Wrap, everything shows in the bar. With CollapseLabels, buttons with an icon drop their text first, and items move into the menu only once that isn\u0026#39;t enough.\u003C/p\u003E\u003Cp\u003EThe toolbar draws its items itself, so a cascading value or form written around one inside the toolbar doesn\u0026#39;t reach it (put the form around the toolbar). Items keep the order they reach the toolbar in: one an @if adds on an interactive page comes after the rest of its position. Without script the widths are estimated from the button labels in Inter, the library\u0026#39;s font; a theme with another font can be a few pixels out until the script measures.\u003C/p\u003E", "examples": [ "\u003CToolbar Label=\u0022Editor\u0022\u003E\n \u003CToolbarButtonGroup Label=\u0022History\u0022\u003E\n \u003CToolbarIconButton Icon=\u0022Lucide.Undo2\u0022 Label=\u0022Undo\u0022 /\u003E\n \u003CToolbarIconButton Icon=\u0022Lucide.Redo2\u0022 Label=\u0022Redo\u0022 /\u003E\n \u003C/ToolbarButtonGroup\u003E\n \u003CToolbarSeparator /\u003E\n \u003CToolbarButton StartIcon=\u0022Lucide.Link\u0022 Priority=\u00221\u0022\u003ELink\u003C/ToolbarButton\u003E\n \u003CToolbarButton Position=\u0022ToolbarPosition.End\u0022 Overflow=\u0022ToolbarOverflow.Never\u0022 Accent=\u0022Accent.Primary\u0022 Variant=\u0022ButtonVariant.Solid\u0022\u003EPublish\u003C/ToolbarButton\u003E\n \u003CToolbarButton StartIcon=\u0022Lucide.Printer\u0022 Overflow=\u0022ToolbarOverflow.Always\u0022\u003EPrint\u003C/ToolbarButton\u003E\n\u003C/Toolbar\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EWith script, it\u0026#39;s a \u003Ccode\u003Etoolbar\u003C/code\u003E named by \u003Ccode\u003ELabel\u003C/code\u003E (optional; name each one when a page has more than one), with one tab stop: Left and Right move between its controls and wrap, Home and End go to the ends (reversed on right-to-left pages), and focus comes back to the control last used.\u003C/li\u003E\u003Cli\u003EA text field keeps Left and Right until the caret reaches its start or end, and a SegmentedControl until its first or last option; a Select keeps Up and Down. A Slider, and a number, email or date field (whose caret the script can\u0026#39;t read), keep every arrow key, so put one last, or outside the toolbar.\u003C/li\u003E\u003Cli\u003EThe \u0026quot;\u2026\u0026quot; button is the last control, named by \u003Ccode\u003EMoreLabel\u003C/code\u003E; Enter, Space or Down opens its menu of \u003Ccode\u003Emenuitem\u003C/code\u003Es (a ToolbarButtonGroup is a labeled group, a ToolbarMenu a submenu), and Escape comes back.\u003C/li\u003E\u003Cli\u003EIf the focused control moves into the menu as the toolbar narrows, focus moves to \u0026quot;\u2026\u0026quot;.\u003C/li\u003E\u003Cli\u003EWith \u003Ccode\u003ECollapseLabels\u003C/code\u003E, a button that drops its text keeps it for screen readers, and with script shows it as its tooltip.\u003C/li\u003E\u003Cli\u003EWith JavaScript off and until the script loads, it\u0026#39;s a \u003Ccode\u003Egroup\u003C/code\u003E named by \u003Ccode\u003ELabel\u003C/code\u003E, each control its own tab stop.\u003C/li\u003E\u003Cli\u003EA dialog it opens (a ConfirmButton\u0026#39;s) keeps its own Tab order and keys.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "ButtonGroup", "Menu", "IconButton", "AppShell" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, items move into the \u2026 menu at widths worked out on the server, and arrow keys don\u0027t move between them." }, "properties": [ { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EWhat the toolbar is for, for screen readers: \u0026quot;Formatting\u0026quot;, \u0026quot;Editor\u0026quot;. Optional, as in ARIA; set it when the page has more than one toolbar, so they can be told apart.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Accent", "type": "Accent", "default": "Accent.Neutral", "summary": "\u003Cp\u003EThe buttons\u0026#39; accent, unless a button sets its own. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Neutral\u0022\u003E\u003Ccode\u003ENeutral\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Ghost", "summary": "\u003Cp\u003EThe buttons\u0026#39; variant, unless a button sets its own. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Ghost\u0022\u003E\u003Ccode\u003EButtonVariant.Ghost\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Sm", "summary": "\u003Cp\u003EThe buttons\u0026#39; size, unless a button sets its own, and the \u0026quot;\u2026\u0026quot; button\u0026#39;s. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Sm\u0022\u003E\u003Ccode\u003EControlSize.Sm\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Gap", "type": "int", "default": "2", "summary": "\u003Cp\u003EThe space between items, in spacing steps (one step = 4px). Defaults to 2.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Wrap", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWraps onto more rows instead of moving items into a \u0026quot;\u2026\u0026quot; menu, for toolbars where everything must show.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "CollapseLabels", "type": "bool", "default": "false", "summary": "\u003Cp\u003EBefore anything moves into the \u0026quot;\u2026\u0026quot; menu, buttons and menus with a \u003Ccode\u003EStartIcon\u003C/code\u003E drop their text, all at once, and show only the icon (a menu keeps its chevron). The text stays for screen readers and, with script, is the tooltip. Items move into the menu only once that isn\u0026#39;t enough. One with \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Never\u0022\u003E\u003Ccode\u003EToolbarOverflow.Never\u003C/code\u003E\u003C/a\u003E, such as the main action, keeps its text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.14" }, { "name": "MoreLabel", "type": "string?", "default": "\u0022More actions\u0022", "summary": "\u003Cp\u003EThe \u0026quot;\u2026\u0026quot; button\u0026#39;s name for screen readers and its tooltip. Defaults to \u0026quot;More actions\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Nonce", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EA CSP nonce for the style element that holds the toolbar\u0026#39;s widths. Defaults to the \u003Ca href=\u0022cref:T:IzzyBlazor.IzzyTheme\u0022\u003E\u003Ccode\u003EIzzyTheme\u003C/code\u003E\u003C/a\u003E\u0026#39;s \u003Ccode\u003ENonce\u003C/code\u003E on the page; set it on interactive pages, which don\u0026#39;t see the theme\u0026#39;s.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe items: \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarButton\u0022\u003E\u003Ccode\u003EToolbarButton\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarIconButton\u0022\u003E\u003Ccode\u003EToolbarIconButton\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarButtonGroup\u0022\u003E\u003Ccode\u003EToolbarButtonGroup\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarMenu\u0022\u003E\u003Ccode\u003EToolbarMenu\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarText\u0022\u003E\u003Ccode\u003EToolbarText\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarItem\u0022\u003E\u003Ccode\u003EToolbarItem\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarSeparator\u0022\u003E\u003Ccode\u003EToolbarSeparator\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" } ], "events": [], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize" ], "addedIn": "0.1.0-alpha.13" }, { "name": "ToolbarButton", "displayName": "ToolbarButton", "fullName": "IzzyBlazor.ToolbarButton", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA \u003Ca href=\u0022cref:T:IzzyBlazor.Button\u0022\u003E\u003Ccode\u003EButton\u003C/code\u003E\u003C/a\u003E in a \u003Ca href=\u0022cref:T:IzzyBlazor.Toolbar\u0022\u003E\u003Ccode\u003EToolbar\u003C/code\u003E\u003C/a\u003E or a \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarButtonGroup\u0022\u003E\u003Ccode\u003EToolbarButtonGroup\u003C/code\u003E\u003C/a\u003E. In the \u0026quot;\u2026\u0026quot; menu it\u0026#39;s a menu item with the same link, form post and \u003Ccode\u003EOnClick\u003C/code\u003E; a toggle (\u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Pressed\u0022\u003E\u003Ccode\u003EPressed\u003C/code\u003E\u003C/a\u003E) is a checkbox item there.\u003C/p\u003E", "examples": [ "\u003CToolbarButton StartIcon=\u0022Lucide.Share2\u0022 Priority=\u00221\u0022\u003EShare\u003C/ToolbarButton\u003E\n\u003CToolbarButton Position=\u0022ToolbarPosition.End\u0022 Overflow=\u0022ToolbarOverflow.Never\u0022 Accent=\u0022Accent.Primary\u0022 Variant=\u0022ButtonVariant.Solid\u0022\u003EPublish\u003C/ToolbarButton\u003E" ], "seeAlso": [ "Toolbar", "ToolbarIconButton" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full", "notes": "OnClick runs only on interactive pages, from the bar or the menu; Submit and Href work everywhere." }, "properties": [ { "name": "Position", "type": "ToolbarPosition", "default": "ToolbarPosition.Start", "summary": "\u003Cp\u003EWhere it sits. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarPosition.Start\u0022\u003E\u003Ccode\u003EToolbarPosition.Start\u003C/code\u003E\u003C/a\u003E. Not in a group: set it on the group.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Priority", "type": "int", "default": "0", "summary": "\u003Cp\u003EWhich items stay longest when there\u0026#39;s no room: higher stays longer. Defaults to 0. Items with the same priority move into the menu from the middle of the toolbar outward.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Overflow", "type": "ToolbarOverflow", "default": "ToolbarOverflow.Auto", "summary": "\u003Cp\u003EWhen it moves into the \u0026quot;\u2026\u0026quot; menu: \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Never\u0022\u003E\u003Ccode\u003EToolbarOverflow.Never\u003C/code\u003E\u003C/a\u003E for the main action, \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Always\u0022\u003E\u003Ccode\u003EToolbarOverflow.Always\u003C/code\u003E\u003C/a\u003E for what only the menu needs. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Auto\u0022\u003E\u003Ccode\u003EToolbarOverflow.Auto\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003EMakes it a link to this URL (an \u003Ccode\u003Ea\u003C/code\u003E) instead of a button. A link can\u0026#39;t take \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Reset\u0022\u003E\u003Ccode\u003EReset\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Value\u0022\u003E\u003Ccode\u003EValue\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Button.FormAction\u0022\u003E\u003Ccode\u003EFormAction\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "External", "type": "bool", "default": "false", "summary": "\u003Cp\u003EFor a link: opens in a new tab with \u003Ccode\u003Erel=\u0026quot;noopener noreferrer\u0026quot;\u003C/code\u003E and shows an external-link icon.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "HideExternalIcon", "type": "bool", "default": "false", "summary": "\u003Cp\u003ELeaves out an external link\u0026#39;s icon, for repeated links where it would be noise. Screen readers still hear \u003Ca href=\u0022cref:P:IzzyBlazor.Button.NewTabLabel\u0022\u003E\u003Ccode\u003ENewTabLabel\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "NewTabLabel", "type": "string?", "default": "\u0022(opens in a new tab)\u0022", "summary": "\u003Cp\u003ERead to screen readers after an external link\u0026#39;s text. Defaults to \u0026quot;(opens in a new tab)\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "Submit", "type": "bool", "default": "false", "summary": "\u003Cp\u003ESubmits the form it\u0026#39;s in (or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E), like \u003Ccode\u003Etype=\u0026quot;submit\u0026quot;\u003C/code\u003E. Without \u003Ccode\u003ESubmit\u003C/code\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Reset\u0022\u003E\u003Ccode\u003EReset\u003C/code\u003E\u003C/a\u003E, a button does nothing by itself.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "Reset", "type": "bool", "default": "false", "summary": "\u003Cp\u003EResets the form it\u0026#39;s in, like \u003Ccode\u003Etype=\u0026quot;reset\u0026quot;\u003C/code\u003E. Can\u0026#39;t be combined with \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EPosted with the form as \u003Ccode\u003EName=Value\u003C/code\u003E when this button submits it, so one handler can tell which of several submit buttons was pressed. Not \u003Ccode\u003Eaction\u003C/code\u003E, \u003Ccode\u003Emethod\u003C/code\u003E or \u003Ccode\u003Etarget\u003C/code\u003E: a control with one of those names hides the form\u0026#39;s own property, and Blazor\u0026#39;s enhanced form handling then posts to the wrong address.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value posted with \u003Ca href=\u0022cref:P:IzzyBlazor.Button.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "FormAction", "type": "string?", "summary": "\u003Cp\u003ESubmits to this URL instead of the form\u0026#39;s own action (native \u003Ccode\u003Eformaction\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "Form", "type": "string?", "summary": "\u003Cp\u003EThe id of a form elsewhere on the page that this button submits (native \u003Ccode\u003Eform\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" }, { "name": "Accent", "type": "Accent", "default": "Accent.Primary", "summary": "\u003Cp\u003EPrimary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (\u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E, \u003Ccode\u003EAccent.Token(\u0026quot;brand\u0026quot;)\u003C/code\u003E); text on a custom color is chosen for contrast. Emphasis comes from \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Variant\u0022\u003E\u003Ccode\u003EVariant\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Solid", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Solid\u0022\u003E\u003Ccode\u003EButtonVariant.Solid\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "EndIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon after the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches to the full width of its container.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Loading", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows a spinner in place of the start icon and blocks further clicks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "LoadingLabel", "type": "string?", "default": "\u0022Loading\u0022", "summary": "\u003Cp\u003ERead to screen readers while \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Loading\u0022\u003E\u003Ccode\u003ELoading\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Loading\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Pressed", "type": "bool?", "summary": "\u003Cp\u003EMakes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (\u003Ccode\u003Earia-pressed\u003C/code\u003E). With \u003Ccode\u003E@bind-Pressed\u003C/code\u003E a click turns it on and off on interactive pages; on static pages the server decides, as with a submit button\u0026#39;s \u003Ccode\u003EName\u003C/code\u003E and \u003Ccode\u003EValue\u003C/code\u003E. Null (the default) is an ordinary button. Not for links.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.14", "declaredOn": "ButtonBase" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" } ], "events": [ { "name": "OnClick", "type": "EventCallback\u003CMouseEventArgs\u003E", "summary": "\u003Cp\u003ERuns on click on interactive pages (a link still navigates). Has no effect on static pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" }, "addedIn": "0.1.0-alpha.13", "declaredOn": "Button" } ], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize", "ToolbarOverflow", "ToolbarPosition" ], "addedIn": "0.1.0-alpha.13" }, { "name": "ToolbarButtonGroup", "displayName": "ToolbarButtonGroup", "fullName": "IzzyBlazor.ToolbarButtonGroup", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA \u003Ca href=\u0022cref:T:IzzyBlazor.ButtonGroup\u0022\u003E\u003Ccode\u003EButtonGroup\u003C/code\u003E\u003C/a\u003E in a \u003Ca href=\u0022cref:T:IzzyBlazor.Toolbar\u0022\u003E\u003Ccode\u003EToolbar\u003C/code\u003E\u003C/a\u003E, holding \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarButton\u0022\u003E\u003Ccode\u003EToolbarButton\u003C/code\u003E\u003C/a\u003Es and \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarIconButton\u0022\u003E\u003Ccode\u003EToolbarIconButton\u003C/code\u003E\u003C/a\u003Es. It moves into the \u0026quot;\u2026\u0026quot; menu as one, as a group named by its \u003Ccode\u003ELabel\u003C/code\u003E.\u003C/p\u003E", "examples": [ "\u003CToolbarButtonGroup Label=\u0022History\u0022\u003E\n \u003CToolbarIconButton Icon=\u0022Lucide.Undo2\u0022 Label=\u0022Undo\u0022 /\u003E\n \u003CToolbarIconButton Icon=\u0022Lucide.Redo2\u0022 Label=\u0022Redo\u0022 /\u003E\n\u003C/ToolbarButtonGroup\u003E" ], "seeAlso": [ "Toolbar" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full" }, "properties": [ { "name": "Position", "type": "ToolbarPosition", "default": "ToolbarPosition.Start", "summary": "\u003Cp\u003EWhere it sits. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarPosition.Start\u0022\u003E\u003Ccode\u003EToolbarPosition.Start\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Priority", "type": "int", "default": "0", "summary": "\u003Cp\u003EWhich items stay longest when there\u0026#39;s no room: higher stays longer. Defaults to 0. Items with the same priority move into the menu from the middle of the toolbar outward.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Overflow", "type": "ToolbarOverflow", "default": "ToolbarOverflow.Auto", "summary": "\u003Cp\u003EWhen it moves into the \u0026quot;\u2026\u0026quot; menu: \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Never\u0022\u003E\u003Ccode\u003EToolbarOverflow.Never\u003C/code\u003E\u003C/a\u003E for the main action, \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Always\u0022\u003E\u003Ccode\u003EToolbarOverflow.Always\u003C/code\u003E\u003C/a\u003E for what only the menu needs. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Auto\u0022\u003E\u003Ccode\u003EToolbarOverflow.Auto\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EWhat the buttons have in common, for screen readers: \u0026quot;Text alignment\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonGroup" }, { "name": "Accent", "type": "Accent?", "summary": "\u003Cp\u003EThe buttons\u0026#39; accent, unless a button sets its own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonGroup" }, { "name": "Variant", "type": "ButtonVariant?", "summary": "\u003Cp\u003EThe buttons\u0026#39; variant, unless a button sets its own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonGroup" }, { "name": "Size", "type": "ControlSize?", "summary": "\u003Cp\u003EThe buttons\u0026#39; size, unless a button sets its own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonGroup" }, { "name": "Attached", "type": "bool", "default": "true", "summary": "\u003Cp\u003EJoins the buttons into one control with shared borders (the default). False spaces them apart.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonGroup" }, { "name": "Orientation", "type": "Orientation", "default": "Orientation.Horizontal", "summary": "\u003Cp\u003ELays the buttons out in a row (the default) or a column.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonGroup" }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches the group to its container\u0026#39;s width, sharing it among the buttons.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonGroup" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe buttons.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonGroup" } ], "events": [], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize", "Orientation", "ToolbarOverflow", "ToolbarPosition" ], "addedIn": "0.1.0-alpha.13" }, { "name": "ToolbarIconButton", "displayName": "ToolbarIconButton", "fullName": "IzzyBlazor.ToolbarIconButton", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EAn \u003Ca href=\u0022cref:T:IzzyBlazor.IconButton\u0022\u003E\u003Ccode\u003EIconButton\u003C/code\u003E\u003C/a\u003E in a \u003Ca href=\u0022cref:T:IzzyBlazor.Toolbar\u0022\u003E\u003Ccode\u003EToolbar\u003C/code\u003E\u003C/a\u003E or a \u003Ca href=\u0022cref:T:IzzyBlazor.ToolbarButtonGroup\u0022\u003E\u003Ccode\u003EToolbarButtonGroup\u003C/code\u003E\u003C/a\u003E. In the \u0026quot;\u2026\u0026quot; menu it\u0026#39;s a menu item with its icon, its \u003Ccode\u003ELabel\u003C/code\u003E as text, and the same link, form post and \u003Ccode\u003EOnClick\u003C/code\u003E; a toggle (\u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Pressed\u0022\u003E\u003Ccode\u003EPressed\u003C/code\u003E\u003C/a\u003E) is a checkbox item there.\u003C/p\u003E", "examples": [ "\u003CToolbarIconButton Icon=\u0022Lucide.Printer\u0022 Label=\u0022Print\u0022 /\u003E" ], "seeAlso": [ "Toolbar", "ToolbarButton" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "full", "static": "full", "live": "full", "notes": "OnClick runs only on interactive pages, from the bar or the menu; Submit and Href work everywhere." }, "properties": [ { "name": "Position", "type": "ToolbarPosition", "default": "ToolbarPosition.Start", "summary": "\u003Cp\u003EWhere it sits. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarPosition.Start\u0022\u003E\u003Ccode\u003EToolbarPosition.Start\u003C/code\u003E\u003C/a\u003E. Not in a group: set it on the group.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Priority", "type": "int", "default": "0", "summary": "\u003Cp\u003EWhich items stay longest when there\u0026#39;s no room: higher stays longer. Defaults to 0. Items with the same priority move into the menu from the middle of the toolbar outward.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Overflow", "type": "ToolbarOverflow", "default": "ToolbarOverflow.Auto", "summary": "\u003Cp\u003EWhen it moves into the \u0026quot;\u2026\u0026quot; menu: \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Never\u0022\u003E\u003Ccode\u003EToolbarOverflow.Never\u003C/code\u003E\u003C/a\u003E for the main action, \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Always\u0022\u003E\u003Ccode\u003EToolbarOverflow.Always\u003C/code\u003E\u003C/a\u003E for what only the menu needs. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Auto\u0022\u003E\u003Ccode\u003EToolbarOverflow.Auto\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Icon", "type": "IconData", "summary": "\u003Cp\u003EThe icon.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" }, { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EWhat the button does, for screen readers and the tooltip.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" }, { "name": "Href", "type": "string?", "summary": "\u003Cp\u003ERenders a link to this URL instead of a button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" }, { "name": "Submit", "type": "bool", "default": "false", "summary": "\u003Cp\u003ESubmits the form it\u0026#39;s in (or \u003Ca href=\u0022cref:P:IzzyBlazor.IconButton.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E), when it\u0026#39;s a button (not a link), like \u003Ccode\u003Etype=\u0026quot;submit\u0026quot;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" }, { "name": "Reset", "type": "bool", "default": "false", "summary": "\u003Cp\u003EResets the form it\u0026#39;s in, when it\u0026#39;s a button, like \u003Ccode\u003Etype=\u0026quot;reset\u0026quot;\u003C/code\u003E. Can\u0026#39;t be combined with \u003Ca href=\u0022cref:P:IzzyBlazor.IconButton.Submit\u0022\u003E\u003Ccode\u003ESubmit\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" }, { "name": "Name", "type": "string?", "summary": "\u003Cp\u003EPosted with the form as \u003Ccode\u003EName=Value\u003C/code\u003E when this button submits it, so one handler can tell which button was pressed, such as which row\u0026#39;s Delete. Not \u003Ccode\u003Eaction\u003C/code\u003E, \u003Ccode\u003Emethod\u003C/code\u003E or \u003Ccode\u003Etarget\u003C/code\u003E: a control with one of those names hides the form\u0026#39;s own property, and Blazor\u0026#39;s enhanced form handling then posts to the wrong address.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" }, { "name": "Value", "type": "string?", "summary": "\u003Cp\u003EThe value posted with \u003Ca href=\u0022cref:P:IzzyBlazor.IconButton.Name\u0022\u003E\u003Ccode\u003EName\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" }, { "name": "FormAction", "type": "string?", "summary": "\u003Cp\u003ESubmits to this URL instead of the form\u0026#39;s own action (native \u003Ccode\u003Eformaction\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" }, { "name": "Form", "type": "string?", "summary": "\u003Cp\u003EThe id of a form elsewhere on the page that this button submits (native \u003Ccode\u003Eform\u003C/code\u003E).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" }, { "name": "Accent", "type": "Accent", "default": "Accent.Primary", "summary": "\u003Cp\u003EPrimary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (\u003Ccode\u003EAccent.Of(\u0026quot;#0d9488\u0026quot;)\u003C/code\u003E, \u003Ccode\u003EAccent.Token(\u0026quot;brand\u0026quot;)\u003C/code\u003E); text on a custom color is chosen for contrast. Emphasis comes from \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Variant\u0022\u003E\u003Ccode\u003EVariant\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Solid", "summary": "\u003Cp\u003EVisual weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Solid\u0022\u003E\u003Ccode\u003EButtonVariant.Solid\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "EndIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon after the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "FullWidth", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStretches to the full width of its container.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Loading", "type": "bool", "default": "false", "summary": "\u003Cp\u003EShows a spinner in place of the start icon and blocks further clicks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "LoadingLabel", "type": "string?", "default": "\u0022Loading\u0022", "summary": "\u003Cp\u003ERead to screen readers while \u003Ca href=\u0022cref:P:IzzyBlazor.ButtonBase.Loading\u0022\u003E\u003Ccode\u003ELoading\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Loading\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" }, { "name": "Pressed", "type": "bool?", "summary": "\u003Cp\u003EMakes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (\u003Ccode\u003Earia-pressed\u003C/code\u003E). With \u003Ccode\u003E@bind-Pressed\u003C/code\u003E a click turns it on and off on interactive pages; on static pages the server decides, as with a submit button\u0026#39;s \u003Ccode\u003EName\u003C/code\u003E and \u003Ccode\u003EValue\u003C/code\u003E. Null (the default) is an ordinary button. Not for links.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.14", "declaredOn": "ButtonBase" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe label.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ButtonBase" } ], "events": [ { "name": "OnClick", "type": "EventCallback\u003CMouseEventArgs\u003E", "summary": "\u003Cp\u003ERuns on click on interactive pages (a link still navigates).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "modes": { "off": "none", "static": "none", "live": "full" }, "addedIn": "0.1.0-alpha.13", "declaredOn": "IconButton" } ], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize", "ToolbarOverflow", "ToolbarPosition" ], "addedIn": "0.1.0-alpha.13" }, { "name": "ToolbarItem", "displayName": "ToolbarItem", "fullName": "IzzyBlazor.ToolbarItem", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EAnything that isn\u0026#39;t a toolbar control, in a \u003Ca href=\u0022cref:P:IzzyBlazor.ToolbarItem.Toolbar\u0022\u003E\u003Ccode\u003EToolbar\u003C/code\u003E\u003C/a\u003E: a search field, a SegmentedControl, a Tooltip around a button. Give it a \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Width\u0022\u003E\u003Ccode\u003EWidth\u003C/code\u003E\u003C/a\u003E, so the widths without script allow for it, and \u003Ca href=\u0022cref:P:IzzyBlazor.ToolbarItem.MenuContent\u0022\u003E\u003Ccode\u003EMenuContent\u003C/code\u003E\u003C/a\u003E for what stands in for it in the \u0026quot;\u2026\u0026quot; menu; without that, it stays in the bar.\u003C/p\u003E", "examples": [ "\u003CToolbarItem Width=\u0022Length.Rem(12)\u0022 Overflow=\u0022ToolbarOverflow.Never\u0022\u003E\u003CTextField Label=\u0022Search\u0022 HideLabel /\u003E\u003C/ToolbarItem\u003E" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Position", "type": "ToolbarPosition", "default": "ToolbarPosition.Start", "summary": "\u003Cp\u003EWhere it sits. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarPosition.Start\u0022\u003E\u003Ccode\u003EToolbarPosition.Start\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Priority", "type": "int", "default": "0", "summary": "\u003Cp\u003EWhich items stay longest when there\u0026#39;s no room: higher stays longer. Defaults to 0. Items with the same priority move into the menu from the middle of the toolbar outward.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Overflow", "type": "ToolbarOverflow", "default": "ToolbarOverflow.Auto", "summary": "\u003Cp\u003EWhen it moves into the \u0026quot;\u2026\u0026quot; menu: \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Never\u0022\u003E\u003Ccode\u003EToolbarOverflow.Never\u003C/code\u003E\u003C/a\u003E for the main action, \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Always\u0022\u003E\u003Ccode\u003EToolbarOverflow.Always\u003C/code\u003E\u003C/a\u003E for what only the menu needs. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Auto\u0022\u003E\u003Ccode\u003EToolbarOverflow.Auto\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "MenuContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EWhat stands in for it in the \u0026quot;\u2026\u0026quot; menu, such as \u003Ca href=\u0022cref:T:IzzyBlazor.MenuItem\u0022\u003E\u003Ccode\u003EMenuItem\u003C/code\u003E\u003C/a\u003Es. Without it, the item stays in the bar.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe content. Buttons in it are plain \u003Ca href=\u0022cref:T:IzzyBlazor.Button\u0022\u003E\u003Ccode\u003EButton\u003C/code\u003E\u003C/a\u003Es, not toolbar buttons.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" } ], "events": [], "methods": [], "types": [ "ToolbarOverflow", "ToolbarPosition" ], "addedIn": "0.1.0-alpha.13" }, { "name": "ToolbarMenu", "displayName": "ToolbarMenu", "fullName": "IzzyBlazor.ToolbarMenu", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA \u003Ca href=\u0022cref:T:IzzyBlazor.Menu\u0022\u003E\u003Ccode\u003EMenu\u003C/code\u003E\u003C/a\u003E in a \u003Ca href=\u0022cref:T:IzzyBlazor.Toolbar\u0022\u003E\u003Ccode\u003EToolbar\u003C/code\u003E\u003C/a\u003E. In the \u0026quot;\u2026\u0026quot; menu it\u0026#39;s a submenu with the same items, named by its \u003Ccode\u003ELabel\u003C/code\u003E (a menu with a custom \u003Ccode\u003ETrigger\u003C/code\u003E and no Label stays in the bar).\u003C/p\u003E", "examples": [ "\u003CToolbarMenu Label=\u0022Export\u0022 StartIcon=\u0022Lucide.Download\u0022\u003E\n \u003CMenuItem Href=\u0022/export.csv\u0022\u003ECSV\u003C/MenuItem\u003E\n\u003C/ToolbarMenu\u003E" ], "seeAlso": [ "Toolbar" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the menu opens and closes, but arrow keys and type-ahead don\u0027t move between items." }, "properties": [ { "name": "Position", "type": "ToolbarPosition", "default": "ToolbarPosition.Start", "summary": "\u003Cp\u003EWhere it sits. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarPosition.Start\u0022\u003E\u003Ccode\u003EToolbarPosition.Start\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Priority", "type": "int", "default": "0", "summary": "\u003Cp\u003EWhich items stay longest when there\u0026#39;s no room: higher stays longer. Defaults to 0. Items with the same priority move into the menu from the middle of the toolbar outward.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Overflow", "type": "ToolbarOverflow", "default": "ToolbarOverflow.Auto", "summary": "\u003Cp\u003EWhen it moves into the \u0026quot;\u2026\u0026quot; menu: \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Never\u0022\u003E\u003Ccode\u003EToolbarOverflow.Never\u003C/code\u003E\u003C/a\u003E for the main action, \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Always\u0022\u003E\u003Ccode\u003EToolbarOverflow.Always\u003C/code\u003E\u003C/a\u003E for what only the menu needs. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarOverflow.Auto\u0022\u003E\u003Ccode\u003EToolbarOverflow.Auto\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Label", "type": "string?", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Menu" }, { "name": "Accent", "type": "Accent", "default": "Accent.Neutral", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s color. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Neutral\u0022\u003E\u003Ccode\u003ENeutral\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Menu" }, { "name": "Variant", "type": "ButtonVariant", "default": "ButtonVariant.Outline", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s weight. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ButtonVariant.Outline\u0022\u003E\u003Ccode\u003EButtonVariant.Outline\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Menu" }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EThe default trigger\u0026#39;s size.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Menu" }, { "name": "StartIcon", "type": "IconData?", "summary": "\u003Cp\u003EAn icon before the default trigger\u0026#39;s text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Menu" }, { "name": "Trigger", "type": "RenderFragment\u003CIReadOnlyDictionary\u003Cstring, object\u003E\u003E?", "summary": "\u003Cp\u003EA custom trigger in place of the default button. Its context holds the attributes that wire it to the menu; pass them on with \u003Ccode\u003E@attributes=\u0026quot;context\u0026quot;\u003C/code\u003E. It must be a \u003Ccode\u003Ebutton\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Menu" }, { "name": "Placement", "type": "Placement", "default": "Placement.BottomStart", "summary": "\u003Cp\u003EWhere the menu opens. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Placement.BottomStart\u0022\u003E\u003Ccode\u003EPlacement.BottomStart\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Menu" }, { "name": "PanelWidth", "type": "Length?", "default": "computed", "summary": "\u003Cp\u003EThe width of the menu panel, such as \u003Ccode\u003ELength.Rem(16)\u003C/code\u003E for a column of long labels. Defaults to the content\u0026#39;s width, at least 10rem and the trigger\u0026#39;s width, up to 24rem. Never wider than the screen.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Menu" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe \u003Ca href=\u0022cref:T:IzzyBlazor.MenuItem\u0022\u003E\u003Ccode\u003EMenuItem\u003C/code\u003E\u003C/a\u003Es, \u003Ca href=\u0022cref:T:IzzyBlazor.MenuGroup\u0022\u003E\u003Ccode\u003EMenuGroup\u003C/code\u003E\u003C/a\u003Es and \u003Ca href=\u0022cref:T:IzzyBlazor.MenuDivider\u0022\u003E\u003Ccode\u003EMenuDivider\u003C/code\u003E\u003C/a\u003Es.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "Menu" }, { "name": "Open", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether it is open. Use \u003Ccode\u003E@bind-Open\u003C/code\u003E to follow changes on interactive pages.\u003C/p\u003E", "bindable": true, "bindModes": { "off": "none", "static": "none", "live": "full" }, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ToggleComponentBase" }, { "name": "Id", "type": "string?", "summary": "\u003Cp\u003EThe element id. Generated when not set.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13", "declaredOn": "ToggleComponentBase" } ], "events": [], "methods": [], "types": [ "Accent", "ButtonVariant", "ControlSize", "Length", "Placement", "ToolbarOverflow", "ToolbarPosition" ], "addedIn": "0.1.0-alpha.13" }, { "name": "ToolbarSeparator", "displayName": "ToolbarSeparator", "fullName": "IzzyBlazor.ToolbarSeparator", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA vertical line between groups of a \u003Ca href=\u0022cref:P:IzzyBlazor.ToolbarSeparator.Toolbar\u0022\u003E\u003Ccode\u003EToolbar\u003C/code\u003E\u003C/a\u003E\u0026#39;s items; in its \u0026quot;\u2026\u0026quot; menu, a divider.\u003C/p\u003E", "bases": [ "IzzyComponentBase" ], "properties": [ { "name": "Position", "type": "ToolbarPosition", "default": "ToolbarPosition.Start", "summary": "\u003Cp\u003EWhere it sits. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarPosition.Start\u0022\u003E\u003Ccode\u003EToolbarPosition.Start\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" } ], "events": [], "methods": [], "types": [ "ToolbarPosition" ], "addedIn": "0.1.0-alpha.13" }, { "name": "ToolbarText", "displayName": "ToolbarText", "fullName": "IzzyBlazor.ToolbarText", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EText in a \u003Ca href=\u0022cref:P:IzzyBlazor.ToolbarText.Toolbar\u0022\u003E\u003Ccode\u003EToolbar\u003C/code\u003E\u003C/a\u003E, such as \u0026quot;3 selected\u0026quot; or a document\u0026#39;s name. It stays in the bar, sized from its text; give it a \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Width\u0022\u003E\u003Ccode\u003EWidth\u003C/code\u003E\u003C/a\u003E to cut long text short with \u0026quot;\u2026\u0026quot;.\u003C/p\u003E", "examples": [ "\u003CToolbarText\u003E3 selected\u003C/ToolbarText\u003E\n\u003CToolbarText Position=\u0022ToolbarPosition.Center\u0022 Width=\u0022Length.Rem(9)\u0022\u003EQ3 report.pdf\u003C/ToolbarText\u003E" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "properties": [ { "name": "Position", "type": "ToolbarPosition", "default": "ToolbarPosition.Start", "summary": "\u003Cp\u003EWhere it sits. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ToolbarPosition.Start\u0022\u003E\u003Ccode\u003EToolbarPosition.Start\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" } ], "events": [], "methods": [], "types": [ "ToolbarPosition" ], "addedIn": "0.1.0-alpha.13" }, { "name": "Tooltip", "displayName": "Tooltip", "fullName": "IzzyBlazor.Tooltip", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EShort text shown on hover and keyboard focus. With JavaScript off it is pure CSS; with JavaScript it moves to the top layer (popover=\u0026quot;hint\u0026quot;), so overflow never clips it, and links itself to the trigger with aria-describedby.\u003C/p\u003E", "examples": [ "\u003CTooltip Text=\u0022Copy to clipboard\u0022\u003E\n \u003CIconButton Icon=\u0022Lucide.Copy\u0022 Label=\u0022Copy\u0022 /\u003E\n\u003C/Tooltip\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EIt\u0026#39;s a \u003Ccode\u003Etooltip\u003C/code\u003E the script links to the first focusable element inside with \u003Ccode\u003Earia-describedby\u003C/code\u003E, unless that element\u0026#39;s \u003Ccode\u003Earia-label\u003C/code\u003E already says the same.\u003C/li\u003E\u003Cli\u003EIt shows at once on keyboard focus, after \u003Ccode\u003EDelay\u003C/code\u003E on hover, and Escape hides it.\u003C/li\u003E\u003Cli\u003EThe trigger must be focusable, such as a button or link; text alone can\u0026#39;t be reached from the keyboard.\u003C/li\u003E\u003Cli\u003EIt describes, it doesn\u0026#39;t name: an icon-only button still needs its own \u003Ccode\u003ELabel\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003ENever put essential content in it: touch screens can\u0026#39;t hover, and it can\u0026#39;t hold links or buttons.\u003C/li\u003E\u003Cli\u003EWith JavaScript off, it shows on hover and focus, but screen readers don\u0026#39;t hear it and Escape doesn\u0026#39;t hide it.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Popover", "IconButton", "Button" ], "bases": [ "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, it shows on hover and focus, but Escape doesn\u0027t hide it and screen readers don\u0027t announce it." }, "properties": [ { "name": "Text", "type": "string?", "summary": "\u003Cp\u003EThe tooltip text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Content", "type": "RenderFragment?", "summary": "\u003Cp\u003ETooltip content in place of \u003Ca href=\u0022cref:P:IzzyBlazor.Tooltip.Text\u0022\u003E\u003Ccode\u003EText\u003C/code\u003E\u003C/a\u003E. Inline content only, nothing interactive.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Placement", "type": "Placement", "default": "Placement.Top", "summary": "\u003Cp\u003EWhere it appears. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.Placement.Top\u0022\u003E\u003Ccode\u003EPlacement.Top\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Delay", "type": "int", "default": "300", "summary": "\u003Cp\u003EMilliseconds of hover before it appears. Defaults to 300. Keyboard focus shows it at once.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChildContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EThe element the tooltip describes, usually a button or link.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [ "Placement" ] }, { "name": "VideoEmbed", "displayName": "VideoEmbed", "fullName": "IzzyBlazor.VideoEmbed", "package": "IzzyBlazor.Core", "tier": "Free", "summary": "\u003Cp\u003EA YouTube video that loads only when played: a poster image with a play button, which is a link to the video on YouTube. With script, clicking swaps in the player (from youtube-nocookie.com) in place, so pages don\u0026#39;t load YouTube\u0026#39;s player, and its cookies, until someone wants it.\u003C/p\u003E", "examples": [ "\u003CVideoEmbed YouTubeId=\u0022dQw4w9WgXcQ\u0022 Label=\u0022Building a form in IzzyBlazor\u0022 /\u003E" ], "accessibility": "\u003Cul\u003E\u003Cli\u003EBefore play, the poster is a link named \u0026quot;Play video: \u0026quot; and \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E (\u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.PlayLabel\u0022\u003E\u003Ccode\u003EPlayLabel\u003C/code\u003E\u003C/a\u003E); the poster image and play icon are hidden.\u003C/li\u003E\u003Cli\u003EWith script, a click or Enter swaps in the player in place, titled with \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E, and moves focus to it.\u003C/li\u003E\u003Cli\u003EWith JavaScript off, or with a modifier key held, the link opens the video on YouTube.\u003C/li\u003E\u003Cli\u003EThe player starts playing as it opens; its controls and captions are YouTube\u0026#39;s.\u003C/li\u003E\u003Cli\u003EWith no \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.YouTubeId\u0022\u003E\u003Ccode\u003EYouTubeId\u003C/code\u003E\u003C/a\u003E, it\u0026#39;s a group named by \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.Label\u0022\u003E\u003Ccode\u003ELabel\u003C/code\u003E\u003C/a\u003E with its \u0026quot;Coming soon\u0026quot; text, and nothing to focus.\u003C/li\u003E\u003C/ul\u003E", "seeAlso": [ "Image", "AspectRatio" ], "bases": [ "StyledComponentBase", "LayoutItemBase", "IzzyComponentBase" ], "modes": { "off": "partial", "static": "full", "live": "full", "notes": "With JavaScript off, the play button opens the video on YouTube instead of playing it in place." }, "properties": [ { "name": "YouTubeId", "type": "string?", "summary": "\u003Cp\u003EThe video\u0026#39;s id, the 11 characters after \u003Ccode\u003Ev=\u003C/code\u003E in its URL. Unset for a video that isn\u0026#39;t out yet: the box keeps its place with \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.Poster\u0022\u003E\u003Ccode\u003EPoster\u003C/code\u003E\u003C/a\u003E (if set) and \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.EmptyContent\u0022\u003E\u003Ccode\u003EEmptyContent\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.EmptyText\u0022\u003E\u003Ccode\u003EEmptyText\u003C/code\u003E\u003C/a\u003E, and nothing to play.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Label", "type": "string", "default": "\u0022\u0022", "summary": "\u003Cp\u003EThe video\u0026#39;s name, usually its title: the player\u0026#39;s accessible name and the play button\u0026#39;s.\u003C/p\u003E", "bindable": false, "required": true, "responsive": false }, { "name": "Poster", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe poster image. Defaults to YouTube\u0026#39;s own thumbnail; set your own to load nothing from YouTube before play.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Ratio", "type": "double", "default": "1.7777777777777777", "summary": "\u003Cp\u003EWidth over height. Defaults to 16:9.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PlayLabel", "type": "string?", "default": "\u0022Play video: {0}\u0022", "summary": "\u003Cp\u003EThe play button\u0026#39;s name, with {0} for the title. Defaults to \u0026quot;Play video: {0}\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EmptyContent", "type": "RenderFragment?", "summary": "\u003Cp\u003EShown over the poster while there\u0026#39;s no \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.YouTubeId\u0022\u003E\u003Ccode\u003EYouTubeId\u003C/code\u003E\u003C/a\u003E, in place of \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.EmptyText\u0022\u003E\u003Ccode\u003EEmptyText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "EmptyText", "type": "string?", "default": "\u0022Coming soon\u0022", "summary": "\u003Cp\u003EShown while there\u0026#39;s no \u003Ca href=\u0022cref:P:IzzyBlazor.VideoEmbed.YouTubeId\u0022\u003E\u003Ccode\u003EYouTubeId\u003C/code\u003E\u003C/a\u003E. Defaults to \u0026quot;Coming soon\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ], "events": [], "methods": [], "types": [] } ], "bases": [ { "name": "IzzyComponentBase", "summary": "\u003Cp\u003EBase class for every IzzyBlazor component: user classes and styles, pass-through attributes, and render-mode awareness.\u003C/p\u003E", "properties": [ { "name": "Class", "type": "string?", "summary": "\u003Cp\u003EExtra CSS classes, merged after the component\u0026#39;s own classes.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Style", "type": "string?", "summary": "\u003Cp\u003EInline style, appended after the component\u0026#39;s generated custom properties.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HiddenFrom", "type": "Breakpoint?", "summary": "\u003Cp\u003EHides the component from this breakpoint up, such as a menu button only phones need.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "VisibleFrom", "type": "Breakpoint?", "summary": "\u003Cp\u003EShows the component only from this breakpoint up, such as header links for wide screens.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "LayoutItemBase", "summary": "\u003Cp\u003EBase class for components that sit in a layout: adds the item props, which say how the component sits in its parent (margins, growing and shrinking in a Stack, widths, alignment). Every prop takes a single value or a breakpoint map, except the on/off switches \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Grow\u0022\u003E\u003Ccode\u003EGrow\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Shrink\u0022\u003E\u003Ccode\u003EShrink\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "properties": [ { "name": "Margin", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EMargin on all sides, in spacing steps (-16 to 16; one step = 4px).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginX", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EHorizontal margin. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this axis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginY", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EVertical margin. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this axis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginTop", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ETop margin. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.MarginY\u0022\u003E\u003Ccode\u003EMarginY\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginBottom", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EBottom margin. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.MarginY\u0022\u003E\u003Ccode\u003EMarginY\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginStart", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EMargin at the start (left in left-to-right text, right in right-to-left). Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.MarginX\u0022\u003E\u003Ccode\u003EMarginX\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginEnd", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EMargin at the end (right in left-to-right text, left in right-to-left). Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.MarginX\u0022\u003E\u003Ccode\u003EMarginX\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.LayoutItemBase.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Width", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EWidth.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MinWidth", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EMinimum width.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MaxWidth", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EMaximum width.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Grow", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether to grow into free space inside a Stack, Row or Column: \u003Ccode\u003E\u0026lt;Box Grow\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Shrink", "type": "bool", "default": "true", "summary": "\u003Cp\u003EWhether to shrink when space is short inside a Stack, Row or Column. Defaults to true; \u003Ccode\u003EShrink=\u0026quot;false\u0026quot;\u003C/code\u003E keeps the size.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Basis", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EStarting size inside a Stack, before growing or shrinking.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "AlignSelf", "type": "Responsive\u003CAlign\u003E", "summary": "\u003Cp\u003EAlignment across the parent\u0026#39;s direction, overriding the parent\u0026#39;s \u003Ccode\u003EAlign\u003C/code\u003E for this component only, such as a button lined up with the bottom of labeled fields in a Row.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "ColSpan", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EHow many columns it spans in a \u003Ca href=\u0022cref:T:IzzyBlazor.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:T:IzzyBlazor.Fieldset\u0022\u003E\u003Ccode\u003EFieldset\u003C/code\u003E\u003C/a\u003E with \u003Ccode\u003EColumns\u003C/code\u003E, or a \u003Ca href=\u0022cref:T:IzzyBlazor.Grid\u0022\u003E\u003Ccode\u003EGrid\u003C/code\u003E\u003C/a\u003E; \u003Ca href=\u0022cref:F:IzzyBlazor.GridSpan.Full\u0022\u003E\u003Ccode\u003EGridSpan.Full\u003C/code\u003E\u003C/a\u003E for the whole row. Never more than the columns shown, so a form that narrows to one column needs no breakpoints.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "NewRow", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStarts a new row in a \u003Ca href=\u0022cref:T:IzzyBlazor.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:T:IzzyBlazor.Fieldset\u0022\u003E\u003Ccode\u003EFieldset\u003C/code\u003E\u003C/a\u003E with \u003Ccode\u003EColumns\u003C/code\u003E, or a \u003Ca href=\u0022cref:T:IzzyBlazor.Grid\u0022\u003E\u003Ccode\u003EGrid\u003C/code\u003E\u003C/a\u003E, leaving the rest of the row before it empty.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "StyledComponentBase", "summary": "\u003Cp\u003EBase class for layout and surface components. Adds the surface props (padding, background, text color, radius, shadow, borders, heights, overflow) to the item props of \u003Ca href=\u0022cref:T:IzzyBlazor.LayoutItemBase\u0022\u003E\u003Ccode\u003ELayoutItemBase\u003C/code\u003E\u003C/a\u003E. Every prop takes a single value or a breakpoint map, except the on/off switches.\u003C/p\u003E", "properties": [ { "name": "ColorScheme", "type": "ColorScheme", "default": "ColorScheme.Auto", "summary": "\u003Cp\u003EThe color scheme inside: \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Dark\u0022\u003E\u003Ccode\u003EColorScheme.Dark\u003C/code\u003E\u003C/a\u003E for a dark band on a light page, \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Inverse\u0022\u003E\u003Ccode\u003EColorScheme.Inverse\u003C/code\u003E\u003C/a\u003E for the opposite of the page. It also sets the surface background and text color, which \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Bg\u0022\u003E\u003Ccode\u003EBg\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Color\u0022\u003E\u003Ccode\u003EColor\u003C/code\u003E\u003C/a\u003E override.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Padding", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EPadding on all sides, in spacing steps (0 to 16; one step = 4px).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "PaddingX", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EHorizontal padding. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Padding\u0022\u003E\u003Ccode\u003EPadding\u003C/code\u003E\u003C/a\u003E on this axis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "PaddingY", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EVertical padding. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Padding\u0022\u003E\u003Ccode\u003EPadding\u003C/code\u003E\u003C/a\u003E on this axis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "PaddingTop", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ETop padding. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.PaddingY\u0022\u003E\u003Ccode\u003EPaddingY\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Padding\u0022\u003E\u003Ccode\u003EPadding\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "PaddingBottom", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EBottom padding. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.PaddingY\u0022\u003E\u003Ccode\u003EPaddingY\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Padding\u0022\u003E\u003Ccode\u003EPadding\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "PaddingStart", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EPadding at the start (left in left-to-right text, right in right-to-left). Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.PaddingX\u0022\u003E\u003Ccode\u003EPaddingX\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Padding\u0022\u003E\u003Ccode\u003EPadding\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "PaddingEnd", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EPadding at the end (right in left-to-right text, left in right-to-left). Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.PaddingX\u0022\u003E\u003Ccode\u003EPaddingX\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Padding\u0022\u003E\u003Ccode\u003EPadding\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Bg", "type": "Responsive\u003CColor\u003E", "summary": "\u003Cp\u003EBackground color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Color", "type": "Responsive\u003CColor\u003E", "summary": "\u003Cp\u003EText color. When not set and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Bg\u0022\u003E\u003Ccode\u003EBg\u003C/code\u003E\u003C/a\u003E is a theme color, the matching contrast color is used automatically (\u003Ccode\u003EBg=\u0026quot;Color.Primary\u0026quot;\u003C/code\u003E gets \u003Ccode\u003EColor.OnPrimary\u003C/code\u003E text).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Radius", "type": "Responsive\u003CRadius\u003E", "summary": "\u003Cp\u003ECorner radius.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Shadow", "type": "Responsive\u003CShadow\u003E", "summary": "\u003Cp\u003EElevation.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MinHeight", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EMinimum height.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Height", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EHeight.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MaxHeight", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EMaximum height; pair it with \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Overflow\u0022\u003E\u003Ccode\u003EOverflow\u003C/code\u003E\u003C/a\u003E to scroll what doesn\u0026#39;t fit.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Overflow", "type": "Responsive\u003COverflow\u003E", "summary": "\u003Cp\u003EWhat happens to content that doesn\u0026#39;t fit: \u003Ca href=\u0022cref:F:IzzyBlazor.Overflow.Auto\u0022\u003E\u003Ccode\u003EOverflow.Auto\u003C/code\u003E\u003C/a\u003E to scroll it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Border", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EA border on every side, in whole pixels (0 to 16), in \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.BorderColor\u0022\u003E\u003Ccode\u003EBorderColor\u003C/code\u003E\u003C/a\u003E (the border token by default) and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.BorderStyle\u0022\u003E\u003Ccode\u003EBorderStyle\u003C/code\u003E\u003C/a\u003E (solid by default). Like padding: \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.BorderX\u0022\u003E\u003Ccode\u003EBorderX\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.BorderY\u0022\u003E\u003Ccode\u003EBorderY\u003C/code\u003E\u003C/a\u003E override an axis, the single sides override that. Sides you don\u0026#39;t set keep the component\u0026#39;s own border.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "BorderX", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EBorders at the start and end. Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Border\u0022\u003E\u003Ccode\u003EBorder\u003C/code\u003E\u003C/a\u003E on this axis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "BorderY", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EBorders at the top and bottom, such as a band with lines above and below. Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Border\u0022\u003E\u003Ccode\u003EBorder\u003C/code\u003E\u003C/a\u003E on this axis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "BorderTop", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EThe top border. Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.BorderY\u0022\u003E\u003Ccode\u003EBorderY\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Border\u0022\u003E\u003Ccode\u003EBorder\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "BorderBottom", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EThe bottom border. Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.BorderY\u0022\u003E\u003Ccode\u003EBorderY\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Border\u0022\u003E\u003Ccode\u003EBorder\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "BorderStart", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EThe border at the start (left in left-to-right text). Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.BorderX\u0022\u003E\u003Ccode\u003EBorderX\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Border\u0022\u003E\u003Ccode\u003EBorder\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "BorderEnd", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EThe border at the end (right in left-to-right text). Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.BorderX\u0022\u003E\u003Ccode\u003EBorderX\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.StyledComponentBase.Border\u0022\u003E\u003Ccode\u003EBorder\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "BorderColor", "type": "Responsive\u003CColor\u003E", "default": "computed", "summary": "\u003Cp\u003EThe border color, for borders set here or the component\u0026#39;s own. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Border\u0022\u003E\u003Ccode\u003EBorder\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "BorderStyle", "type": "Responsive\u003CBorderStyle\u003E", "summary": "\u003Cp\u003EHow borders set here are drawn (\u003Ca href=\u0022cref:F:IzzyBlazor.BorderStyle.Dashed\u0022\u003E\u003Ccode\u003EBorderStyle.Dashed\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:F:IzzyBlazor.BorderStyle.Dotted\u0022\u003E\u003Ccode\u003EBorderStyle.Dotted\u003C/code\u003E\u003C/a\u003E), and the own border of a \u003Ca href=\u0022cref:T:IzzyBlazor.Card\u0022\u003E\u003Ccode\u003ECard\u003C/code\u003E\u003C/a\u003E or a bordered \u003Ca href=\u0022cref:T:IzzyBlazor.EmptyState\u0022\u003E\u003Ccode\u003EEmptyState\u003C/code\u003E\u003C/a\u003E. Solid by default (dashed on an EmptyState).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true } ] }, { "name": "FieldBase", "summary": "\u003Cp\u003EShared plumbing for IzzyBlazor form fields, built on Blazor\u0026#39;s \u003Ca href=\u0022cref:T:Microsoft.AspNetCore.Components.Forms.InputBase\u00601\u0022\u003E\u003Ccode\u003EInputBase\u0026lt;T\u0026gt;\u003C/code\u003E\u003C/a\u003E so the same field binds on static form posts (through its \u003Ccode\u003Ename\u003C/code\u003E) and on interactive pages.\u003C/p\u003E", "properties": [ { "name": "Label", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe visible label. Defaults to the model property\u0026#39;s \u003Ccode\u003E[Display(Name)]\u003C/code\u003E, or its name.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HideLabel", "type": "bool", "default": "false", "summary": "\u003Cp\u003EKeeps the label for screen readers but doesn\u0026#39;t show it, as in a toolbar or a one-field newsletter form. Checkboxes and switches show their label beside the box, so this doesn\u0026#39;t apply.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Hint", "type": "string?", "summary": "\u003Cp\u003EHelp text shown under the field and linked to it for screen readers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Required", "type": "bool?", "default": "computed", "summary": "\u003Cp\u003EWhether a value is required. Defaults to whether the property has \u003Ccode\u003E[Required]\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Disabled", "type": "bool", "default": "false", "summary": "\u003Cp\u003EDisables the field. Disabled fields are not posted with the form.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Size", "type": "ControlSize", "default": "ControlSize.Md", "summary": "\u003Cp\u003EHeight, shared with buttons. Defaults to \u003Ca href=\u0022cref:F:IzzyBlazor.ControlSize.Md\u0022\u003E\u003Ccode\u003EControlSize.Md\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Class", "type": "string?", "summary": "\u003Cp\u003EClasses for the field\u0026#39;s outer wrapper (label, control, hint and error).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Style", "type": "string?", "summary": "\u003Cp\u003EInline style for the field\u0026#39;s outer wrapper, after its generated custom properties.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "HiddenFrom", "type": "Breakpoint?", "summary": "\u003Cp\u003EHides the field from this breakpoint up.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "VisibleFrom", "type": "Breakpoint?", "summary": "\u003Cp\u003EShows the field only from this breakpoint up.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Margin", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EMargin on all sides, in spacing steps (-16 to 16; one step = 4px).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginX", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EHorizontal margin. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this axis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginY", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EVertical margin. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this axis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginTop", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003ETop margin. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.MarginY\u0022\u003E\u003Ccode\u003EMarginY\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginBottom", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EBottom margin. When set, replaces \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.MarginY\u0022\u003E\u003Ccode\u003EMarginY\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginStart", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EMargin at the start (left in left-to-right text). Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.MarginX\u0022\u003E\u003Ccode\u003EMarginX\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MarginEnd", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EMargin at the end (right in left-to-right text). Replaces \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.MarginX\u0022\u003E\u003Ccode\u003EMarginX\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.FieldBase\u00601.Margin\u0022\u003E\u003Ccode\u003EMargin\u003C/code\u003E\u003C/a\u003E on this side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Width", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EWidth of the whole field (label, control, hint).\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MinWidth", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EMinimum width of the whole field.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "MaxWidth", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EMaximum width of the whole field.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "Grow", "type": "bool", "default": "false", "summary": "\u003Cp\u003EWhether to grow into free space inside a Stack, Row or Column: \u003Ccode\u003E\u0026lt;TextField Grow /\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Shrink", "type": "bool", "default": "true", "summary": "\u003Cp\u003EWhether to shrink when space is short inside a Stack, Row or Column. Defaults to true.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Basis", "type": "Responsive\u003CLength\u003E", "summary": "\u003Cp\u003EStarting size inside a Stack, before growing or shrinking.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "AlignSelf", "type": "Responsive\u003CAlign\u003E", "summary": "\u003Cp\u003EAlignment across the parent\u0026#39;s direction, overriding the parent\u0026#39;s \u003Ccode\u003EAlign\u003C/code\u003E for this field only.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "ColSpan", "type": "Responsive\u003Cint\u003E", "summary": "\u003Cp\u003EHow many columns the field spans in a \u003Ca href=\u0022cref:T:IzzyBlazor.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:T:IzzyBlazor.Fieldset\u0022\u003E\u003Ccode\u003EFieldset\u003C/code\u003E\u003C/a\u003E with \u003Ccode\u003EColumns\u003C/code\u003E; \u003Ca href=\u0022cref:F:IzzyBlazor.GridSpan.Full\u0022\u003E\u003Ccode\u003EGridSpan.Full\u003C/code\u003E\u003C/a\u003E for the whole row. Never more than the columns shown.\u003C/p\u003E", "bindable": false, "required": false, "responsive": true }, { "name": "NewRow", "type": "bool", "default": "false", "summary": "\u003Cp\u003EStarts a new row in a \u003Ca href=\u0022cref:T:IzzyBlazor.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E or \u003Ca href=\u0022cref:T:IzzyBlazor.Fieldset\u0022\u003E\u003Ccode\u003EFieldset\u003C/code\u003E\u003C/a\u003E with \u003Ccode\u003EColumns\u003C/code\u003E, or a \u003Ca href=\u0022cref:T:IzzyBlazor.Grid\u0022\u003E\u003Ccode\u003EGrid\u003C/code\u003E\u003C/a\u003E, leaving the rest of the row before it empty.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] } ], "types": [ { "name": "Accent", "fullName": "IzzyBlazor.Accent", "kind": "class", "summary": "\u003Cp\u003EThe color of a control: buttons, badges, tags, banners, progress bars and menu items. \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Primary\u0022\u003E\u003Ccode\u003EPrimary\u003C/code\u003E\u003C/a\u003E, \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Neutral\u0022\u003E\u003Ccode\u003ENeutral\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Danger\u0022\u003E\u003Ccode\u003EDanger\u003C/code\u003E\u003C/a\u003E are the roles; emphasis comes from the variant (solid, soft, outline, ghost, link), not from more colors. For one control in another color, use \u003Ca href=\u0022cref:M:IzzyBlazor.Accent.Of(System.String)\u0022\u003E\u003Ccode\u003EOf\u003C/code\u003E\u003C/a\u003E (any CSS color) or \u003Ca href=\u0022cref:M:IzzyBlazor.Accent.Token(System.String)\u0022\u003E\u003Ccode\u003EToken\u003C/code\u003E\u003C/a\u003E (a theme token); text on it is chosen for contrast.\u003C/p\u003E", "members": [ { "name": "Primary", "type": "Accent", "summary": "\u003Cp\u003EThe brand color, for the main action.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Neutral", "type": "Accent", "summary": "\u003Cp\u003EA quiet, gray action.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Danger", "type": "Accent", "summary": "\u003Cp\u003EA destructive action, such as Delete.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Of", "type": "Accent Of(string css)", "summary": "\u003Cp\u003EAny CSS color, such as \u003Ccode\u003E\u0026quot;#0d9488\u0026quot;\u003C/code\u003E. Text on it is black or white, whichever reads better.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Token", "type": "Accent Token(string name)", "summary": "\u003Cp\u003EA theme token, such as \u003Ccode\u003E\u0026quot;brand\u0026quot;\u003C/code\u003E for \u003Ccode\u003E--ib-color-brand\u003C/code\u003E; text on it uses \u003Ccode\u003E--ib-color-on-brand\u003C/code\u003E when the theme defines it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "From", "type": "Accent From(Color color)", "summary": "\u003Cp\u003EA \u003Ca href=\u0022cref:T:IzzyBlazor.Color\u0022\u003E\u003Ccode\u003EColor\u003C/code\u003E\u003C/a\u003E as an accent, such as \u003Ccode\u003EColor.Success\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "AccordionVariant", "fullName": "IzzyBlazor.AccordionVariant", "kind": "enum", "summary": "\u003Cp\u003EHow an \u003Ca href=\u0022cref:T:IzzyBlazor.Accordion\u0022\u003E\u003Ccode\u003EAccordion\u003C/code\u003E\u003C/a\u003E draws its items.\u003C/p\u003E", "members": [ { "name": "Separated", "type": "AccordionVariant", "summary": "\u003Cp\u003EEach item is its own bordered card, with space between (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bordered", "type": "AccordionVariant", "summary": "\u003Cp\u003EOne bordered box with dividers between items.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Flush", "type": "AccordionVariant", "summary": "\u003Cp\u003EDividers only, no outer border or padding at the sides. For sidebars and dense pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "AlertVariant", "fullName": "IzzyBlazor.AlertVariant", "kind": "enum", "summary": "\u003Cp\u003EHow an \u003Ca href=\u0022cref:T:IzzyBlazor.Alert\u0022\u003E\u003Ccode\u003EAlert\u003C/code\u003E\u003C/a\u003E or toast is drawn.\u003C/p\u003E", "members": [ { "name": "Soft", "type": "AlertVariant", "summary": "\u003Cp\u003EA tinted background with a matching border (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Outline", "type": "AlertVariant", "summary": "\u003Cp\u003EA border in the status color on the page surface.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Solid", "type": "AlertVariant", "summary": "\u003Cp\u003EA solid status-colored background.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Align", "fullName": "IzzyBlazor.Align", "kind": "enum", "summary": "\u003Cp\u003ECross-axis alignment of a \u003Ca href=\u0022cref:T:IzzyBlazor.Stack\u0022\u003E\u003Ccode\u003EStack\u003C/code\u003E\u003C/a\u003E\u0026#39;s children.\u003C/p\u003E", "members": [ { "name": "Stretch", "type": "Align", "summary": "\u003Cp\u003EChildren stretch to fill the cross axis.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Start", "type": "Align", "summary": "\u003Cp\u003EAligned to the start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Center", "type": "Align", "summary": "\u003Cp\u003ECentered.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "End", "type": "Align", "summary": "\u003Cp\u003EAligned to the end.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Baseline", "type": "Align", "summary": "\u003Cp\u003EAligned on their text baselines.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "AnchorUnderline", "fullName": "IzzyBlazor.AnchorUnderline", "kind": "enum", "summary": "\u003Cp\u003EHow a \u003Ca href=\u0022cref:T:IzzyBlazor.Anchor\u0022\u003E\u003Ccode\u003EAnchor\u003C/code\u003E\u003C/a\u003E is underlined.\u003C/p\u003E", "members": [ { "name": "Always", "type": "AnchorUnderline", "summary": "\u003Cp\u003EAlways underlined (the default): clearest in running text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Hover", "type": "AnchorUnderline", "summary": "\u003Cp\u003EUnderlined on hover, for links whose color and place already say \u0026quot;link\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "None", "type": "AnchorUnderline", "summary": "\u003Cp\u003ENever underlined.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "AvatarSize", "fullName": "IzzyBlazor.AvatarSize", "kind": "enum", "summary": "\u003Cp\u003EAvatar sizes.\u003C/p\u003E", "members": [ { "name": "Xs", "type": "AvatarSize", "summary": "\u003Cp\u003E1.5rem, for dense lists and inline mentions.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sm", "type": "AvatarSize", "summary": "\u003Cp\u003E2rem, beside a line of text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "AvatarSize", "summary": "\u003Cp\u003E2.5rem (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "AvatarSize", "summary": "\u003Cp\u003E3rem.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl", "type": "AvatarSize", "summary": "\u003Cp\u003E4rem.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl2", "type": "AvatarSize", "summary": "\u003Cp\u003E6rem, for a profile header.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "AvatarVariant", "fullName": "IzzyBlazor.AvatarVariant", "kind": "enum", "summary": "\u003Cp\u003EHow an avatar\u0026#39;s initials or icon are colored, as on \u003Ca href=\u0022cref:T:IzzyBlazor.Badge\u0022\u003E\u003Ccode\u003EBadge\u003C/code\u003E\u003C/a\u003E and \u003Ca href=\u0022cref:T:IzzyBlazor.Tag\u0022\u003E\u003Ccode\u003ETag\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "members": [ { "name": "Soft", "type": "AvatarVariant", "summary": "\u003Cp\u003EA light tint with the color as text (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Solid", "type": "AvatarVariant", "summary": "\u003Cp\u003EFilled with the color, with text picked for contrast.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "BadgeSize", "fullName": "IzzyBlazor.BadgeSize", "kind": "enum", "summary": "\u003Cp\u003EBadge sizes.\u003C/p\u003E", "members": [ { "name": "Sm", "type": "BadgeSize", "summary": "\u003Cp\u003ECompact, for counts in navigation.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "BadgeSize", "summary": "\u003Cp\u003EThe default.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "BadgeVariant", "fullName": "IzzyBlazor.BadgeVariant", "kind": "enum", "summary": "\u003Cp\u003EA badge\u0026#39;s visual weight.\u003C/p\u003E", "members": [ { "name": "Soft", "type": "BadgeVariant", "summary": "\u003Cp\u003EA light tint of the color (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Solid", "type": "BadgeVariant", "summary": "\u003Cp\u003EFilled with the color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Outline", "type": "BadgeVariant", "summary": "\u003Cp\u003EA colored border.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Plain", "type": "BadgeVariant", "summary": "\u003Cp\u003EJust the text, in the color\u0026#39;s text shade, with no fill or border: a quiet count, such as the totals beside sidebar links. Neutral is a muted gray.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "BarPosition", "fullName": "IzzyBlazor.BarPosition", "kind": "enum", "summary": "\u003Cp\u003EWhether an AppShell header or footer scrolls with the page.\u003C/p\u003E", "members": [ { "name": "Static", "type": "BarPosition", "summary": "\u003Cp\u003EScrolls away with the page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sticky", "type": "BarPosition", "summary": "\u003Cp\u003EStays in view: the header at the top, the footer at the bottom.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "BorderStyle", "fullName": "IzzyBlazor.BorderStyle", "kind": "enum", "summary": "\u003Cp\u003EHow a border is drawn.\u003C/p\u003E", "members": [ { "name": "Solid", "type": "BorderStyle", "summary": "\u003Cp\u003EA continuous line (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dashed", "type": "BorderStyle", "summary": "\u003Cp\u003EDashes: placeholders, \u0026quot;add new\u0026quot; tiles and drop targets.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dotted", "type": "BorderStyle", "summary": "\u003Cp\u003EDots.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "None", "type": "BorderStyle", "summary": "\u003Cp\u003ENo border, whatever its width.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "BreadcrumbSeparator", "fullName": "IzzyBlazor.BreadcrumbSeparator", "kind": "enum", "summary": "\u003Cp\u003EWhat goes between \u003Ca href=\u0022cref:T:IzzyBlazor.Breadcrumb\u0022\u003E\u003Ccode\u003EBreadcrumb\u003C/code\u003E\u003C/a\u003E items.\u003C/p\u003E", "members": [ { "name": "Chevron", "type": "BreadcrumbSeparator", "summary": "\u003Cp\u003EA small chevron (the default). Mirrors in right-to-left languages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Slash", "type": "BreadcrumbSeparator", "summary": "\u003Cp\u003EA slash.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Breakpoint", "fullName": "IzzyBlazor.Breakpoint", "kind": "enum", "summary": "\u003Cp\u003EThe responsive breakpoints. Mobile first: a value at a breakpoint applies from that width upward.\u003C/p\u003E", "members": [ { "name": "Sm", "type": "Breakpoint", "summary": "\u003Cp\u003E640px and wider.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "Breakpoint", "summary": "\u003Cp\u003E768px and wider.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "Breakpoint", "summary": "\u003Cp\u003E1024px and wider.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl", "type": "Breakpoint", "summary": "\u003Cp\u003E1280px and wider.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ButtonVariant", "fullName": "IzzyBlazor.ButtonVariant", "kind": "enum", "summary": "\u003Cp\u003EA button\u0026#39;s visual weight, from strongest to quietest.\u003C/p\u003E", "members": [ { "name": "Solid", "type": "ButtonVariant", "summary": "\u003Cp\u003EFilled with the accent color. For the main action.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Soft", "type": "ButtonVariant", "summary": "\u003Cp\u003EA light tint of the accent color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Outline", "type": "ButtonVariant", "summary": "\u003Cp\u003EAn accent-colored border on a transparent background.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Ghost", "type": "ButtonVariant", "summary": "\u003Cp\u003ETransparent until hovered. For toolbars and dense layouts.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Link", "type": "ButtonVariant", "summary": "\u003Cp\u003ELooks like a link.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "CardVariant", "fullName": "IzzyBlazor.CardVariant", "kind": "enum", "summary": "\u003Cp\u003EHow a \u003Ca href=\u0022cref:T:IzzyBlazor.Card\u0022\u003E\u003Ccode\u003ECard\u003C/code\u003E\u003C/a\u003E is drawn.\u003C/p\u003E", "members": [ { "name": "Outline", "type": "CardVariant", "summary": "\u003Cp\u003EA white surface with a border (the default). Works on white and on a tinted page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Elevated", "type": "CardVariant", "summary": "\u003Cp\u003EA raised surface with a shadow.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Filled", "type": "CardVariant", "summary": "\u003Cp\u003EA quiet fill with no border, for a card inside a white surface (a panel, a dialog, another card). On a tinted page it nearly disappears; use Outline there.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "CellAlign", "fullName": "IzzyBlazor.CellAlign", "kind": "enum", "summary": "\u003Cp\u003EHow a table cell\u0026#39;s content lines up.\u003C/p\u003E", "members": [ { "name": "Start", "type": "CellAlign", "summary": "\u003Cp\u003EThe start (left in left-to-right languages). The default for text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Center", "type": "CellAlign", "summary": "\u003Cp\u003ECentered.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "End", "type": "CellAlign", "summary": "\u003Cp\u003EThe end (right in left-to-right languages). The default for numbers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Color", "fullName": "IzzyBlazor.Color", "kind": "struct", "summary": "\u003Cp\u003EA color: one of the theme\u0026#39;s tokens (so it follows light and dark mode), a custom token from your own theme, or a raw CSS color.\u003C/p\u003E", "members": [ { "name": "Primary", "type": "Color", "summary": "\u003Cp\u003EBrand color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "OnPrimary", "type": "Color", "summary": "\u003Cp\u003EText and icons on \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Primary\u0022\u003E\u003Ccode\u003EPrimary\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Success", "type": "Color", "summary": "\u003Cp\u003ESuccess.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "OnSuccess", "type": "Color", "summary": "\u003Cp\u003EText and icons on \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Success\u0022\u003E\u003Ccode\u003ESuccess\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Warning", "type": "Color", "summary": "\u003Cp\u003EWarning.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "OnWarning", "type": "Color", "summary": "\u003Cp\u003EText and icons on \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Warning\u0022\u003E\u003Ccode\u003EWarning\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Danger", "type": "Color", "summary": "\u003Cp\u003EDanger.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "OnDanger", "type": "Color", "summary": "\u003Cp\u003EText and icons on \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Danger\u0022\u003E\u003Ccode\u003EDanger\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Info", "type": "Color", "summary": "\u003Cp\u003EInformational.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "OnInfo", "type": "Color", "summary": "\u003Cp\u003EText and icons on \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Info\u0022\u003E\u003Ccode\u003EInfo\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Neutral", "type": "Color", "summary": "\u003Cp\u003ENeutral accent.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "OnNeutral", "type": "Color", "summary": "\u003Cp\u003EText and icons on \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Neutral\u0022\u003E\u003Ccode\u003ENeutral\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Background", "type": "Color", "summary": "\u003Cp\u003EThe page, behind the surfaces: a near-white in the default theme.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Surface", "type": "Color", "summary": "\u003Cp\u003ECards, tables, fields and bars: white in light mode.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FillSubtle", "type": "Color", "summary": "\u003Cp\u003EThe quietest fill inside a surface, for large areas: a filled card, a panel, a band.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.16" }, { "name": "Fill", "type": "Color", "summary": "\u003Cp\u003EA fill inside a surface that must show at small sizes: table heads, code, wells.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.16" }, { "name": "FillStrong", "type": "Color", "summary": "\u003Cp\u003EThe strongest fill: selected and pressed states, chips, tracks, skeletons.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.16" }, { "name": "SurfaceOverlay", "type": "Color", "summary": "\u003Cp\u003EOverlays that float above the page: menus, popovers, dialogs, toasts. White like \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Surface\u0022\u003E\u003Ccode\u003ESurface\u003C/code\u003E\u003C/a\u003E in light mode, where a shadow sets it apart; a step lighter in dark mode.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.16" }, { "name": "OnSurface", "type": "Color", "summary": "\u003Cp\u003EText on any surface.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Muted", "type": "Color", "summary": "\u003Cp\u003ESecondary text on any surface: descriptions, metadata.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Subtle", "type": "Color", "summary": "\u003Cp\u003ETertiary text: captions, hints, placeholders. Still at least 4.5:1 on Surface and Fill.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Disabled", "type": "Color", "summary": "\u003Cp\u003EText of disabled controls. Deliberately low contrast.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PrimaryText", "type": "Color", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Color.Primary\u0022\u003E\u003Ccode\u003EPrimary\u003C/code\u003E\u003C/a\u003E tuned for text and links on surfaces (at least 4.5:1).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SuccessText", "type": "Color", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Color.Success\u0022\u003E\u003Ccode\u003ESuccess\u003C/code\u003E\u003C/a\u003E tuned for text on surfaces (at least 4.5:1).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "WarningText", "type": "Color", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Color.Warning\u0022\u003E\u003Ccode\u003EWarning\u003C/code\u003E\u003C/a\u003E tuned for text on surfaces (at least 4.5:1).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "DangerText", "type": "Color", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Color.Danger\u0022\u003E\u003Ccode\u003EDanger\u003C/code\u003E\u003C/a\u003E tuned for text on surfaces (at least 4.5:1).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "InfoText", "type": "Color", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Color.Info\u0022\u003E\u003Ccode\u003EInfo\u003C/code\u003E\u003C/a\u003E tuned for text on surfaces (at least 4.5:1).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PrimarySoft", "type": "Color", "summary": "\u003Cp\u003EThe accent\u0026#39;s soft tint: soft buttons, the current page, chips. Text on it: \u003Ca href=\u0022cref:P:IzzyBlazor.Color.PrimaryText\u0022\u003E\u003Ccode\u003EPrimaryText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SuccessSoft", "type": "Color", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Color.Success\u0022\u003E\u003Ccode\u003ESuccess\u003C/code\u003E\u003C/a\u003E\u0026#39;s soft tint, behind a success message. Text on it: \u003Ca href=\u0022cref:P:IzzyBlazor.Color.SuccessText\u0022\u003E\u003Ccode\u003ESuccessText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "WarningSoft", "type": "Color", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Color.Warning\u0022\u003E\u003Ccode\u003EWarning\u003C/code\u003E\u003C/a\u003E\u0026#39;s soft tint. Text on it: \u003Ca href=\u0022cref:P:IzzyBlazor.Color.WarningText\u0022\u003E\u003Ccode\u003EWarningText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "DangerSoft", "type": "Color", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Color.Danger\u0022\u003E\u003Ccode\u003EDanger\u003C/code\u003E\u003C/a\u003E\u0026#39;s soft tint. Text on it: \u003Ca href=\u0022cref:P:IzzyBlazor.Color.DangerText\u0022\u003E\u003Ccode\u003EDangerText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "InfoSoft", "type": "Color", "summary": "\u003Cp\u003E\u003Ca href=\u0022cref:P:IzzyBlazor.Color.Info\u0022\u003E\u003Ccode\u003EInfo\u003C/code\u003E\u003C/a\u003E\u0026#39;s soft tint. Text on it: \u003Ca href=\u0022cref:P:IzzyBlazor.Color.InfoText\u0022\u003E\u003Ccode\u003EInfoText\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Focus", "type": "Color", "summary": "\u003Cp\u003EThe focus ring and field halo color: \u003Ccode\u003E--ib-color-focus\u003C/code\u003E, the primary color unless the theme sets it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Border", "type": "Color", "summary": "\u003Cp\u003EBorders and dividers. Decorative: too light to be the only edge of a control.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Outline", "type": "Color", "summary": "\u003Cp\u003EThe edge of a control, such as an input or switch track: about 2:1 against \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Surface\u0022\u003E\u003Ccode\u003ESurface\u003C/code\u003E\u003C/a\u003E, darker than \u003Ca href=\u0022cref:P:IzzyBlazor.Color.Border\u0022\u003E\u003Ccode\u003EBorder\u003C/code\u003E\u003C/a\u003E so an empty field reads as a box.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Transparent", "type": "Color", "summary": "\u003Cp\u003EFully transparent.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CurrentColor", "type": "Color", "summary": "\u003Cp\u003EThe current text color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Token", "type": "Color Token(string name)", "summary": "\u003Cp\u003EA theme token by name, rendered as \u003Ccode\u003Evar(--ib-color-{name})\u003C/code\u003E. Use it for tokens your own theme adds.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Of", "type": "Color Of(string css)", "summary": "\u003Cp\u003EA raw CSS color such as \u003Ccode\u003E#ff6600\u003C/code\u003E or \u003Ccode\u003Eoklch(70% 0.1 250)\u003C/code\u003E. Checked for unsafe characters.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Css", "type": "string", "summary": "\u003Cp\u003EThe CSS value this color renders as.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TokenName", "type": "string?", "summary": "\u003Cp\u003EThe theme token name, such as \u003Ccode\u003Eprimary\u003C/code\u003E, or \u003Ccode\u003Enull\u003C/code\u003E for a raw color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ContrastText", "type": "Color?", "summary": "\u003Cp\u003EThe text color that pairs with this color used as a background: \u003Ccode\u003EOnPrimary\u003C/code\u003E for \u003Ccode\u003EPrimary\u003C/code\u003E, \u003Ccode\u003EOnSurface\u003C/code\u003E for the surfaces, \u003Ccode\u003Eon-{name}\u003C/code\u003E for a custom token (which falls back to the inherited color when the theme does not define it). \u003Ccode\u003Enull\u003C/code\u003E for raw colors and for colors that are already text colors.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ColorScheme", "fullName": "IzzyBlazor.ColorScheme", "kind": "enum", "summary": "\u003Cp\u003ELight, dark, or automatic. For the app (\u003Ca href=\u0022cref:P:IzzyBlazor.IzzyTheme.ColorScheme\u0022\u003E\u003Ccode\u003EColorScheme\u003C/code\u003E\u003C/a\u003E, the user\u0026#39;s pick in a \u003Ca href=\u0022cref:T:IzzyBlazor.ColorSchemeSwitch\u0022\u003E\u003Ccode\u003EColorSchemeSwitch\u003C/code\u003E\u003C/a\u003E), \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Auto\u0022\u003E\u003Ccode\u003EColorScheme.Auto\u003C/code\u003E\u003C/a\u003E follows the device. For part of a page (\u003Ccode\u003EColorScheme\u003C/code\u003E on Box and the App layout parts), \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Auto\u0022\u003E\u003Ccode\u003EColorScheme.Auto\u003C/code\u003E\u003C/a\u003E follows the page, and \u003Ca href=\u0022cref:F:IzzyBlazor.ColorScheme.Inverse\u0022\u003E\u003Ccode\u003EColorScheme.Inverse\u003C/code\u003E\u003C/a\u003E is the opposite of it. Every color token switches with the scheme, so links, buttons, badges, fields and focus rings inside keep their contrast.\u003C/p\u003E", "members": [ { "name": "Auto", "type": "ColorScheme", "summary": "\u003Cp\u003EFollow the device for the app, or the page for part of it (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Light", "type": "ColorScheme", "summary": "\u003Cp\u003EAlways light.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dark", "type": "ColorScheme", "summary": "\u003Cp\u003EAlways dark, such as a dark sidebar in a light app.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Inverse", "type": "ColorScheme", "summary": "\u003Cp\u003EFor part of a page: the opposite of the page, dark on a light page and light on a dark one.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ColorSchemeSwitchVariant", "fullName": "IzzyBlazor.ColorSchemeSwitchVariant", "kind": "enum", "summary": "\u003Cp\u003EHow a \u003Ca href=\u0022cref:T:IzzyBlazor.ColorSchemeSwitch\u0022\u003E\u003Ccode\u003EColorSchemeSwitch\u003C/code\u003E\u003C/a\u003E looks.\u003C/p\u003E", "members": [ { "name": "Menu", "type": "ColorSchemeSwitchVariant", "summary": "\u003Cp\u003EAn icon button (sun or moon) that opens a menu: System, Light, Dark. The default.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Toggle", "type": "ColorSchemeSwitchVariant", "summary": "\u003Cp\u003EOne icon button that flips between light and dark.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Segmented", "type": "ColorSchemeSwitchVariant", "summary": "\u003Cp\u003ESystem, Light and Dark side by side, for a settings page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ConfirmOptions", "fullName": "IzzyBlazor.ConfirmOptions", "kind": "class", "summary": "\u003Cp\u003EHow \u003Ca href=\u0022cref:M:IzzyBlazor.DialogService.ConfirmAsync(System.String,System.String,IzzyBlazor.ConfirmOptions)\u0022\u003E\u003Ccode\u003EConfirmAsync\u003C/code\u003E\u003C/a\u003E asks.\u003C/p\u003E", "members": [ { "name": "ConfirmText", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe confirm button\u0026#39;s text. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.IzzyText.Ok\u0022\u003E\u003Ccode\u003EOk\u003C/code\u003E\u003C/a\u003E (\u0026quot;OK\u0026quot;).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "CancelText", "type": "string?", "default": "computed", "summary": "\u003Cp\u003EThe cancel button\u0026#39;s text. Defaults to \u003Ca href=\u0022cref:P:IzzyBlazor.IzzyText.Cancel\u0022\u003E\u003Ccode\u003ECancel\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Accent", "type": "Accent", "default": "Accent.Primary", "summary": "\u003Cp\u003EThe confirm button\u0026#39;s color, such as \u003Ca href=\u0022cref:P:IzzyBlazor.Accent.Danger\u0022\u003E\u003Ccode\u003EDanger\u003C/code\u003E\u003C/a\u003E for a delete. Defaults to primary.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ContainerSize", "fullName": "IzzyBlazor.ContainerSize", "kind": "enum", "summary": "\u003Cp\u003EHow wide a \u003Ca href=\u0022cref:T:IzzyBlazor.Container\u0022\u003E\u003Ccode\u003EContainer\u003C/code\u003E\u003C/a\u003E gets.\u003C/p\u003E", "members": [ { "name": "Sm", "type": "ContainerSize", "summary": "\u003Cp\u003E40rem: forms and short text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "ContainerSize", "summary": "\u003Cp\u003E48rem: articles.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "ContainerSize", "summary": "\u003Cp\u003E64rem: most pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl", "type": "ContainerSize", "summary": "\u003Cp\u003E80rem: wide dashboards (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Full", "type": "ContainerSize", "summary": "\u003Cp\u003ENo limit; only the side padding.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ControlPosition", "fullName": "IzzyBlazor.ControlPosition", "kind": "enum", "summary": "\u003Cp\u003EWhich side of its label a checkbox or switch sits on.\u003C/p\u003E", "members": [ { "name": "Start", "type": "ControlPosition", "summary": "\u003Cp\u003EBefore the label (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "End", "type": "ControlPosition", "summary": "\u003Cp\u003EAfter the label, at the end of the row, with the hint under the label. For settings lists of switches.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ControlSize", "fullName": "IzzyBlazor.ControlSize", "kind": "enum", "summary": "\u003Cp\u003EThe 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.\u003C/p\u003E", "members": [ { "name": "Sm", "type": "ControlSize", "summary": "\u003Cp\u003E32px tall, small text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "ControlSize", "summary": "\u003Cp\u003E36px tall (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "ControlSize", "summary": "\u003Cp\u003E44px tall, large text. For touch-first and marketing pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "DialogPlacement", "fullName": "IzzyBlazor.DialogPlacement", "kind": "enum", "summary": "\u003Cp\u003EWhere a \u003Ca href=\u0022cref:T:IzzyBlazor.Dialog\u0022\u003E\u003Ccode\u003EDialog\u003C/code\u003E\u003C/a\u003E appears.\u003C/p\u003E", "members": [ { "name": "Center", "type": "DialogPlacement", "summary": "\u003Cp\u003EIn the middle of the screen (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Start", "type": "DialogPlacement", "summary": "\u003Cp\u003EA full-height drawer on the start side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "End", "type": "DialogPlacement", "summary": "\u003Cp\u003EA full-height drawer on the end side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Top", "type": "DialogPlacement", "summary": "\u003Cp\u003EA full-width sheet along the top edge, as tall as its content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bottom", "type": "DialogPlacement", "summary": "\u003Cp\u003EA full-width sheet along the bottom edge, as tall as its content. Suits phones.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "DialogSize", "fullName": "IzzyBlazor.DialogSize", "kind": "enum", "summary": "\u003Cp\u003EThe width of a \u003Ca href=\u0022cref:T:IzzyBlazor.Dialog\u0022\u003E\u003Ccode\u003EDialog\u003C/code\u003E\u003C/a\u003E. A \u003Ca href=\u0022cref:T:IzzyBlazor.Drawer\u0022\u003E\u003Ccode\u003EDrawer\u003C/code\u003E\u003C/a\u003E, or a dialog at the start or end edge, is narrower: Sm 20rem, Md 24rem, Lg 32rem, Xl 40rem.\u003C/p\u003E", "members": [ { "name": "Sm", "type": "DialogSize", "summary": "\u003Cp\u003E24rem. Confirmations.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "DialogSize", "summary": "\u003Cp\u003E32rem (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "DialogSize", "summary": "\u003Cp\u003E48rem. Forms with two columns.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl", "type": "DialogSize", "summary": "\u003Cp\u003E64rem. Tables and previews.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Full", "type": "DialogSize", "summary": "\u003Cp\u003EThe whole viewport.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Direction", "fullName": "IzzyBlazor.Direction", "kind": "enum", "summary": "\u003Cp\u003EThe direction a \u003Ca href=\u0022cref:T:IzzyBlazor.Stack\u0022\u003E\u003Ccode\u003EStack\u003C/code\u003E\u003C/a\u003E lays out its children.\u003C/p\u003E", "members": [ { "name": "Row", "type": "Direction", "summary": "\u003Cp\u003ELeft to right (in left-to-right languages).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Column", "type": "Direction", "summary": "\u003Cp\u003ETop to bottom.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "RowReverse", "type": "Direction", "summary": "\u003Cp\u003ERight to left.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ColumnReverse", "type": "Direction", "summary": "\u003Cp\u003EBottom to top.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "DismissMemory", "fullName": "IzzyBlazor.DismissMemory", "kind": "enum", "summary": "\u003Cp\u003EHow long a dismissed \u003Ca href=\u0022cref:T:IzzyBlazor.Banner\u0022\u003E\u003Ccode\u003EBanner\u003C/code\u003E\u003C/a\u003E stays dismissed.\u003C/p\u003E", "members": [ { "name": "Session", "type": "DismissMemory", "summary": "\u003Cp\u003EUntil the browser closes (a session cookie). The default.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Persistent", "type": "DismissMemory", "summary": "\u003Cp\u003EFor a year, across visits.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "None", "type": "DismissMemory", "summary": "\u003Cp\u003ENot remembered: it shows again on the next page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "FilterPlacement", "fullName": "IzzyBlazor.FilterPlacement", "kind": "enum", "summary": "\u003Cp\u003EWhere a \u003Ca href=\u0022cref:T:IzzyBlazor.Table\u00601\u0022\u003E\u003Ccode\u003ETable\u0026lt;T\u0026gt;\u003C/code\u003E\u003C/a\u003E puts its column filters.\u003C/p\u003E", "members": [ { "name": "Header", "type": "FilterPlacement", "summary": "\u003Cp\u003EA filter button in each filterable column\u0026#39;s header, opening the filter in a popover; the active filters show as removable tags above the table. The default.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Row", "type": "FilterPlacement", "summary": "\u003Cp\u003EA row of filter fields under the headers, always in view: for tables people filter constantly.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "FontFamily", "fullName": "IzzyBlazor.FontFamily", "kind": "enum", "summary": "\u003Cp\u003EFont family tokens.\u003C/p\u003E", "members": [ { "name": "Body", "type": "FontFamily", "summary": "\u003Cp\u003EThe body font (the default), \u003Ccode\u003E--ib-font-body\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Heading", "type": "FontFamily", "summary": "\u003Cp\u003EThe heading font, \u003Ccode\u003E--ib-font-heading\u003C/code\u003E: the body font unless the theme sets one (Newsreader in Editorial).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Mono", "type": "FontFamily", "summary": "\u003Cp\u003EThe monospace font, for code and figures, \u003Ccode\u003E--ib-font-mono\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "FontWeight", "fullName": "IzzyBlazor.FontWeight", "kind": "enum", "summary": "\u003Cp\u003EFont weights.\u003C/p\u003E", "members": [ { "name": "Light", "type": "FontWeight", "summary": "\u003Cp\u003E300.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Normal", "type": "FontWeight", "summary": "\u003Cp\u003E400.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Medium", "type": "FontWeight", "summary": "\u003Cp\u003E500.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Semibold", "type": "FontWeight", "summary": "\u003Cp\u003E600.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bold", "type": "FontWeight", "summary": "\u003Cp\u003E700.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Extrabold", "type": "FontWeight", "summary": "\u003Cp\u003E800.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "FormLayout", "fullName": "IzzyBlazor.FormLayout", "kind": "enum", "summary": "\u003Cp\u003EHow a \u003Ca href=\u0022cref:T:IzzyBlazor.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E lays out labels and fields.\u003C/p\u003E", "members": [ { "name": "Vertical", "type": "FormLayout", "summary": "\u003Cp\u003ELabels above fields (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Horizontal", "type": "FormLayout", "summary": "\u003Cp\u003ELabels in a column to the left of fields, from 640px up.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "HighlightMatch", "fullName": "IzzyBlazor.HighlightMatch", "kind": "enum", "summary": "\u003Cp\u003EWhere a word of a \u003Ca href=\u0022cref:T:IzzyBlazor.Highlight\u0022\u003E\u003Ccode\u003EHighlight\u003C/code\u003E\u003C/a\u003E\u0026#39;s query may match.\u003C/p\u003E", "members": [ { "name": "WordStart", "type": "HighlightMatch", "summary": "\u003Cp\u003EAt the start of a word, including the words inside a PascalCase name.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.15" }, { "name": "Anywhere", "type": "HighlightMatch", "summary": "\u003Cp\u003EAnywhere in the text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.15" } ], "addedIn": "0.1.0-alpha.15" }, { "name": "IconRole", "fullName": "IzzyBlazor.IconRole", "kind": "enum", "summary": "\u003Cp\u003EThe icons IzzyBlazor\u0026#39;s own components use, by purpose rather than by name, so the whole library can switch icon sets in one place.\u003C/p\u003E", "members": [ { "name": "Close", "type": "IconRole", "summary": "\u003Cp\u003EClose a dialog, toast or alert.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChevronDown", "type": "IconRole", "summary": "\u003Cp\u003EOpen a menu or expand downward.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChevronUp", "type": "IconRole", "summary": "\u003Cp\u003ECollapse upward.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChevronLeft", "type": "IconRole", "summary": "\u003Cp\u003EPrevious, or back.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ChevronRight", "type": "IconRole", "summary": "\u003Cp\u003ENext, or forward.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Check", "type": "IconRole", "summary": "\u003Cp\u003ESelected or done.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Minus", "type": "IconRole", "summary": "\u003Cp\u003ERemove, decrease, or indeterminate.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Plus", "type": "IconRole", "summary": "\u003Cp\u003EAdd or increase.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Menu", "type": "IconRole", "summary": "\u003Cp\u003EOpen the navigation menu.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Search", "type": "IconRole", "summary": "\u003Cp\u003ESearch.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MoreHorizontal", "type": "IconRole", "summary": "\u003Cp\u003EMore actions.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Info", "type": "IconRole", "summary": "\u003Cp\u003EInformational message.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Success", "type": "IconRole", "summary": "\u003Cp\u003ESuccess message.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Warning", "type": "IconRole", "summary": "\u003Cp\u003EWarning message.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Error", "type": "IconRole", "summary": "\u003Cp\u003EError message.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ExternalLink", "type": "IconRole", "summary": "\u003Cp\u003EOpens in a new tab.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Copy", "type": "IconRole", "summary": "\u003Cp\u003ECopy to clipboard.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Copied", "type": "IconRole", "summary": "\u003Cp\u003ECopied.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Calendar", "type": "IconRole", "summary": "\u003Cp\u003EDate input.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Clock", "type": "IconRole", "summary": "\u003Cp\u003ETime input.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Show", "type": "IconRole", "summary": "\u003Cp\u003EShow password.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Hide", "type": "IconRole", "summary": "\u003Cp\u003EHide password.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Loading", "type": "IconRole", "summary": "\u003Cp\u003EBusy or loading (spun with CSS).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SortAscending", "type": "IconRole", "summary": "\u003Cp\u003EColumn sorted ascending.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SortDescending", "type": "IconRole", "summary": "\u003Cp\u003EColumn sorted descending.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sortable", "type": "IconRole", "summary": "\u003Cp\u003EColumn sortable, not sorted.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TrendUp", "type": "IconRole", "summary": "\u003Cp\u003EA figure went up.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TrendDown", "type": "IconRole", "summary": "\u003Cp\u003EA figure went down.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TrendFlat", "type": "IconRole", "summary": "\u003Cp\u003EA figure didn\u0026#39;t change.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Filter", "type": "IconRole", "summary": "\u003Cp\u003EFilter a column or list.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SchemeLight", "type": "IconRole", "summary": "\u003Cp\u003EThe light color scheme.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SchemeDark", "type": "IconRole", "summary": "\u003Cp\u003EThe dark color scheme.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "SchemeSystem", "type": "IconRole", "summary": "\u003Cp\u003EFollow the device\u0026#39;s color scheme.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Person", "type": "IconRole", "summary": "\u003Cp\u003EA person with no photo or name, such as an empty avatar.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Play", "type": "IconRole", "summary": "\u003Cp\u003EPlay a video.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Upload", "type": "IconRole", "summary": "\u003Cp\u003EUpload a file.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "IconSize", "fullName": "IzzyBlazor.IconSize", "kind": "enum", "summary": "\u003Cp\u003EIcon sizes, relative to the surrounding text so icons line up with labels.\u003C/p\u003E", "members": [ { "name": "Xs", "type": "IconSize", "summary": "\u003Cp\u003E0.75em.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sm", "type": "IconSize", "summary": "\u003Cp\u003E0.875em.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "IconSize", "summary": "\u003Cp\u003E1em, the size of the surrounding text (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "IconSize", "summary": "\u003Cp\u003E1.25em.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl", "type": "IconSize", "summary": "\u003Cp\u003E1.5em.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl2", "type": "IconSize", "summary": "\u003Cp\u003E2em.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl3", "type": "IconSize", "summary": "\u003Cp\u003E3em.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ImageFit", "fullName": "IzzyBlazor.ImageFit", "kind": "enum", "summary": "\u003Cp\u003EHow an \u003Ca href=\u0022cref:T:IzzyBlazor.Image\u0022\u003E\u003Ccode\u003EImage\u003C/code\u003E\u003C/a\u003E fills a box with a different shape (\u003Ca href=\u0022cref:P:IzzyBlazor.Image.Ratio\u0022\u003E\u003Ccode\u003ERatio\u003C/code\u003E\u003C/a\u003E).\u003C/p\u003E", "members": [ { "name": "Cover", "type": "ImageFit", "summary": "\u003Cp\u003EFills the box, cropping the edges (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Contain", "type": "ImageFit", "summary": "\u003Cp\u003EShows the whole image, leaving bands.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Justify", "fullName": "IzzyBlazor.Justify", "kind": "enum", "summary": "\u003Cp\u003EMain-axis distribution of a \u003Ca href=\u0022cref:T:IzzyBlazor.Stack\u0022\u003E\u003Ccode\u003EStack\u003C/code\u003E\u003C/a\u003E\u0026#39;s children.\u003C/p\u003E", "members": [ { "name": "Start", "type": "Justify", "summary": "\u003Cp\u003EPacked at the start.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Center", "type": "Justify", "summary": "\u003Cp\u003EPacked in the center.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "End", "type": "Justify", "summary": "\u003Cp\u003EPacked at the end.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Between", "type": "Justify", "summary": "\u003Cp\u003EFirst and last at the edges, equal space between.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Around", "type": "Justify", "summary": "\u003Cp\u003EEqual space around each child.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Evenly", "type": "Justify", "summary": "\u003Cp\u003EEqual space between and at the edges.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Length", "fullName": "IzzyBlazor.Length", "kind": "struct", "summary": "\u003Cp\u003EA width, height or flex basis: a size token, a keyword, or a CSS length built with a factory such as \u003Ca href=\u0022cref:M:IzzyBlazor.Length.Rem(System.Double)\u0022\u003E\u003Ccode\u003ERem\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "members": [ { "name": "Sm", "type": "Length", "summary": "\u003Cp\u003E640px (matches the \u003Ccode\u003Esm\u003C/code\u003E breakpoint).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "Length", "summary": "\u003Cp\u003E768px (matches the \u003Ccode\u003Emd\u003C/code\u003E breakpoint).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "Length", "summary": "\u003Cp\u003E1024px (matches the \u003Ccode\u003Elg\u003C/code\u003E breakpoint).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl", "type": "Length", "summary": "\u003Cp\u003E1280px (matches the \u003Ccode\u003Exl\u003C/code\u003E breakpoint).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Prose", "type": "Length", "summary": "\u003Cp\u003EA comfortable reading width, 68 characters.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Full", "type": "Length", "summary": "\u003Cp\u003E100% of the containing block.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Auto", "type": "Length", "summary": "\u003Cp\u003E\u003Ccode\u003Eauto\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "FitContent", "type": "Length", "summary": "\u003Cp\u003E\u003Ccode\u003Efit-content\u003C/code\u003E: as wide as the content, up to the available space.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MinContent", "type": "Length", "summary": "\u003Cp\u003E\u003Ccode\u003Emin-content\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "MaxContent", "type": "Length", "summary": "\u003Cp\u003E\u003Ccode\u003Emax-content\u003C/code\u003E.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Px", "type": "Length Px(double value)", "summary": "\u003Cp\u003EPixels.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Rem", "type": "Length Rem(double value)", "summary": "\u003Cp\u003ERoot ems (16px each by default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Percent", "type": "Length Percent(double value)", "summary": "\u003Cp\u003EPercent of the containing block.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Ch", "type": "Length Ch(double value)", "summary": "\u003Cp\u003ECharacter widths, for text measures.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Vw", "type": "Length Vw(double value)", "summary": "\u003Cp\u003EPercent of the viewport width.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Dvh", "type": "Length Dvh(double value)", "summary": "\u003Cp\u003EPercent of the dynamic viewport height (accounts for mobile browser bars).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Of", "type": "Length Of(string css)", "summary": "\u003Cp\u003EAny CSS length, such as \u003Ccode\u003Ecalc(100% - 2rem)\u003C/code\u003E. Checked for unsafe characters.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Css", "type": "string", "summary": "\u003Cp\u003EThe CSS value this length renders as.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "LetterSpacing", "fullName": "IzzyBlazor.LetterSpacing", "kind": "enum", "summary": "\u003Cp\u003ELetter spacing tokens.\u003C/p\u003E", "members": [ { "name": "Tighter", "type": "LetterSpacing", "summary": "\u003Cp\u003E-0.05em.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Tight", "type": "LetterSpacing", "summary": "\u003Cp\u003E-0.025em, for large headings.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Normal", "type": "LetterSpacing", "summary": "\u003Cp\u003E0.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Wide", "type": "LetterSpacing", "summary": "\u003Cp\u003E0.025em.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Wider", "type": "LetterSpacing", "summary": "\u003Cp\u003E0.05em, for small uppercase labels.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Widest", "type": "LetterSpacing", "summary": "\u003Cp\u003E0.1em.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "LineHeight", "fullName": "IzzyBlazor.LineHeight", "kind": "enum", "summary": "\u003Cp\u003ELine height tokens.\u003C/p\u003E", "members": [ { "name": "None", "type": "LineHeight", "summary": "\u003Cp\u003E1.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Tight", "type": "LineHeight", "summary": "\u003Cp\u003E1.25, for headings.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Snug", "type": "LineHeight", "summary": "\u003Cp\u003E1.375.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Normal", "type": "LineHeight", "summary": "\u003Cp\u003E1.5, for body text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Relaxed", "type": "LineHeight", "summary": "\u003Cp\u003E1.625.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Loose", "type": "LineHeight", "summary": "\u003Cp\u003E2.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "MenuButtonPosition", "fullName": "IzzyBlazor.MenuButtonPosition", "kind": "enum", "summary": "\u003Cp\u003EWhere \u003Ca href=\u0022cref:T:IzzyBlazor.SiteNav\u0022\u003E\u003Ccode\u003ESiteNav\u003C/code\u003E\u003C/a\u003E\u0026#39;s menu button sits in the header on small screens.\u003C/p\u003E", "members": [ { "name": "End", "type": "MenuButtonPosition", "summary": "\u003Cp\u003EAt the end of the header, after everything else, where content sites put it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.16" }, { "name": "Start", "type": "MenuButtonPosition", "summary": "\u003Cp\u003EAt the start of the header, before the brand, where apps put a sidebar\u0026#39;s menu button.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.16" }, { "name": "InPlace", "type": "MenuButtonPosition", "summary": "\u003Cp\u003EWhere the links are in the header\u0026#39;s content.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.16" } ], "addedIn": "0.1.0-alpha.16" }, { "name": "Orientation", "fullName": "IzzyBlazor.Orientation", "kind": "enum", "summary": "\u003Cp\u003EWhether items run across or down.\u003C/p\u003E", "members": [ { "name": "Vertical", "type": "Orientation", "summary": "\u003Cp\u003ETop to bottom.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Horizontal", "type": "Orientation", "summary": "\u003Cp\u003ESide by side, wrapping when space runs out.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Overflow", "fullName": "IzzyBlazor.Overflow", "kind": "enum", "summary": "\u003Cp\u003EWhat happens to content that doesn\u0026#39;t fit.\u003C/p\u003E", "members": [ { "name": "Visible", "type": "Overflow", "summary": "\u003Cp\u003EIt shows outside the box (the CSS default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Hidden", "type": "Overflow", "summary": "\u003Cp\u003EIt\u0026#39;s cut off, with no scrollbars.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Auto", "type": "Overflow", "summary": "\u003Cp\u003EThe box scrolls when it needs to.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Scroll", "type": "Overflow", "summary": "\u003Cp\u003EThe box always has scrollbars.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Clip", "type": "Overflow", "summary": "\u003Cp\u003EIt\u0026#39;s cut off, and the box can\u0026#39;t be scrolled even from script.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Placement", "fullName": "IzzyBlazor.Placement", "kind": "enum", "summary": "\u003Cp\u003EWhere a floating element sits next to the thing that opened it. \u003Ccode\u003EStart\u003C/code\u003E and \u003Ccode\u003EEnd\u003C/code\u003E follow the reading direction, so they flip in right-to-left languages.\u003C/p\u003E", "members": [ { "name": "BottomStart", "type": "Placement", "summary": "\u003Cp\u003EBelow, lined up with the start edge (the default for menus).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bottom", "type": "Placement", "summary": "\u003Cp\u003EBelow, centered.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "BottomEnd", "type": "Placement", "summary": "\u003Cp\u003EBelow, lined up with the end edge.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TopStart", "type": "Placement", "summary": "\u003Cp\u003EAbove, lined up with the start edge.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Top", "type": "Placement", "summary": "\u003Cp\u003EAbove, centered (the default for tooltips).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TopEnd", "type": "Placement", "summary": "\u003Cp\u003EAbove, lined up with the end edge.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Start", "type": "Placement", "summary": "\u003Cp\u003EBeside, on the start side (the left in left-to-right languages).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "End", "type": "Placement", "summary": "\u003Cp\u003EBeside, on the end side (the right in left-to-right languages).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "PopoverMode", "fullName": "IzzyBlazor.PopoverMode", "kind": "enum", "summary": "\u003Cp\u003EHow a \u003Ca href=\u0022cref:T:IzzyBlazor.Popover\u0022\u003E\u003Ccode\u003EPopover\u003C/code\u003E\u003C/a\u003E closes.\u003C/p\u003E", "members": [ { "name": "Auto", "type": "PopoverMode", "summary": "\u003Cp\u003ECloses on Escape, on a click outside, or when another popover opens (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Manual", "type": "PopoverMode", "summary": "\u003Cp\u003EStays open until its trigger or a close button closes it.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ProseSize", "fullName": "IzzyBlazor.ProseSize", "kind": "enum", "summary": "\u003Cp\u003EText size for \u003Ca href=\u0022cref:T:IzzyBlazor.Prose\u0022\u003E\u003Ccode\u003EProse\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "members": [ { "name": "Sm", "type": "ProseSize", "summary": "\u003Cp\u003E14px text, for asides and dense pages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "ProseSize", "summary": "\u003Cp\u003E16px text (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "ProseSize", "summary": "\u003Cp\u003E18px text, for long reading.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Radius", "fullName": "IzzyBlazor.Radius", "kind": "enum", "summary": "\u003Cp\u003ECorner radius tokens.\u003C/p\u003E", "members": [ { "name": "None", "type": "Radius", "summary": "\u003Cp\u003ESquare corners.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sm", "type": "Radius", "summary": "\u003Cp\u003E4px by default (the preset and Radius set it). Small parts: checkboxes, menu items, tooltips.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "Radius", "summary": "\u003Cp\u003E6px by default (the preset and Radius set it). Controls: buttons, inputs, nav items.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "Radius", "summary": "\u003Cp\u003E10px by default (the preset and Radius set it). Popovers, menus and dialogs.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl", "type": "Radius", "summary": "\u003Cp\u003E12px by default (the preset and Radius set it). Cards and large panels.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Full", "type": "Radius", "summary": "\u003Cp\u003EFully rounded (pills and circles).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "RequiredMark", "fullName": "IzzyBlazor.RequiredMark", "kind": "enum", "summary": "\u003Cp\u003EWhich fields a \u003Ca href=\u0022cref:T:IzzyBlazor.Form\u0022\u003E\u003Ccode\u003EForm\u003C/code\u003E\u003C/a\u003E marks beside their labels.\u003C/p\u003E", "members": [ { "name": "Required", "type": "RequiredMark", "summary": "\u003Cp\u003ERequired fields get an asterisk (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Optional", "type": "RequiredMark", "summary": "\u003Cp\u003EFields that aren\u0026#39;t required get \u0026quot;(optional)\u0026quot;; required ones get nothing. Suits forms where most fields are required.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "None", "type": "RequiredMark", "summary": "\u003Cp\u003ENo marks.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "SectionSpacing", "fullName": "IzzyBlazor.SectionSpacing", "kind": "enum", "summary": "\u003Cp\u003EVertical padding for a \u003Ca href=\u0022cref:T:IzzyBlazor.Section\u0022\u003E\u003Ccode\u003ESection\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "members": [ { "name": "None", "type": "SectionSpacing", "summary": "\u003Cp\u003ENo padding: the content sets its own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sm", "type": "SectionSpacing", "summary": "\u003Cp\u003E32px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "SectionSpacing", "summary": "\u003Cp\u003E48px, 64px from 768px up (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "SectionSpacing", "summary": "\u003Cp\u003E64px, 96px from 768px up, for a hero or a closing call to action.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Shadow", "fullName": "IzzyBlazor.Shadow", "kind": "enum", "summary": "\u003Cp\u003EElevation tokens.\u003C/p\u003E", "members": [ { "name": "None", "type": "Shadow", "summary": "\u003Cp\u003ENo shadow.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sm", "type": "Shadow", "summary": "\u003Cp\u003EA subtle lift.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "Shadow", "summary": "\u003Cp\u003ECards and popovers.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "Shadow", "summary": "\u003Cp\u003EDialogs and floating panels.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ShellScroll", "fullName": "IzzyBlazor.ShellScroll", "kind": "enum", "summary": "\u003Cp\u003EWhat scrolls in an \u003Ca href=\u0022cref:T:IzzyBlazor.AppShell\u0022\u003E\u003Ccode\u003EAppShell\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "members": [ { "name": "Page", "type": "ShellScroll", "summary": "\u003Cp\u003EThe whole page scrolls (the default). Sticky bars, the sidebar and the aside stay in view. Best for content pages: browser scroll restoration and find-in-page just work.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Main", "type": "ShellScroll", "summary": "\u003Cp\u003EThe shell fills the window and only the main area scrolls, like a desktop app; the header, footer, sidebar and aside always stay put and scroll on their own.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ShellVariant", "fullName": "IzzyBlazor.ShellVariant", "kind": "enum", "summary": "\u003Cp\u003EHow an \u003Ca href=\u0022cref:T:IzzyBlazor.AppShell\u0022\u003E\u003Ccode\u003EAppShell\u003C/code\u003E\u003C/a\u003E layers its parts. Content is the brightest layer by default and the frame recedes into the page tint (\u003Ccode\u003E--ib-color-background\u003C/code\u003E). A part\u0026#39;s own \u003Ccode\u003EBg\u003C/code\u003E always wins.\u003C/p\u003E", "members": [ { "name": "Tinted", "type": "ShellVariant", "summary": "\u003Cp\u003EThe sidebar takes the page tint; header, main, aside and footer are surfaces (the default). The content stands out and the navigation recedes, like Linear, Notion or VS Code.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Inset", "type": "ShellVariant", "summary": "\u003Cp\u003EThe whole frame takes the page tint and the main area is a raised panel inset from the window edge, with rounded corners. The frame has no lines; the panel has an edge.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Flat", "type": "ShellVariant", "summary": "\u003Cp\u003EEvery part is a surface; lines alone separate them.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Canvas", "type": "ShellVariant", "summary": "\u003Cp\u003EThe main area takes the page tint and the frame is surfaces: for dashboards whose content is all cards. Put content in \u003Ca href=\u0022cref:T:IzzyBlazor.Card\u0022\u003E\u003Ccode\u003ECard\u003C/code\u003E\u003C/a\u003Es; fills placed straight on the tint read as holes.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "SidebarPosition", "fullName": "IzzyBlazor.SidebarPosition", "kind": "enum", "summary": "\u003Cp\u003EWhich side of the page a sidebar sits on, following the reading direction.\u003C/p\u003E", "members": [ { "name": "Start", "type": "SidebarPosition", "summary": "\u003Cp\u003EThe start side: left in left-to-right languages, right in right-to-left ones.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "End", "type": "SidebarPosition", "summary": "\u003Cp\u003EThe end side: right in left-to-right languages, left in right-to-left ones.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "SidebarSmallScreen", "fullName": "IzzyBlazor.SidebarSmallScreen", "kind": "enum", "summary": "\u003Cp\u003EHow an \u003Ca href=\u0022cref:T:IzzyBlazor.AppSidebar\u0022\u003E\u003Ccode\u003EAppSidebar\u003C/code\u003E\u003C/a\u003E opens below its breakpoint.\u003C/p\u003E", "members": [ { "name": "Drawer", "type": "SidebarSmallScreen", "summary": "\u003Cp\u003EA drawer that slides in from the side over the page (the default), full width on phones.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Panel", "type": "SidebarSmallScreen", "summary": "\u003Cp\u003EA panel under the header, full width and as tall as its content: the header stays in view and the menu button turns into the close button, as SiteNav\u0026#39;s menu does.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "StatTrend", "fullName": "IzzyBlazor.StatTrend", "kind": "enum", "summary": "\u003Cp\u003EWhich way a \u003Ca href=\u0022cref:T:IzzyBlazor.Stat\u0022\u003E\u003Ccode\u003EStat\u003C/code\u003E\u003C/a\u003E\u0026#39;s figure moved.\u003C/p\u003E", "members": [ { "name": "None", "type": "StatTrend", "summary": "\u003Cp\u003ENo arrow (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Up", "type": "StatTrend", "summary": "\u003Cp\u003EWent up. Shown in the success color unless the stat\u0026#39;s \u003Ccode\u003EChangeStatus\u003C/code\u003E says otherwise.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Down", "type": "StatTrend", "summary": "\u003Cp\u003EWent down. Shown in the danger color unless the stat\u0026#39;s \u003Ccode\u003EChangeStatus\u003C/code\u003E says otherwise.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Flat", "type": "StatTrend", "summary": "\u003Cp\u003EStayed the same.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "Status", "fullName": "IzzyBlazor.Status", "kind": "enum", "summary": "\u003Cp\u003EThe meaning of a piece of feedback: badges, and later alerts and toasts. Status colors are for telling people what happened, not for actions; see \u003Ca href=\u0022cref:T:IzzyBlazor.Accent\u0022\u003E\u003Ccode\u003EAccent\u003C/code\u003E\u003C/a\u003E.\u003C/p\u003E", "members": [ { "name": "Neutral", "type": "Status", "summary": "\u003Cp\u003ENo particular meaning (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Info", "type": "Status", "summary": "\u003Cp\u003EInformation, such as \u0026quot;New\u0026quot; or \u0026quot;Beta\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Success", "type": "Status", "summary": "\u003Cp\u003EDone or healthy, such as \u0026quot;Published\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Warning", "type": "Status", "summary": "\u003Cp\u003ENeeds attention, such as \u0026quot;In review\u0026quot; or \u0026quot;Expiring\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Danger", "type": "Status", "summary": "\u003Cp\u003EFailed or blocked, such as \u0026quot;Error\u0026quot; or \u0026quot;Overdue\u0026quot;.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "StepButtons", "fullName": "IzzyBlazor.StepButtons", "kind": "enum", "summary": "\u003Cp\u003EWhere a \u003Ca href=\u0022cref:T:IzzyBlazor.NumberField\u00601\u0022\u003E\u003Ccode\u003ENumberField\u0026lt;T\u0026gt;\u003C/code\u003E\u003C/a\u003E puts its increase and decrease buttons.\u003C/p\u003E", "members": [ { "name": "Stacked", "type": "StepButtons", "summary": "\u003Cp\u003EStacked at the end of the field (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Split", "type": "StepButtons", "summary": "\u003Cp\u003EDecrease at the start and increase at the end, full height: easier to tap.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "None", "type": "StepButtons", "summary": "\u003Cp\u003ENo buttons; arrow keys still step.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TableRequest", "fullName": "IzzyBlazor.TableRequest\u00601", "kind": "record", "summary": "\u003Cp\u003EWhat a \u003Ca href=\u0022cref:T:IzzyBlazor.Table\u00601\u0022\u003E\u003Ccode\u003ETable\u0026lt;T\u0026gt;\u003C/code\u003E\u003C/a\u003E asks its \u003Ccode\u003EItemsProvider\u003C/code\u003E for.\u003C/p\u003E", "members": [ { "name": "SortKey", "type": "string?", "summary": "\u003Cp\u003EThe sorted column\u0026#39;s key, or null.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Descending", "type": "bool", "summary": "\u003Cp\u003EWhether the sort is descending.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Page", "type": "int", "summary": "\u003Cp\u003EThe page, from 1.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "PageSize", "type": "int?", "summary": "\u003Cp\u003EItems per page, or null when the table doesn\u0026#39;t page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Filters", "type": "IReadOnlyDictionary\u003Cstring, string\u003E", "summary": "\u003Cp\u003EThe filter values, by column key (\u003Ccode\u003E\u0026quot;customer\u0026quot;\u003C/code\u003E \u2192 \u003Ccode\u003E\u0026quot;ada\u0026quot;\u003C/code\u003E). Empty when nothing is filtered.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Skip", "type": "int", "summary": "\u003Cp\u003EItems to skip for this page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Apply", "type": "IQueryable\u003CTItem\u003E Apply(IQueryable\u003CTItem\u003E source)", "summary": "\u003Cp\u003EApplies the requested filters, sort and page to a query. Count the total with \u003Ca href=\u0022cref:M:IzzyBlazor.TableRequest\u00601.ApplyFiltering(System.Linq.IQueryable{\u00600})\u0022\u003E\u003Ccode\u003EApplyFiltering\u003C/code\u003E\u003C/a\u003E, so it counts what the filters keep.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ApplyFiltering", "type": "IQueryable\u003CTItem\u003E ApplyFiltering(IQueryable\u003CTItem\u003E source)", "summary": "\u003Cp\u003EKeeps the items that match the requested filters, using each column\u0026#39;s own expression (EF Core translates it).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "ApplySorting", "type": "IQueryable\u003CTItem\u003E ApplySorting(IQueryable\u003CTItem\u003E source)", "summary": "\u003Cp\u003EApplies the requested sort to a query, using the column\u0026#39;s own expression (EF Core translates it).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TableResult", "fullName": "IzzyBlazor.TableResult\u00601", "kind": "record", "summary": "\u003Cp\u003EWhat an \u003Ccode\u003EItemsProvider\u003C/code\u003E returns: one page of items and the total count.\u003C/p\u003E", "members": [ { "name": "Items", "type": "IReadOnlyList\u003CTItem\u003E", "summary": "\u003Cp\u003EThe items on this page.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TotalItems", "type": "int", "summary": "\u003Cp\u003EHow many items match in all, for the pager.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TabsVariant", "fullName": "IzzyBlazor.TabsVariant", "kind": "enum", "summary": "\u003Cp\u003EHow \u003Ca href=\u0022cref:T:IzzyBlazor.Tabs\u0022\u003E\u003Ccode\u003ETabs\u003C/code\u003E\u003C/a\u003E draw their tab list.\u003C/p\u003E", "members": [ { "name": "Line", "type": "TabsVariant", "summary": "\u003Cp\u003EA line under the list, with the selected tab underlined (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Soft", "type": "TabsVariant", "summary": "\u003Cp\u003EThe selected tab gets a soft accent background.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Segmented", "type": "TabsVariant", "summary": "\u003Cp\u003EA segmented control: the tabs sit in a tray and the selected one is raised.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TagVariant", "fullName": "IzzyBlazor.TagVariant", "kind": "enum", "summary": "\u003Cp\u003EA tag\u0026#39;s visual weight.\u003C/p\u003E", "members": [ { "name": "Soft", "type": "TagVariant", "summary": "\u003Cp\u003EA light tint of the color (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Solid", "type": "TagVariant", "summary": "\u003Cp\u003EFilled with the color.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Outline", "type": "TagVariant", "summary": "\u003Cp\u003EA colored border.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TextAlign", "fullName": "IzzyBlazor.TextAlign", "kind": "enum", "summary": "\u003Cp\u003EHorizontal text alignment. Start and End follow the reading direction.\u003C/p\u003E", "members": [ { "name": "Start", "type": "TextAlign", "summary": "\u003Cp\u003ELeft in left-to-right languages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Center", "type": "TextAlign", "summary": "\u003Cp\u003ECentered.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "End", "type": "TextAlign", "summary": "\u003Cp\u003ERight in left-to-right languages.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Justify", "type": "TextAlign", "summary": "\u003Cp\u003EJustified to both edges.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TextDecoration", "fullName": "IzzyBlazor.TextDecoration", "kind": "enum", "summary": "\u003Cp\u003EText decoration lines.\u003C/p\u003E", "members": [ { "name": "None", "type": "TextDecoration", "summary": "\u003Cp\u003ENo line.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Underline", "type": "TextDecoration", "summary": "\u003Cp\u003EUnderlined.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "LineThrough", "type": "TextDecoration", "summary": "\u003Cp\u003EStruck through.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TextFieldType", "fullName": "IzzyBlazor.TextFieldType", "kind": "enum", "summary": "\u003Cp\u003EThe kind of text a \u003Ca href=\u0022cref:T:IzzyBlazor.TextField\u0022\u003E\u003Ccode\u003ETextField\u003C/code\u003E\u003C/a\u003E takes. Sets the input type and the mobile keyboard.\u003C/p\u003E", "members": [ { "name": "Text", "type": "TextFieldType", "summary": "\u003Cp\u003EPlain text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Email", "type": "TextFieldType", "summary": "\u003Cp\u003EAn email address.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Password", "type": "TextFieldType", "summary": "\u003Cp\u003EA password, masked, with a show/hide toggle.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Search", "type": "TextFieldType", "summary": "\u003Cp\u003EA search query.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Tel", "type": "TextFieldType", "summary": "\u003Cp\u003EA phone number.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Url", "type": "TextFieldType", "summary": "\u003Cp\u003EA URL.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TextSize", "fullName": "IzzyBlazor.TextSize", "kind": "enum", "summary": "\u003Cp\u003EFont size tokens, from \u003Ca href=\u0022cref:F:IzzyBlazor.TextSize.Xs\u0022\u003E\u003Ccode\u003ETextSize.Xs\u003C/code\u003E\u003C/a\u003E (12px) to \u003Ca href=\u0022cref:F:IzzyBlazor.TextSize.Xl6\u0022\u003E\u003Ccode\u003ETextSize.Xl6\u003C/code\u003E\u003C/a\u003E (60px).\u003C/p\u003E", "members": [ { "name": "Xs", "type": "TextSize", "summary": "\u003Cp\u003E12px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sm", "type": "TextSize", "summary": "\u003Cp\u003E14px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "TextSize", "summary": "\u003Cp\u003E16px, the body size.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "TextSize", "summary": "\u003Cp\u003E18px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl", "type": "TextSize", "summary": "\u003Cp\u003E20px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl2", "type": "TextSize", "summary": "\u003Cp\u003E24px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl3", "type": "TextSize", "summary": "\u003Cp\u003E30px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl4", "type": "TextSize", "summary": "\u003Cp\u003E36px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl5", "type": "TextSize", "summary": "\u003Cp\u003E48px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Xl6", "type": "TextSize", "summary": "\u003Cp\u003E60px.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TextTransform", "fullName": "IzzyBlazor.TextTransform", "kind": "enum", "summary": "\u003Cp\u003ELetter case changes.\u003C/p\u003E", "members": [ { "name": "None", "type": "TextTransform", "summary": "\u003Cp\u003EAs written.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Uppercase", "type": "TextTransform", "summary": "\u003Cp\u003EALL CAPS.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lowercase", "type": "TextTransform", "summary": "\u003Cp\u003Eall lowercase.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Capitalize", "type": "TextTransform", "summary": "\u003Cp\u003EEach Word Capitalized.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "TextWrap", "fullName": "IzzyBlazor.TextWrap", "kind": "enum", "summary": "\u003Cp\u003EHow lines break.\u003C/p\u003E", "members": [ { "name": "Wrap", "type": "TextWrap", "summary": "\u003Cp\u003ENormal wrapping.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "NoWrap", "type": "TextWrap", "summary": "\u003Cp\u003ENever wrap.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Balance", "type": "TextWrap", "summary": "\u003Cp\u003EEven line lengths; best for headings and short text.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Pretty", "type": "TextWrap", "summary": "\u003Cp\u003EAvoids a lone word on the last line; good for paragraphs.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ThemeDensity", "fullName": "IzzyBlazor.ThemeDensity", "kind": "enum", "summary": "\u003Cp\u003EHow much room controls and content take: control heights, table rows and card padding together.\u003C/p\u003E", "members": [ { "name": "Compact", "type": "ThemeDensity", "summary": "\u003Cp\u003EMore on screen: 32px controls, tight table rows.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Standard", "type": "ThemeDensity", "summary": "\u003Cp\u003EThe default: 36px controls.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Comfortable", "type": "ThemeDensity", "summary": "\u003Cp\u003ERoomier: 40px controls, generous rows and padding.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ThemePreset", "fullName": "IzzyBlazor.ThemePreset", "kind": "enum", "summary": "\u003Cp\u003EA preset: density, shape and type, with a default brand color and gray suited to the products likely to use it. Set it with \u003Ca href=\u0022cref:T:IzzyBlazor.IzzyTheme\u0022\u003E\u003Ccode\u003EIzzyTheme\u003C/code\u003E\u003C/a\u003E or \u003Ccode\u003Edata-ib-preset\u003C/code\u003E on \u003Ccode\u003E\u0026lt;html\u0026gt;\u003C/code\u003E.\u003C/p\u003E", "members": [ { "name": "Standard", "type": "ThemePreset", "summary": "\u003Cp\u003EThe default: 36px controls, medium radius, hairline shadows; Blue on Neutral.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Compact", "type": "ThemePreset", "summary": "\u003Cp\u003EDense data and admin: 32px controls, tight rows, small radius, borders only; Indigo on Slate.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Soft", "type": "ThemePreset", "summary": "\u003Cp\u003EConsumer apps and portals: 40px controls, roomy, large radius, gentle shadows; Teal on Neutral.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Editorial", "type": "ThemePreset", "summary": "\u003Cp\u003EReading and docs: IBM Plex Sans with Newsreader headings, large radius; Ink on Stone.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ThemeRadius", "fullName": "IzzyBlazor.ThemeRadius", "kind": "enum", "summary": "\u003Cp\u003EThe radius scale: controls, cards and dialogs shift together.\u003C/p\u003E", "members": [ { "name": "None", "type": "ThemeRadius", "summary": "\u003Cp\u003ESquare corners everywhere.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Sm", "type": "ThemeRadius", "summary": "\u003Cp\u003ESmall.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Md", "type": "ThemeRadius", "summary": "\u003Cp\u003EMedium (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Lg", "type": "ThemeRadius", "summary": "\u003Cp\u003ELarge.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Full", "type": "ThemeRadius", "summary": "\u003Cp\u003EPill-shaped controls: buttons, fields, segmented controls, tags and badges. Cards, popovers and dialogs take the large scale; joined button groups round only their outer ends.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ThemeScrollbars", "fullName": "IzzyBlazor.ThemeScrollbars", "kind": "enum", "summary": "\u003Cp\u003EWhose scrollbars the app uses: the system\u0026#39;s, or IzzyBlazor\u0026#39;s thin themed ones.\u003C/p\u003E", "members": [ { "name": "Auto", "type": "ThemeScrollbars", "summary": "\u003Cp\u003EThe default: the page keeps the system\u0026#39;s scrollbar (which fades when not scrolling on macOS and with Windows 11\u0026#39;s overlay scrollbars); the library\u0026#39;s own scroll areas (sidebar, aside, code, tables, menus, dialogs, \u003Ccode\u003E.ib-scroll\u003C/code\u003E) get thin themed ones.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Themed", "type": "ThemeScrollbars", "summary": "\u003Cp\u003EThin themed scrollbars on the page too, matching the library\u0026#39;s scroll areas. Styled scrollbars are always visible: they don\u0026#39;t fade on macOS or with overlay scrollbars.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Native", "type": "ThemeScrollbars", "summary": "\u003Cp\u003EThe system\u0026#39;s scrollbars everywhere, including the library\u0026#39;s scroll areas.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ToastPlacement", "fullName": "IzzyBlazor.ToastPlacement", "kind": "enum", "summary": "\u003Cp\u003EWhere a \u003Ca href=\u0022cref:T:IzzyBlazor.ToastRegion\u0022\u003E\u003Ccode\u003EToastRegion\u003C/code\u003E\u003C/a\u003E stacks its toasts. Start and End follow the reading direction.\u003C/p\u003E", "members": [ { "name": "TopStart", "type": "ToastPlacement", "summary": "\u003Cp\u003ETop corner on the start side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TopCenter", "type": "ToastPlacement", "summary": "\u003Cp\u003ETop center.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "TopEnd", "type": "ToastPlacement", "summary": "\u003Cp\u003ETop corner on the end side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "BottomStart", "type": "ToastPlacement", "summary": "\u003Cp\u003EBottom corner on the start side.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "BottomCenter", "type": "ToastPlacement", "summary": "\u003Cp\u003EBottom center.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "BottomEnd", "type": "ToastPlacement", "summary": "\u003Cp\u003EBottom corner on the end side (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] }, { "name": "ToolbarOverflow", "fullName": "IzzyBlazor.ToolbarOverflow", "kind": "enum", "summary": "\u003Cp\u003EWhen an item of a \u003Ca href=\u0022cref:T:IzzyBlazor.Toolbar\u0022\u003E\u003Ccode\u003EToolbar\u003C/code\u003E\u003C/a\u003E moves into its \u0026quot;\u2026\u0026quot; menu.\u003C/p\u003E", "members": [ { "name": "Auto", "type": "ToolbarOverflow", "summary": "\u003Cp\u003EWhen there\u0026#39;s no room for it, in order of \u003Ccode\u003EPriority\u003C/code\u003E (the default).\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Never", "type": "ToolbarOverflow", "summary": "\u003Cp\u003ENever: it stays in the bar, such as the main action.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Always", "type": "ToolbarOverflow", "summary": "\u003Cp\u003EAlways: it\u0026#39;s only in the menu, such as Print or Version history.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" } ], "addedIn": "0.1.0-alpha.13" }, { "name": "ToolbarPosition", "fullName": "IzzyBlazor.ToolbarPosition", "kind": "enum", "summary": "\u003Cp\u003EWhere an item of a \u003Ca href=\u0022cref:T:IzzyBlazor.Toolbar\u0022\u003E\u003Ccode\u003EToolbar\u003C/code\u003E\u003C/a\u003E sits.\u003C/p\u003E", "members": [ { "name": "Start", "type": "ToolbarPosition", "summary": "\u003Cp\u003EAt the start (the left in left-to-right text), the default.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "Center", "type": "ToolbarPosition", "summary": "\u003Cp\u003EIn the middle, kept centered between the start and the end.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" }, { "name": "End", "type": "ToolbarPosition", "summary": "\u003Cp\u003EAt the end, before the \u0026quot;\u2026\u0026quot; menu.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false, "addedIn": "0.1.0-alpha.13" } ], "addedIn": "0.1.0-alpha.13" }, { "name": "VerticalPosition", "fullName": "IzzyBlazor.VerticalPosition", "kind": "enum", "summary": "\u003Cp\u003ETop or bottom, such as where AppSidebar\u0026#39;s collapse button sits.\u003C/p\u003E", "members": [ { "name": "Top", "type": "VerticalPosition", "summary": "\u003Cp\u003EAt the top.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false }, { "name": "Bottom", "type": "VerticalPosition", "summary": "\u003Cp\u003EAt the bottom.\u003C/p\u003E", "bindable": false, "required": false, "responsive": false } ] } ] }