Width and scrolling

A reading column, and a shell that fills the window and scrolls only its main area.

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

Properties (2)

ScrollModeShellScroll = ShellScroll.Page

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

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.

Parts (3)

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

`AppHeader`

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

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.

Plus 4 common props.

`AppMain`

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

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.

Plus 4 common props.

`AppFooter`

The bottom bar of an AppShell.

ContentWidthLength?

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

Plus 4 common props.

Types (2)

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