Toolbar

<script setup lang="ts">
const toast = useToast();
const align = ref("left");
const alignments = [
  { label: "Left", value: "left" },
  { label: "Center", value: "center" },
  { label: "Right", value: "right" },
];
const more = [
  { label: "Insert table", value: "table" },
  { label: "Insert image", value: "image" },
];
</script>

<template>
  <UiToolbar label="Formatting">
    <UiTooltip text="Bold" v-slot="{ attrs }">
      <UiIconButton label="Bold" v-bind="attrs"><Icon name="bold" /></UiIconButton>
    </UiTooltip>
    <UiTooltip text="Italic" v-slot="{ attrs }">
      <UiIconButton label="Italic" v-bind="attrs"><Icon name="italic" /></UiIconButton>
    </UiTooltip>
    <UiTooltip text="Underline" v-slot="{ attrs }">
      <UiIconButton label="Underline" v-bind="attrs"><Icon name="underline" /></UiIconButton>
    </UiTooltip>
    <span class="demo-divider" aria-hidden="true" />
    <UiSegmented v-model="align" :options="alignments" label="Alignment" size="small" />
    <span class="demo-divider" aria-hidden="true" />
    <UiMenu :items="more" label="Insert" @select="(v) => toast.info(v)" />
  </UiToolbar>
</template>