AppShell

Header, sidebar, main area, aside and footer, arranged by CSS.

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

Properties (6)

ChildContentRenderFragment?

The parts: AppHeader, AppSidebar, AppMain, AppAside, AppFooter.

ScrollModeShellScroll = ShellScroll.Page

What scrolls: the whole page (ShellScroll.Page, the default) or only the main area inside a window-filling frame (ShellScroll.Main).

VariantShellVariant = ShellVariant.Tinted

How the parts are layered: ShellVariant.Tinted (the default) tints the sidebar, ShellVariant.Inset raises the main area as a panel in a tinted frame, ShellVariant.Flat is all surface, ShellVariant.Canvas tints the main area.

Dividersbool = true

Lines between the parts. Defaults to true; set false when the parts' colors separate them, or for one flat surface.

ContentWidthLength?

Centers the content of the header, main area and footer at this width, such as Length.Rem(48) for a reading site, so their edges line up; the bars and their lines stay full width. Each part's own ContentWidth overrides it (a wider header over a narrow article, say). Unset by default: content fills the parts.

MainIdstring = "ib-main"

The main area's id, which the skip link targets. Defaults to ib-main.

Common props (from IzzyComponentBase)

Classstring?

Extra CSS classes, merged after the component's own classes.

Stylestring?

Inline style, appended after the component's generated custom properties.

HiddenFromBreakpoint?

Hides the component from this breakpoint up, such as a menu button only phones need.

VisibleFromBreakpoint?

Shows the component only from this breakpoint up, such as header links for wide screens.

Events (0)

No events.

Parts (5)

Components written inside AppShell, documented here with it.

`AppHeader`

The top bar of an AppShell: brand, SidebarToggle, actions.

PositionBarPosition = BarPosition.Sticky

Whether it stays at the top while the page scrolls. Defaults to BarPosition.Sticky.

ContentWidthLength?

The width the header's content is centered at, such as Length.Rem(64); the bar itself stays full width. Overrides the shell's ContentWidth.

BgColor? = Color.Surface

The background, such as Color.Fill. Text switches to the color's on- partner when it has one. Defaults to Color.Surface.

ColorSchemeColorScheme = ColorScheme.Auto

The color scheme of this part: ColorScheme.Dark for a dark sidebar or header in a light app, ColorScheme.Inverse for the opposite of the page. Everything inside, including its menus, follows it. Defaults to the page's scheme.

ChildContentRenderFragment?

The content.

Plus 4 common props.

`AppBrand`

The app or site name in an AppHeader (or a sidebar'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's buttons off.

Labelstring required

The name, shown and used as the link's name.

Hrefstring?

Where it links, usually "/". Unset: plain text, not a link.

IconIconData?

An icon before the name, in the accent color.

LogoRenderFragment?

A logo before the name, such as an img or inline SVG; takes the place of Icon.

HideLabelbool = false

Shows only the icon or logo, keeping the name for screen readers: for a logo that already spells the name.

Plus 16 item props and 4 common props.

`AppMain`

The main content of an AppShell, usually @Body. The skip link targets it.

Idstring? (computed)

The element id. Defaults to the shell's MainId; inside a shell, set it there instead (a different one throws), so the skip link keeps pointing here.

ContentWidthLength?

The width the content is centered at, such as Length.Prose, with at least the page gutter at the sides. Overrides the shell's ContentWidth. A Section inside still spans the whole main area.

BgColor? = Color.Surface

The background, such as Color.Fill. Text switches to the color's on- partner when it has one. Defaults to Color.Surface.

ColorSchemeColorScheme = ColorScheme.Auto

ChildContentRenderFragment?

The content.

Plus 4 common props.

`AppAside`

An optional side column of an AppShell, such as a table of contents, on the side opposite the sidebar. Its content stays in view while the page scrolls.

WidthLength = 15rem

The width. Defaults to 15rem.

BreakpointBreakpoint = Breakpoint.Lg

Shown from this breakpoint up. Defaults to Breakpoint.Lg.

BgColor? = Color.Surface

The background, such as Color.Fill. Text switches to the color's on- partner when it has one. Defaults to Color.Surface.

ColorSchemeColorScheme = ColorScheme.Auto

ChildContentRenderFragment?

The content.

Plus 4 common props.

`AppFooter`

The bottom bar of an AppShell.

PositionBarPosition = BarPosition.Static

Whether it stays at the bottom while the page scrolls. Defaults to BarPosition.Static.

ContentWidthLength?

The width the footer's content is centered at; the bar itself stays full width. Overrides the shell's ContentWidth.

BgColor? = Color.Surface

The background, such as Color.Fill. Text switches to the color's on- partner when it has one. Defaults to Color.Surface.

ColorSchemeColorScheme = ColorScheme.Auto

ChildContentRenderFragment?

The content.

Plus 4 common props.

Types (7)

`BarPosition`

enum

Whether an AppShell header or footer scrolls with the page.

BarPosition values
Value	Description
`Static`	Scrolls away with the page.
`Sticky`	Stays in view: the header at the top, the footer at the bottom.

`Breakpoint`

enum

The responsive breakpoints. Mobile first: a value at a breakpoint applies from that width upward.

Breakpoint values
Value	Description
`Sm`	640px and wider.
`Md`	768px and wider.
`Lg`	1024px and wider.
`Xl`	1280px and wider.

`Color`

struct

A color: one of the theme's tokens (so it follows light and dark mode), a custom token from your own theme, or a raw CSS color.

Color members
Member	Description
`Primary`	Brand color.
`OnPrimary`	Text and icons on `Primary`.
`Success`	Success.
`OnSuccess`	Text and icons on `Success`.
`Warning`	Warning.
`OnWarning`	Text and icons on `Warning`.
`Danger`	Danger.
`OnDanger`	Text and icons on `Danger`.
`Info`	Informational.
`OnInfo`	Text and icons on `Info`.
`Neutral`	Neutral accent.
`OnNeutral`	Text and icons on `Neutral`.
`Background`	The page, behind the surfaces: a near-white in the default theme.
`Surface`	Cards, tables, fields and bars: white in light mode.
`FillSubtle`	The quietest fill inside a surface, for large areas: a filled card, a panel, a band.
`Fill`	A fill inside a surface that must show at small sizes: table heads, code, wells.
`FillStrong`	The strongest fill: selected and pressed states, chips, tracks, skeletons.
`SurfaceOverlay`	Overlays that float above the page: menus, popovers, dialogs, toasts. White like `Surface` in light mode, where a shadow sets it apart; a step lighter in dark mode.
`OnSurface`	Text on any surface.
`Muted`	Secondary text on any surface: descriptions, metadata.
`Subtle`	Tertiary text: captions, hints, placeholders. Still at least 4.5:1 on Surface and Fill.
`Disabled`	Text of disabled controls. Deliberately low contrast.
`PrimaryText`	`Primary` tuned for text and links on surfaces (at least 4.5:1).
`SuccessText`	`Success` tuned for text on surfaces (at least 4.5:1).
`WarningText`	`Warning` tuned for text on surfaces (at least 4.5:1).
`DangerText`	`Danger` tuned for text on surfaces (at least 4.5:1).
`InfoText`	`Info` tuned for text on surfaces (at least 4.5:1).
`PrimarySoft`	The accent's soft tint: soft buttons, the current page, chips. Text on it: `PrimaryText`.
`SuccessSoft`	`Success`'s soft tint, behind a success message. Text on it: `SuccessText`.
`WarningSoft`	`Warning`'s soft tint. Text on it: `WarningText`.
`DangerSoft`	`Danger`'s soft tint. Text on it: `DangerText`.
`InfoSoft`	`Info`'s soft tint. Text on it: `InfoText`.
`Focus`	The focus ring and field halo color: `--ib-color-focus`, the primary color unless the theme sets it.
`Border`	Borders and dividers. Decorative: too light to be the only edge of a control.
`Outline`	The edge of a control, such as an input or switch track: about 2:1 against `Surface`, darker than `Border` so an empty field reads as a box.
`Transparent`	Fully transparent.
`CurrentColor`	The current text color.
`Token(string name)`	A theme token by name, rendered as `var(--ib-color-{name})`. Use it for tokens your own theme adds.
`Of(string css)`	A raw CSS color such as `#ff6600` or `oklch(70% 0.1 250)`. Checked for unsafe characters.
`Css string`	The CSS value this color renders as.
`TokenName string?`	The theme token name, such as `primary`, or `null` for a raw color.
`ContrastText Color?`	The text color that pairs with this color used as a background: `OnPrimary` for `Primary`, `OnSurface` for the surfaces, `on-{name}` for a custom token (which falls back to the inherited color when the theme does not define it). `null` for raw colors and for colors that are already text colors.

`ColorScheme`

enum

Light, dark, or automatic. For the app (ColorScheme, the user's pick in a ColorSchemeSwitch), ColorScheme.Auto follows the device. For part of a page (ColorScheme on Box and the App layout parts), ColorScheme.Auto follows the page, and ColorScheme.Inverse is the opposite of it. Every color token switches with the scheme, so links, buttons, badges, fields and focus rings inside keep their contrast.

ColorScheme values
Value	Description
`Auto`	Follow the device for the app, or the page for part of it (the default).
`Light`	Always light.
`Dark`	Always dark, such as a dark sidebar in a light app.
`Inverse`	For part of a page: the opposite of the page, dark on a light page and light on a dark one.

`Length`

struct

A width, height or flex basis: a size token, a keyword, or a CSS length built with a factory such as Rem.

Length members
Member	Description
`Sm`	640px (matches the `sm` breakpoint).
`Md`	768px (matches the `md` breakpoint).
`Lg`	1024px (matches the `lg` breakpoint).
`Xl`	1280px (matches the `xl` breakpoint).
`Prose`	A comfortable reading width, 68 characters.
`Full`	100% of the containing block.
`Auto`	`auto`.
`FitContent`	`fit-content`: as wide as the content, up to the available space.
`MinContent`	`min-content`.
`MaxContent`	`max-content`.
`Px(double value)`	Pixels.
`Rem(double value)`	Root ems (16px each by default).
`Percent(double value)`	Percent of the containing block.
`Ch(double value)`	Character widths, for text measures.
`Vw(double value)`	Percent of the viewport width.
`Dvh(double value)`	Percent of the dynamic viewport height (accounts for mobile browser bars).
`Of(string css)`	Any CSS length, such as `calc(100% - 2rem)`. Checked for unsafe characters.
`Css string`	The CSS value this length renders as.

`ShellScroll`

enum

What scrolls in an AppShell.

ShellScroll values
Value	Description
`Page`	The 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.
`Main`	The 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.

`ShellVariant`

enum

How an AppShell layers its parts. Content is the brightest layer by default and the frame recedes into the page tint (--ib-color-background). A part's own Bg always wins.

ShellVariant values
Value	Description
`Tinted`	The 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.
`Inset`	The 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.
`Flat`	Every part is a surface; lines alone separate them.
`Canvas`	The main area takes the page tint and the frame is surfaces: for dashboards whose content is all cards. Put content in `Card`s; fills placed straight on the tint read as holes.