Repository navigation
v0.1.0-alpha.13
Pre-releaseA new Toolbar: one row of controls that stays one row, with what doesn't fit moving into a "…" menu that works with JavaScript off. Also: the names replaced in alpha.11 are gone, checkboxes, switches, radios, segments and sliders lose ReadOnly, dark mode is darker, segmented controls get a raised look, and a long list of accessibility and static-page fixes. Nothing moves on the page any more when IzzyBlazor's script arrives.
Toolbar
Toolbar holds its own items, written straight in it: ToolbarButton, ToolbarIconButton, ToolbarButtonGroup (of ToolbarButtons and ToolbarIconButtons; moves as one) and ToolbarMenu (a submenu in the "…" menu), which take the same parameters as Button, IconButton, ButtonGroup and Menu. ToolbarText is text that stays in the bar; ToolbarItem holds anything else (a field, a SegmentedControl, a Tooltip), with a Width and its MenuContent; ToolbarSeparator draws a line that goes with its neighbors.
<Toolbar Label="Editor">
<ToolbarButtonGroup Label="History">
<ToolbarIconButton Icon="Lucide.Undo2" Label="Undo" />
<ToolbarIconButton Icon="Lucide.Redo2" Label="Redo" />
</ToolbarButtonGroup>
<ToolbarSeparator />
<ToolbarButton StartIcon="Lucide.Link">Link</ToolbarButton>
<ToolbarButton Position="ToolbarPosition.End" Overflow="ToolbarOverflow.Never" Accent="Accent.Primary" Variant="ButtonVariant.Solid">Publish</ToolbarButton>
<ToolbarButton StartIcon="Lucide.Printer" Overflow="ToolbarOverflow.Always">Print</ToolbarButton>
</Toolbar>- Every item takes
Position(ToolbarPosition.Start, the default,CenterorEnd),Priority(lowest moves first) andOverflow(ToolbarOverflow.Auto, the default;Neverfor the main action;Alwaysfor what only the menu needs). A button in aToolbarButtonGrouptakes itsPositionfrom the group.ToolbarSeparatortakesPosition. - In the "…" menu an item keeps its
Href,Submit/Name/Value/FormAction/FormandOnClick, so the menu works with JavaScript off: the server works out the widths at which each item moves, from its label in Inter, and writes them as container queries (withIzzyTheme's nonce, orNonce). The script measures the real widths and corrects them without moving anything, and makes the bar atoolbarwith one tab stop and arrow keys. AToolbarIconButton's menu item shows its icon and itsLabel. - Buttons default to
Ghost,NeutralandSm.Wrapwraps onto more rows instead of using a menu.Label(optional) names the toolbar; name each one when a page has several.MoreLabelnames "…" (IzzyText.MoreActions, "More actions"). - A
ToolbarItemmoves into the menu only when it hasMenuContent, which stands in for it there; the buttons inside it are plainButtons that stay with it. - A plain
Button,IconButton,ButtonGrouporMenudirectly in aToolbaror aToolbarButtonGroupthrows, naming the toolbar item to use (orToolbarItem). - The toolbar draws its items itself, so a cascading value written around an item inside the toolbar doesn't reach it, and an item an
@ifadds after the first render comes after the rest of its position.
Changed (check when you update)
- The names replaced in 0.1.0-alpha.11 are removed. They were kept through alpha.12 so old markup failed to build. Gone:
LinkButton(useButtonwithHref),HeaderNav(SiteNav),DialogActions(DialogFooter),ButtonTypeand theTypeparameter ofButton,IconButtonandMenuItem(Submit,Reset), and the slot parametersAccordionItem.Header,Alert/Banner/EmptyState.Actions,Dialog.Header/FooterandAppSidebar.Header/Footer. Old slot markup now gets Razor's RZ10012 warning (an unknown element) instead of an error, so check your build warnings. Checkbox,Switch,CheckboxGroup,RadioGroup,SegmentedControlandSliderhave noReadOnly. HTML has no read-only checkbox, radio or range.ReadOnlymoved offFieldBaseonto the fields that keep it (TextField,TextArea,NumberField,ColorPicker,Select,Combobox,MultiSelect). On the six it's a build error, and areadonlyattribute passed any other way throws. In a read-onlyFormthey're disabled and hidden inputs post their values. UseDisabled.Headingthrows onAs.Levelsets its element, andAswas silently ignored. UseTextBlockfor text that looks like a heading but isn't one.SwitchrefusesIndeterminate(it throws).FilterSelectandFilterCheckboxneed aLabel(they were named by the query key). Their first option defaults to "{Label}: All".- More mistakes throw: a
CardwithHrefand noTitle; anAppMainwhoseiddiffers from itsAppShell'sMainId. - Dark mode is darker. Every gray set's dark surface steps down: neutral surface
#0d0d0f(was#141416), stone#0e0f10, slate#0f1218, with the page, containers, raised fill, border and outline moving with it. Text and outlines keep their contrast. A hexGray's dark ladder follows, andBrandPalettechecks against the new surfaces. - Segmented controls have a filled track and a raised chosen item.
SegmentedControl,ColorSchemeSwitch Segmentedand segmentedTabs, from--ib-color-segmentand the new--ib-color-on-segment,--ib-color-segment-edgeand--ib-color-segment-track. SegmentedTabsdrop the track's outline. - Disabled fields drop their border, as do disabled add-ons,
ColorPicker's andMultiSelect's boxes and the segmented track (read-only keeps it); also in a disabled fieldset. A disabled control's field icons dim (aSelect's chevron). SwitchfollowsSize: tracks are 28×16, 36×20 or 44×24px (were 36×20 at every size).NavLabelheads its group: 24px above and 8px below (was 12px above), in the text color instead of the faintest one.- A
Codeblock's fill is quieter in light mode (surface-container-low); inline code is unchanged. TextArea AutoGrowstarts atRowslines instead of a fixed two field heights.- A
Tabstab is aspanholding its radio and a label stretched over it (sorole="tab"isn't on alabel). Check CSS of your own that targets the tab's label. MultiSelectdraws its chips on the server and readsRendererInfo, so a bUnit test rendering one must set it.- A static
TextFieldno longer writes a posted password back into its HTML; the field is empty after a failed post. AppShellreserves the scrollbar strip only with JavaScript off. With script the page has a scrollbar only while it scrolls, and is padded while a dialog, drawer or panel locks it, so nothing shifts.NavItemandTabLinkwith a query are current only when the page's query is the same (in any order), and never for pages below. In aTabsnav, when a link with a query matches, links without one give way.- Focus moves on when the focused control is removed (a
Tag's remove button, a row's Delete): to the next control in the same container, else the one before, else the next on the page. Popover's centered and side placements size to their content and fall back below or above the trigger when neither side has room;Tooltip's flip at the window's edges.izzyblazor.cssno longer carries an inline source map, Debug included (1.1 MB down to 322 KB).
New
Toolbar,ToolbarButton,ToolbarIconButton,ToolbarButtonGroup,ToolbarMenu,ToolbarText,ToolbarItem,ToolbarSeparator,ToolbarPositionandToolbarOverflow(above).CheckboxGroup SelectAll: a box that checks or clears every option, showing a dash when some are checked;SelectAllText("Select all"). Needs script (static pages too); with JavaScript off it isn't shown.CheckboxGroup ItemDescription: an option's description, apart from its name.IconButton:Name,Value,FormandFormAction, as onButton(they throw withHref).ColorPicker PresetTextnames the presets.FieldError Id.FieldFrame AnnounceRequired.ModeSupportAttributeon every component, saying what works with JavaScript off, on static pages with the script and on interactive pages. It changes nothing at run time; the docs site shows it. Every…Changedcallback outside the form fields (@bind-Open,Table's@bind-Sortand the rest) is marked interactive only.IzzyText:MoreActions,SelectAll,Chosen,Required,Confirm,Search,SkipToContent,CodeBlock,ValueInvalidandNumberInvalid, for text that was hard-coded English.
Fixed
- Nothing moves when IzzyBlazor's script arrives. Parts shown or hidden by the script moved the page 7-82px about 200ms after it loaded; CSS now decides by
@media (scripting),MultiSelectdraws its chips on the server, andComboboxkeeps its select until ready. An on-demand element whose code can't load is laid out as with no script. - Accessibility: a code block is a group named by its
Title(or "Code"); a loadingIconButtonreads "Loading Delete"; aDialogHeaderis a level-2 heading, andDialogServicedialogs without a title are named byDialogOptions.Labelor the message; a labeledDivideris read as its text;Fieldset'sDescriptiondescribes the group;ComboboxandMultiSelectannounce "No matches" through a status beside the list; copy buttons announce "Copied" through a live region;MultiSelect's input is described by its chosen options;FormErrorsis read once (no longer alsorole="alert");NavLabelandNavDividerare valid list items; a requiredCheckboxGroupsays "(required)";CheckboxGroup,RadioGroupandSegmentedControltake focus after a failed static post;TextArea's count is linked as its description; a requiredComboboxorMultiSelectsetsaria-required. - The skip link moves focus to the main area under enhanced navigation too, and is inert while the sidebar drawer is open.
SidebarToggleand the close links are plain links with JavaScript off and buttons witharia-expandedwith script. - Static pages: a closed
?dialog=stays out of the address after an enhanced load; a dismissedAlertstays closed after a post; the first edit of a field with errors from the last post hides them; Escape closes a server-openedDialogorDrawerwhereclosedbyis supported (Chrome and Edge 134, Firefox 141). Combobox: changing the choice withSearchon an interactive page keeps it (the select fell back to the placeholder and posted nothing); Enter and leaving wait for search results; Enter with the list open never submits the form; duplicate values show once; server search reopens on the first results, not the last search's.FilterForm: inputs of your own (a date) apply when they change; an interactive page keeps its page number on load; Back and Forward forget what was being typed; Clear focuses the first filter; the button area keeps its height while empty.CheckboxandSwitch: links in a label can be clicked.Slider: quick key presses on an interactive page aren't undone.ToastRegion: a toast shown beforeNavigateToon an interactive page stays, and a toast reusing an earlier one's element gets its own timer.- Dialogs, drawers and panels reach the window's edge on
AppShellpages, with the backdrop covering the scrollbar strip. AppBrandwith an icon in aSidebarHeaderre-rendered forever (a full-height sidebar hung the server).Tabs: after enhanced navigation the selection follows the server's markup again; arrows from a clicked disabled tab go to the next enabled one.IconButtonin aTooltipleaves out its nativetitle, so hovering shows one tooltip. A hiddenTooltipwithout script no longer makes the page scroll sideways.Card:CardFooterstays at the bottom of a stretched card; a linked card's media sit above its link.MultiSelect: chips follow the field'sSizeand density; a disabled one looks disabled with script and its chips lose their remove buttons; the chevron stays beside the first row of chips; chips that fill a row don't add an empty one.SegmentedControlwithHideLabelhas no space above it, so it lines up in a row. A read-onlyColorPickershows its hex box so it can be focused.- A plain
[EmailAddress]or[Url]no longer sends .NET's English message, so the browser's own shows.
Full Changelog: v0.1.0-alpha.12...v0.1.0-alpha.13