Stratton.Cologne

Appearance

Toolbar ​

Flexible Toolbar mit Buttons, Custom‑Components und Spacern.

vue
<script setup lang="ts">
import { Toolbar, Icon } from '@stratton-cologne/ui'

const items = [
  { type: 'button', key: 'save', label: 'Speichern' },
  { type: 'spacer' },
  { type: 'button', key: 'delete', label: 'Löschen' }
]

function onAction(key: string) {
  console.log('action', key)
}
</script>

<template>
  <Toolbar :items="items" @action="onAction" />
</template>

Props ​

  • items: Linke Zone – Array von Items.
  • rightItems: Rechte Zone – Array von Items.
  • ariaLabel: A11y-Beschriftung (Default: „Toolbar“).
  • id / instance: Stabile Root-ID und data-instance.

Item-Typen ​

  • Button: { kind:'button', key, label, title?, disabled?, icon?, iconProps? }
    • Icon ist eine Komponente: wird via <component :is="it.icon" /> gerendert
  • Component: { kind:'component', key, is, props?, on?, class? }
  • Spacer: { kind:'spacer', key, grow? } – grow: true als Flex-Füller

Events ​

  • action(key)

Slots ​

  • item, right-item: Überschreiben einzelner Items mit { item, emitAction }

Styling (data-Attribute) ​

  • Root: [data-component="sc-toolbar"]
  • Zonen: .sc-toolbar__zone.sc-toolbar__left und .sc-toolbar__right
  • Button/Label/Icon: .sc-toolbar__btn, .sc-toolbar__label, .sc-toolbar__icon