Components

Layout

Structure pages with header and pane content containers.

UiHeaderContent renders a page header (title, subtitle, optional back button and actions); UiPaneContent is a content container with a row/column layout.

Add a page header

<template>
  <UiHeaderContent
    title="Projects"
    subtitle="Manage your team's work"
    actions
    back-button
    @click="goBack"
  >
    <template #actions>
      <UiButton variant="filled" color="primary" text="New" />
    </template>
  </UiHeaderContent>
</template>

Wrap content in a pane

<template>
  <UiPaneContent is-full-height aria-label="Project list">
    <!-- content -->
  </UiPaneContent>
</template>

UiHeaderContent props

Prop	Type	Default	Description
`title`	`string \| null`	—	Header title.
`subtitle`	`string \| null`	—	Header subtitle.
`actions`	`boolean`	`false`	Show the `#actions` slot.
`hideActionsOnMobile`	`boolean`	`true`	Hide actions on small screens.
`backButton`	`boolean`	`false`	Show a back button.
`backButtonLabel`	`string`	`'Go back'`	Back button tooltip.
`containerClass`	`string \| string[]`	—	Extra classes.

Emits: click (back button). Slots: #actions.

UiPaneContent props

Prop	Type	Default	Description
`isFullHeight`	`boolean`	`false`	Expand to full height.
`customClass` / `containerClass`	`string \| string[] \| null`	—	Extra classes.
`ariaLabel` / `ariaLabelledby` / `ariaDescribedby`	`string`	—	ARIA wiring.

Edit this pageorReport an issue

Inputs

Collect user input with text, select, checkbox, radio, range, file, and color inputs.

List

Display grouped items with UiListGroup and UiListItem.