Mixins / foldkit-mixins-ui

AppShell

namespace · packages/mixins-ui/src/appShell.ts:1

export * as AppShell from './appShell.js'

In the guides

Members

AppShell.AppShellSlots

const · packages/mixins-ui/src/appShell.ts:21

const AppShellSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly skip: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly header: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly brand: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly mark: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly title: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonl …;

An application's page frame: a skip link, a header bar, an optional side column, the main region and a footer. It places what it is given and owns nothing else, with no Model, no Messages and no Mount, so it draws the same on a server.

The side column takes a Sidebar's view, which brings its own navigation landmark, its collapse, and, below the theme's md breakpoint, its opener and Sheet. At that width the frame puts the column beside the header, where the opener belongs. The header's actions and status take components (Segmented, Badge, Avatar) rather than text.

Its landmarks are one of each: the header is the banner, main is the main region, which the skip link focuses, and the footer is the content info. The side column is a plain region, since a Sidebar inside it is the navigation.

AppShell.AppShellView

interface · packages/mixins-ui/src/appShell.ts:40

interface AppShellView<Message = never> {
  readonly title: string
  readonly brand?: Html | undefined
  readonly actions?: ReadonlyArray<Html> | undefined
  readonly status?: ReadonlyArray<Html> | undefined
  readonly side?: Html | undefined
  readonly footer?: ReadonlyArray<Html> | undefined
  readonly mainId?: string | undefined
  readonly words?: AppShellWords | undefined
  readonly style?: NamedStyle<typeof AppShellSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

AppShell.AppShellWords

interface · packages/mixins-ui/src/appShell.ts:35

interface AppShellWords {
  readonly skip?: string | undefined
}

AppShell.view

function · packages/mixins-ui/src/appShell.ts:61

function view<Message = never>(
  options: AppShellView<Message>,
  main: ReadonlyArray<Html>,
  h: HtmlBuilder<Message>,
): Html