Asides

A column beside the main area: an outline, a page's own panel, and a drawer people open.

The members for asides, and the types they use. Every member of IzzyBlazor.AppShell is on the AppShell API.

Parts (2)

Components written inside AppShell, and the columns' members, which PropertyColumn and TemplateColumn share.

`AppAside`

An optional side column of an AppShell, on the side opposite the sidebar: an outline, or a panel about what the main area shows, such as the selected row's details. Its content stays in view while the page scrolls, and scrolls on its own when it's taller.

WidthLength = 15rem

The width, such as Length.Px(420) for a detail panel. Defaults to 15rem.

BreakpointBreakpoint = Breakpoint.Lg

Shown beside the main area from this breakpoint up. Defaults to Breakpoint.Lg.

SmallScreenAsideSmallScreen = AsideSmallScreen.HiddenAdded in 0.1.0-alpha.20

What it does below Breakpoint: AsideSmallScreen.Hidden (the default) hides it, AsideSmallScreen.Below puts it after the main area, full width, and AsideSmallScreen.Drawer makes it a drawer opened by an AsideToggle. All three work with JavaScript off.

PaddingResponsive<int> (computed)ResponsiveAdded in 0.1.0-alpha.20

The space inside, on the spacing scale, per breakpoint if you like: new() { Base = 4, Md = 6 }. Defaults to 4 (1rem).

Labelstring?Added in 0.1.0-alpha.20

The landmark's name for screen readers, such as "Details". Set it when the page has another aside, or when what's in it isn't clear from its first words.

Idstring? = ib-asideAdded in 0.1.0-alpha.20

The element id, which AsideToggle and links to the panel point at (an id attribute sets it too). Defaults to ib-aside.

CloseLabelstring? = "Close panel"Added in 0.1.0-alpha.20

The drawer's close button name (AsideSmallScreen.Drawer). Defaults to "Close panel".

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.

`AsideToggle`

The button that opens an AppAside drawer (SmallScreen="AsideSmallScreen.Drawer") below the aside's breakpoint. It shows only while the shell has such a drawer and the window is narrower than the aside's breakpoint, so it can sit in the header, or in the page, on every page. It is a link to the aside'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), as SidebarToggle does.

Labelstring? (computed)Added in 0.1.0-alpha.20

The accessible name. Defaults to "Open panel"; name what it holds when you can, such as "Show details".

Forstring = "ib-aside"Added in 0.1.0-alpha.20

The aside to open. Defaults to ib-aside, AppAside's default.

VariantButtonVariant = ButtonVariant.GhostAdded in 0.1.0-alpha.20

Visual weight. Defaults to ghost.

Plus 16 item props and 4 common props.

Types (6)

`AsideSmallScreen`

enum

What an AppAside does below its breakpoint.

AsideSmallScreen values
Value	Description
`Hidden`	It isn't shown (the default): for an outline whose links the page doesn't need on a phone.
`Below`	It goes after the main area, full width and as tall as its content, and scrolls with the page: for a panel about what the main area shows, such as the selected row's details.
`Drawer`	A drawer that slides in from the end side over the page, opened by an `AsideToggle` or a link to the aside's id, and closed by default: for a panel people open when they want it.

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

`ButtonVariant`

enum

A button's visual weight, from strongest to quietest.

ButtonVariant values
Value	Description
`Solid`	Filled with the accent color. For the main action.
`Soft`	A light tint of the accent color.
`Outline`	An accent-colored border on a transparent background.
`Ghost`	Transparent until hovered. For toolbars and dense layouts.
`Link`	Looks like a link.

`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.
`SurfaceSunken`	An area set into a surface that holds surfaces of its own, such as a board's columns or a tray of cards: below `Surface` in both modes, so the cards on it lift. Like `FillSubtle` in light mode; below the page in dark 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 with no backdrop: menus, popovers, 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.