TabTiles

Row of icon tiles that act as tabs, with an optional add button.

Jump to API reference

Import

Vue
import { UiTabTiles } from '@ziyarago/ui/vue'

Services

Vue
<UiTabTiles
  value="hotels"
  :items="[{ value: 'hotels', label: 'Hotels', icon: 'hotel' }, { value: 'flights', label: 'Flights', icon: 'plane' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'visa', label: 'Visa', icon: 'file-text' }]"
  addable
 />

API reference

Row of icon tiles that work as tabs, with an optional add button.

Props

PropType and valuesDefaultDescription
itemsrequired{ value: string; label: string; icon?: string }[][]Tiles. icon defaults to circle.
valuestring—Value of the active tile. Controlled; change it in the change handler.
addablebooleanfalseShows a trailing plus tile that fires the add event.

Events

Vue: @name. React: onName.

changeCalled with the value of the clicked tile.
addCalled when the plus tile is clicked.

Notes

  • Active state is exposed as aria-pressed on buttons, not as a tablist.