ActionRail

Floating glass toolbar of icon buttons with separators; the active one is highlighted. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

import { UiActionRail } from '@ziyarago/ui/vue'

Toolbar

Vue

<UiActionRail
  value="select"
  :items="[{ value: 'select', icon: 'mouse-pointer', label: 'Select' }, { value: 'draw', icon: 'pen-line', label: 'Draw' }, { separator: true }, { value: 'zoom-in', icon: 'zoom-in', label: 'Zoom in' }, { value: 'zoom-out', icon: 'zoom-out', label: 'Zoom out' }]"
 />

Sizes

Vue

<UiActionRail
  value="select"
  :items="[{ value: 'select', icon: 'mouse-pointer', label: 'Select' }, { value: 'draw', icon: 'pen-line', label: 'Draw' }, { separator: true }, { value: 'zoom-in', icon: 'zoom-in', label: 'Zoom in' }]"
  size="xs"
 />

<UiActionRail
  value="select"
  :items="[{ value: 'select', icon: 'mouse-pointer', label: 'Select' }, { value: 'draw', icon: 'pen-line', label: 'Draw' }, { separator: true }, { value: 'zoom-in', icon: 'zoom-in', label: 'Zoom in' }]"
  size="sm"
 />

<UiActionRail
  value="select"
  :items="[{ value: 'select', icon: 'mouse-pointer', label: 'Select' }, { value: 'draw', icon: 'pen-line', label: 'Draw' }, { separator: true }, { value: 'zoom-in', icon: 'zoom-in', label: 'Zoom in' }]"
  size="md"
 />

<UiActionRail
  value="select"
  :items="[{ value: 'select', icon: 'mouse-pointer', label: 'Select' }, { value: 'draw', icon: 'pen-line', label: 'Draw' }, { separator: true }, { value: 'zoom-in', icon: 'zoom-in', label: 'Zoom in' }]"
  size="lg"
 />

<UiActionRail
  value="select"
  :items="[{ value: 'select', icon: 'mouse-pointer', label: 'Select' }, { value: 'draw', icon: 'pen-line', label: 'Draw' }, { separator: true }, { value: 'zoom-in', icon: 'zoom-in', label: 'Zoom in' }]"
  size="xl"
 />

API reference

Floating vertical or horizontal rail of icon buttons with a highlighted active item.

Props

PropType and valuesDefaultDescription

itemsrequired{ value?: string; icon?: string; label?: string; separator?: boolean }[]'[]'Rail entries. An item with separator: true renders a divider instead of a button.

valuestring—Value of the active item. Changed via the change event.

sizexssmmdlgxl'md'Button size inside the rail.

Events

Vue: @name. React: onName.

changeCalled with the value of the clicked item.

Notes

Items other than the active one are shown as ghost buttons; label is the accessible name.