layouts rail

layouts/rail

Import: import { RailLayout } from "@tundralibs/ui/layouts/rail"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

RailLayout

RailLayout(props: RailLayoutProps): Html

Icon rail + content; the rail becomes a bottom tab bar on phones.

Types

RailItem

Prop	Type	Required	Description
href	string	yes
label	string	yes	Accessible name — the rail shows only the icon.
icon	Html	yes
active	boolean

RailLayoutProps

Prop	Type	Required	Description
brand	`Html	string`
items	RailItem[]	yes
end	Html		Pinned to the rail's end (settings, avatar). Hidden on mobile.
header	Html
content	Html	yes
width	`"fluid"	"boxed"`
contentId	string
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

An icon rail that becomes a tab bar on phones

RailLayout({
  brand: "A",
  items: [
    { href: "/", label: "Home", icon: Icon("dashboard", { size: 20 }), active: true },
    { href: "/invoices", label: "Invoices", icon: Icon("invoice", { size: 20 }) },
    { href: "/settings", label: "Settings", icon: Icon("settings", { size: 20 }) },
  ],
  end: Avatar({ initials: "AL", size: "sm" }),
  content: html`<h1>Home</h1>`,
})

<div class="layout layout--rail">
  <div class="layout__body">
    <nav class="layout__rail" aria-label="Main">
      <span class="layout__rail-brand">A</span>
      <a class="layout__rail-link" href="/" aria-label="Home" title="Home" aria-current="page">
        <svg width="20" height="20" width="2" width="7" height="7" width="7" height="7" width="7" height="7" width="7" height="7" …>…</svg>
      </a>
      <a class="layout__rail-link" href="/invoices" aria-label="Invoices" title="Invoices">
        <svg width="20" height="20" width="2" …>…</svg>
      </a>
      <a class="layout__rail-link" href="/settings" aria-label="Settings" title="Settings">
        <svg width="20" height="20" width="2" …>…</svg>
      </a>
      <span class="layout__rail-end">
        <span class="avatar avatar--sm">AL</span>
      </span>
    </nav>
    <main class="layout__content" id="main-content">
      <h1>Home</h1>
    </main>
  </div>
</div>

CSS hooks

Classes defined by layouts/rail/rail.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.layout--rail, .layout__body, .layout__content, .layout__header, .layout__rail, .layout__rail-brand, .layout__rail-end, .layout__rail-link