Repository navigation
Releases: enabledevmode/izzyblazor
Release list
v0.1.0-alpha.19
Tabs that don't fit scroll by swipe on touch screens, and the docs site has more examples and five more hand-written Overviews. No API changes.
Fixed
- Tabs that don't fit scroll by swipe on phones and tablets. A swipe that started on a tab didn't move the strip (a mouse wheel and TabLinks did), for horizontal tabs and for vertical tabs, which are a row on phones. Each tab's label is now a box of its own rather than
display: contents; tabs look and click the same.
Docs site
- Examples: OnThisPage has a demo, a guide with its outline beside it; PrevNext, Container and AspectRatio have a second example each. Every component now has at least two.
- Overviews: Badge, Progress, CopyButton, Fieldset and OnThisPage have hand-written Overviews.
- Search no longer lists headings from an Overview's Usage sample as sections of the page.
- Crawlers are kept off query-string addresses (
robots.txt), and one client is held to 60 pages a minute, after a crawler walking the Pagination examples slowed every page.
Full Changelog: v0.1.0-alpha.18...v0.1.0-alpha.19
v0.1.0-alpha.18
Fixes for overlays and disclosures on interactive pages, tabs that scroll with a mouse wheel, and dialogs that keep their shape as they close. One parameter is gone: DialogClose.Reset.
Breaking
DialogCloseno longer takesReset. A reset button can't close a dialog (browsers ignore the close command on one, and the close form has nothing to reset), so it did nothing; it now throws. To reset a form as well, put aButtonwithResetbeside theDialogClose.
Fixed
- Quick opens and closes on interactive pages end where the user left them, at any connection speed. Renders made before the user's latest change could arrive late and undo it: a Dialog or Drawer could open and close for ever, and an Accordion item double-clicked on a slow connection ended in the wrong state. The script and C# now count each change (
IzzyToggleEventArgs.Seq, rendered asdata-ib-seq), and a render that hasn't caught up is ignored. This covers Dialog, Drawer, Popover, Menu, Accordion and Collapsible. - Back or Forward with a dialog open no longer leaves the page unresponsive. Enhanced navigation removed the dialog's
openattribute without closing it, so it stayed modal, unseen; it's now closed properly. - Closing a dialog no longer shrinks it to a line and re-centers it before it fades (most visible on phones). Safari and Firefox, which can't keep a closing dialog in the top layer, close it without the fade.
- Close buttons that submit the dialog's close form no longer carry the close command, which Chromium ignored and warned about in the console on every page with a dialog.
Navigation
- Tabs that don't fit scroll with a mouse wheel (the strip hides its scrollbar), handing back to the page at either end. The selected tab is scrolled into view when the page loads, after enhanced navigation, and when C# or the URL changes it.
FullWidthtabs keep equal widths but no narrower than their label, so they scroll instead of cutting labels off.
Disclosure
- On interactive pages
AccordionItemandCollapsiblerenderdata-openinstead ofopen, and IzzyBlazor's script opens them, before the first paint. Static pages are unchanged. Styles that use[open]still apply.
Docs site
- A demo's Desktop/Phone switch is hidden when the demo is narrower than 640px, where both looked the same.
- The Collapsible custom-trigger example keeps its width when it opens, so its trigger no longer moves from under the pointer.
Full Changelog: v0.1.0-alpha.17...v0.1.0-alpha.18
v0.1.0-alpha.17
A small fix release: a dialog opened from a link no longer shifts the page, and the dialog's close button sits in the corner with a larger X. No API changes.
Fixed
- Opening a dialog from a link (
?dialog=, or anything else that locks the page and arrives by enhanced navigation) no longer shifts the page sideways by the scrollbar's width. Enhanced navigation was dropping the width that pads the locked page in place of its scrollbar; it's now kept.
Overlays
- Dialog's close button sits in the corner, 0.5rem from the top and end edges, with a 1.25rem icon (it was 1rem, centered on the title's line, and looked small and low). A title that wraps no longer puts the button halfway down its two lines. The title, body and header height are unchanged. Drawers share the header, so theirs moves too.
Docs site
- A troubleshooting article, "Interactive parts stop responding in production": a circuit lives on the server that started it, so behind a load balancer each reader has to stay on one server. It covers the 404 "No Connection with that ID" in the console, sticky sessions, Azure SignalR Service, running one server (Fly.io's
--ha=false) and WebSockets through a proxy. Render modes links it. - The site runs on one machine again, so Live examples, such as Slider's "Following the value live", keep their connection.
Full Changelog: v0.1.0-alpha.16...v0.1.0-alpha.17
v0.1.0-alpha.16
The surface colors are renamed by what they do: an overlay floats above the page, and fills inside a surface go from subtle to strong in light and dark mode. Stepper gets a compact row on phones, SiteNav's menu button can sit at the start of the header, and a TabLink can be marked current whatever the URL. The docs site gets an MCP server for AI assistants.
Changed (check when you update)
Razor takes an old parameter name silently, so search your project for each of these.
- Surface colors (C# and CSS variables; a custom theme that sets the variables must rename them too):
Color.SurfaceRaised→Color.SurfaceOverlay;--ib-color-surface-raised→--ib-color-surface-overlay;--ib-color-raised-border→--ib-color-overlay-borderColor.SurfaceContainerLow→Color.FillSubtle;--ib-color-surface-container-low→--ib-color-fill-subtleColor.SurfaceContainer→Color.Fill;--ib-color-surface-container→--ib-color-fillColor.SurfaceContainerHigh→Color.FillStrong;--ib-color-surface-container-high→--ib-color-fill-strong
SiteNav.MenuButtonAtEndis replaced byMenuButtonPosition:MenuButtonAtEnd="false"is nowMenuButtonPosition="MenuButtonPosition.InPlace"; the default,End, is unchanged.
New
SiteNav.MenuButtonPosition:End(the default),Start, before the brand, to match pages whose header starts with aSidebarToggle, orInPlace, where the links are. Start and End move the button visually, so Tab still reaches it where the SiteNav is written.TabLink.Currentmarks a tab current (true) or not (false) whatever the URL, for a choice the page knows from elsewhere, such as a cookie. When one tab is set current, the tabs that follow the URL are unmarked; it rendersaria-current="true", and a disabled tab is never current.
@* The billing period comes from a cookie, so the address can't tell which tab is current. *@
<Tabs Label="Billing" Variant="TabsVariant.Segmented">
<TabLink Href="pricing?billing=monthly" Label="Monthly" Current="@(Billing == "monthly")" />
<TabLink Href="pricing?billing=yearly" Label="Yearly" Current="@(Billing == "yearly")" />
</Tabs>Layout
- Stepper on phones: below 640px a horizontal stepper is a row of markers with only the current step's label, instead of a column; a finished step with an
Hrefis still a link on its marker, with the focus ring there.Orientation.Verticalis unchanged. - AppSidebar: a collapsible sidebar's labels stay on one line from its breakpoint up, so they don't wrap while the width animates; a label too long for the sidebar ends in an ellipsis.
- AppShell Inset: beside a sidebar (from its breakpoint up) the main panel has no gap of its own on that side, so an icon rail sits centered in its column.
Docs site
- An MCP server at
https://izzyblazor.com/mcp,/llms.txt, and an "AI assistants" article in Get started: search, components, types, examples and articles for coding assistants. - The Off · Static · Live switch uses the library's segmented link Tabs; the home page's menu button is on the left, as on the other pages.
- Demos: Release notes redesigned; Checkout, Inbox with undo, Profile card, Collapsed from C# and Editor toolbar fixed at phone width; the IzzyTheme presets each describe their preset; the Box Surfaces example shows each color where it's used.
robots.txtandsitemap.xmlanswer HEAD.
Full Changelog: v0.1.0-alpha.15...v0.1.0-alpha.16
v0.1.0-alpha.15
Highlight marks the words of a search in text, and Heading.SlugOf gives the id a heading gets, both built for the new search on izzyblazor.com. The docs site also gets search (Ctrl+K), a sitemap and canonical links for search engines.
New
Highlightshows text with each word of a query in amark, for search results, a filtered list or a table filtered by aFilterForm. A word matches at the start of a word, the humps of a PascalCase name included ("field" marks the "Field" of "TextField"), or anywhere withMatch="HighlightMatch.Anywhere"; case is ignored and touching matches are marked as one.Highlight.Findgives the ranges for your own markup. It works the same in every mode.
<Highlight Text="@product.Name" Query="@Query" />
<Highlight Text="@product.Description" Query="@Query" Match="HighlightMatch.Anywhere" />Heading.SlugOf(text)returns the id a heading with that text gets once anOnThisPagelists it ("Rows & columns" is "rows-columns"), for linking to a section from another page.
Docs site
- Search: the header's Search button or Ctrl+K opens results as you type, across components, parameters, articles, sections and demos;
/searchworks with JavaScript off. - Off pages read the production stylesheet's no-script rules again (the minified
@media (scripting: none)rules were dropped, so the Slider's fill and the Alert's close buttons were wrong in Off mode). robots.txt,sitemap.xml, a canonical link on every page (without?mode=and other queries), Open Graph titles, descriptions and addresses, and shorter descriptions.
Full Changelog: v0.1.0-alpha.14...v0.1.0-alpha.15
v0.1.0-alpha.14
Toggle buttons and a Toolbar that drops its labels before anything moves into its menu. Also: enhanced navigation no longer flashes the old page from its top, a few accessibility fixes, and the documentation now lives only on izzyblazor.com.
New
PressedonButtonandIconButtonmakes a toggle button, such as Bold: screen readers hear "pressed" or "not pressed" (aria-pressed), and pressed it shows a tint and an edge in the accent's text color. With@bind-Pressed(PressedChanged) a click toggles it beforeOnClickon interactive pages; on static pages set it from the server's state and post the change withSubmit,NameandValue. A link can't be pressed:PressedwithHrefthrows.- In a
Toolbar's "…" menu a toggle is a checkbox item (menuitemcheckbox) that toggles the same. Toolbar CollapseLabels: before anything moves into the "…" menu,ToolbarButtons with aStartIcon(in aToolbarButtonGrouptoo) show only their icon, andToolbarMenus with one keep their icon and chevron, all at once; items then move into the menu as before. The text stays for screen readers and, with script, is the tooltip. An item withOverflow="ToolbarOverflow.Never"keeps its text. It works with JavaScript off: the server adds one container query for it.
<Toolbar Label="Insert" CollapseLabels>
<ToolbarButton StartIcon="Lucide.Heading">Heading</ToolbarButton>
<ToolbarButton StartIcon="Lucide.List">List</ToolbarButton>
<ToolbarIconButton Icon="Lucide.Bold" Label="Bold" @bind-Pressed="_bold" />
<ToolbarButton StartIcon="Lucide.Send" Position="ToolbarPosition.End" Overflow="ToolbarOverflow.Never">Publish</ToolbarButton>
</Toolbar>AppShellContextcarries the shell'sScrollMode.
Changed (check when you update)
- With
ShellScroll.Main,AppMainis a tab stop (tabindex="0", was-1), so a main area that scrolls on its own can be scrolled from the keyboard when nothing in it takes focus. It shows a focus ring when the keyboard reaches it. WithShellScroll.Pagenothing changes. - A tab's error count reads "Billing (1 error)" (was "Billing, 1 error", which Chrome read as "Billing , 1 error").
- A selectable
Table's checkbox column has a hidden "Select" heading (SelectRowLabel) while select-all is hidden with no script; once the script runs, the select-all checkbox names the column as before. ColorPickerwithShowHex="false"is a square swatch, with or without script, instead of a full-width box with an empty stretch.docs/getting-started.md,docs/styling.mdanddocs/components.mdare gone from the repository: the same documentation, kept up to date, is on izzyblazor.com.
Fixed
- Enhanced navigation no longer shows the old page from its top while the next one loads. Since .NET 10, Blazor scrolls to the top as soon as a link to another page is followed, before the response arrives (dotnet/aspnetcore#64015); IzzyBlazor's script keeps the page where it is and goes to the top (or the link's
#fragment) once the new page is in. Interactive routing andNavigationManager.NavigateToare unchanged.
Full Changelog: v0.1.0-alpha.13...v0.1.0-alpha.14
v0.1.0-alpha.13
A 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...
v0.1.0-alpha.12
What a documentation site needs: an "On this page" outline built on the server, headings you can link to, code blocks with titles, line numbers and highlighted lines, live examples with their source, previous and next links, and a copy button for any text. The sidebar gets a panel mode for small screens and shows the brand in its drawer, and a dismissed Banner now stays dismissed for the session. Nothing was renamed or removed.
Changed (check when you update)
- A
DismissibleBanneris remembered for the browser session by default. Closing it writes a session cookie, and later pages leave it out until the browser closes. Before, only a banner with aRememberKeywas remembered. Without aRememberKey, the key comes from the banner'sTitle, text and links, so a changed message shows again by itself, and banners with the same words and links share a dismissal. A banner whose text comes from a component of your own (a localizer) is remembered only with aRememberKey.Remember="DismissMemory.None"turns this off. RememberKeyalone now means the session, not a year. AddRemember="DismissMemory.Persistent"to keep the old year-long cookie.- The page's scrollbar is no longer themed by default under
AppShell. Styled scrollbars never fade, and on Windows they replace the system's overlay scrollbars.IzzyTheme Scrollbars="ThemeScrollbars.Themed"(or.ib-scrollbarson<html>) brings the themed one back. A page-scrolling shell now setsscrollbar-gutter: stable, so opening the drawer no longer shifts the header; with classic scrollbars, a short page shows an empty strip where the scrollbar goes. - Menus are at least 15rem wide (were 10rem), submenus too, never wider than the window less 1rem. A submenu with no room beside its item (a phone) opens below it, over the menu. A
MenuItem'sShortcutis drawn in a key cap (<kbd>) 24px from the label, with ⌘ ⌥ ⇧ ⌃ drawn as icons. Icons sit 10px from the label. - Vertical
NavItemtitles wrap instead of being cut short with an ellipsis. Horizontal menus stay on one line. - Headings get ids on a page with an
OnThisPage. AHeadinginAppMaingets anidslugged from its text ("Rows & columns" becomesrows-columns, a repeat-2) unless it sets one, and the levels the outline lists become links to themselves. Pages without anOnThisPagerender headings as before. - A click anywhere on a
CheckboxorSwitchrow toggles it, the hint included. A plain row is now only as wide as its label and hint, so blank space beside it doesn't toggle it; aControlPosition.Endrow is the full width. AppSidebar's drawer shows the shell'sAppBrandin its top row when the sidebar has noSidebarHeader, so it never opens on an empty bar. Add aSidebarHeaderto show something else.- A
Codeblock withLineNumbersorHighlightLinesrenders each line as its own element (amarkwhen highlighted). With aTitle, the language label gives way to a header row. - With JavaScript, the sidebar scrolls the current link into view when a page opens, and
AppShellturns off its transitions while the window is resized (crossing the breakpoint no longer slides the drawer out).
New
OnThisPage: the page's outline, forAppAside. EachHeadinginAppMainadds itself while the page renders, so the list is in the first response, with JavaScript off.MinLevelandMaxLevel(2 and 3) set the levels,Titlethe heading ("On this page"). With JavaScript it marks the section in view and adds headings from raw HTML (Prose, rendered Markdown). Headings in aCodeExample, a dialog or a popover aren't listed.Heading:Outline="false"leaves a heading out;Anchor="true"or"false"turns its self-link on or off. A heading that holds a link or button of its own never gets one.Code:Title(a file name in a header row),LineNumbers(not selected or copied), andHighlightLines="3-5,9", drawn on the server.CodeExample: a live example over its source, colored on the server with a copy button.CodeExampleFileparts become tabs over the source;Collapsiblehides it behind "Show code" (SourceOpenopens it). AlsoCode,Language,Title,HighlightLines,LineNumbers,MaxHeight,Center,ShowCodeText,HideCodeText,FilesLabel, and the--ib-example-paddingand--ib-example-bgvariables.CopyButton: copiesText, or the value or text of the element named byFor, and shows a check and "Copied" (CopiedLabel). An icon button named "Copy" (Label) unless it has content; it fits a field'sEndAddon. Needs JavaScript, so it appears only when the script runs.PrevNext: previous and next links for the end of an article (PreviousHref,PreviousTitle,NextHref,NextTitle,PreviousText,NextText,Label), side by side when there's room.BadgeVariant.Plain: a badge's text in its color with no fill or border, for counts.NavItem BadgeVariantpasses it to the item's badge.AppSidebar SmallScreen="SidebarSmallScreen.Panel": below the breakpoint the sidebar opens under the header, full width, andSidebarToggleturns into its close button; works with JavaScript off.SidebarToggle CloseLabelnames that button ("Close menu").IzzyTheme Scrollbars(ThemeScrollbars.Auto,Themed,Native), and the.ib-scrollbars-nativeclass.Banner Remember(DismissMemory.Session,Persistent,None).IzzyText:OnThisPage,PrevNextNavigation,Previous,Next,Copy,ShowCode,HideCode,SourceFiles.
Fixed
- The skip link,
SidebarToggleand the drawer's close and backdrop links went to the home page from any other page under<base href>(with JavaScript off; the skip link even with it). They now keep the page's path and query. - SiteNav's phone menu focuses its first link (it focused the hidden backdrop).
Full Changelog: v0.1.0-alpha.11...v0.1.0-alpha.12
v0.1.0-alpha.11
Every component with regions is now put together from parts, as Card was in alpha.10: write the parts among the content (DialogFooter, SidebarHeader, BannerActions…) and leave out the <ChildContent> wrapper. Content outside the parts is the body; an optional body part (DialogBody, SidebarBody) gives it layout props. Buttons follow one rule: Href makes it a link, so LinkButton is gone. HeaderNav is now SiteNav, and its phone menu opens under the header. Checkboxes, switches and fieldsets take an icon.
Changed (check when you update)
LinkButtonis replaced byButtonwithHref. AButtonwithHrefis a link (a) and keeps everythingLinkButtonhad:External,HideExternalIcon,NewTabLabel, and nohrefwhileDisabledorLoading. A link throws if it's also givenSubmit,Reset,Name,Value,FormorFormAction;DialogTriggerandDialogClosecan't takeHref.IconButtonwithHreflikewise throws withSubmitorReset, and now runsOnClick.Dialog:Headeris replaced byDialogHeader, andFooterandDialogActionsbyDialogFooter.DialogFooteris drawn where it's written, so write it last: last in the dialog, or last in a form that's last in the dialog, where its submit button submits the form with noForm="id". It reaches the dialog's edges (followingContentPadding) and stays in view while the body scrolls. To keep it at the bottom of a side drawer when the content is short, put the content in aDialogBody.AppSidebar:HeaderandFooterare replaced bySidebarHeaderandSidebarFooter. In the drawer, theSidebarHeaderrow is now the top bar, with the close button in it, instead of a close bar followed by the header as a second row.Alert'sActionsis replaced byAlertActions, written last in the alert;Banner's byBannerActions;EmptyState's byEmptyStateActions.AccordionItem'sHeaderis replaced byAccordionHeader(an item no longer throws without aTitle: give it aTitleor anAccordionHeader, since that's its name).HeaderNavis nowSiteNav. Below its breakpoint the menu button opens the links in a panel under the header, which stays in view with the site's name, and the same button closes it. The sheet's own top bar, its close button andPanelHeaderare gone (withCloseLabel);PanelFooterisSiteNavFooter, written among the links. The button's name is now "Menu" (IzzyText.Menu). CSS classes and the element areib-site-nav…(wereib-header-nav…). In a shell with a sidebar, aSiteNavFooterdoesn't move into the sidebar: useSidebarFooter.- The old names fail loudly for one release.
<LinkButton>,<DialogActions>,<HeaderNav>and the old slots written as attributes (Footer="@...") are build errors (CS0619) naming the replacement. The old slots written as child elements (<Footer>in aDialog,<Header>in anAppSidebarorAccordionItem,<Actions>in anAlert,BannerorEmptyState) throw when the component renders, naming the part to use, or fail to build with RZ9996 when written beside loose content. Search for<Header>,<Footer>,<Actions>,PanelHeaderandPanelFooterrather than waiting for a page to throw. CardPart, the public base of Card's parts, is replaced byComponentPart, shared by every part a component draws in its own place.- In the collapsed sidebar rail, an
AppBrand's name now hides by itself (it still shows in the drawer and the full sidebar), so a brand there needs noHideLabel.
New
DialogBody: the dialog's body withStack's layout props. It fills the dialog, so aDialogFooterafter it sits at the bottom of a side drawer;Flushruns it to the sides.SidebarBody: the sidebar's scrolling content with layout props.IcononCheckbox,SwitchandFieldset: a row icon before the label (withControlPosition.End, a column at the start centered on the label and hint), or a section icon at the start of a fieldset's heading. Decorative. Put icons on rows or on sections, not both.DialogFooterandAlertActionstakeRow's layout props (Justifymoves the buttons; a dialog's are at the end by default).Selectshows the chosen text as a tooltip, so a value cut short can be read on hover.
Fixed
- A collapsed full-height sidebar's header content is centered in its row beside an
AppHeader(it sat at the top). - Opening the sidebar drawer focuses its close button.
- A card part swapped in with
@if/elsekept showing its first content when it changed later.
Full Changelog: v0.1.0-alpha.10...v0.1.0-alpha.11
v0.1.0-alpha.9
Buttons submit with a bare Submit: <Button Submit>Save</Button>. One rename.
Changed (check when you update)
Type="ButtonType..."onButton,IconButtonandMenuItemis replaced bySubmit, orReseton buttons. Write<Button Submit>for<Button Type="ButtonType.Submit">,<Button Reset>forButtonType.Reset, and dropType="ButtonType.Button"(a button that does nothing by itself is still the default). Setting bothSubmitandResetthrows.- Old markup fails to build.
TypeandButtonTypestay for this release, marked obsolete as errors, so every old use stops the build with error CS0619 and a message pointing toSubmit. (Without them, Razor would takeType="ButtonType.Button"as a plain HTML attribute, and the browser would treat that button as a submit button.) They'll be removed in a later release. - This also ends a false "Wrong attribute value" warning in Rider and ReSharper, which checked
<Button Type="...">against HTML's<button type>.
Fixed
<DialogClose Reset>threw "can't set both Submit and Reset" (aDialogClosesubmits its close form by default); it now resets the form instead.- The error for setting both
SubmitandResetnames the component used (DialogTrigger,DialogClose), notButton, and is raised while the button is loading too.
Full Changelog: v0.1.0-alpha.8...v0.1.0-alpha.9