These components build the frame of a page. All of them render their markup on the server and work under static
SSR; only OsirionPageLayout loads a small script, for the header that hides on scroll and for skip-link focus.
| Component | What it renders |
|---|---|
| OsirionPageLayout | header, main and footer with a sticky footer, a header that hides while scrolling down, and (from 4.0) a skip link. |
| OsirionFooter | Site footer with link columns, social links, copyright and legal links. |
| OsirionStickySidebar | An aside that stays in view and scrolls on its own, for a table of contents or docs navigation. |
| OsirionPageLoading | A centered CSS spinner with optional text. |
| OsirionBackgroundPattern | A decorative CSS pattern layer behind a section. |
A typical main layout
@inherits LayoutComponentBase
@using Osirion.Blazor.Components
<OsirionPageLayout>
<Header>
<NavMenu />
</Header>
<Body>
@Body
</Body>
<Footer>
<OsirionFooter CompanyName="Example Ltd" />
</Footer>
</OsirionPageLayout>
OsirionPageLayout needs builder.Services.AddJSComponents() in Program.cs for its script. From 4.0, an
OsirionFooter inside the Footer slot renders a div, so the page has one footer landmark.
Related
Related Articles
