Phi / MenuBar

<script setup lang="ts">
import { ref } from "vue";
import { PhTextBolder, PhTextItalic } from "@phosphor-icons/vue";
import { MenuBar, type MenuOptionProps } from "@dicehub/phi/components/menubar";

const active = ref<string | undefined>("bold");

const options: MenuOptionProps[] = [
  {
    icon: PhTextBolder,
    id: "bold",
    tooltip: "Bold",
    onClick: () => {
      active.value = active.value === "bold" ? undefined : "bold";
    },
  },
  {
    icon: PhTextItalic,
    id: "italic",
    tooltip: "Italic",
    onClick: () => {
      active.value = active.value === "italic" ? undefined : "italic";
    },
  },
];
</script>

<template>
  <MenuBar :is-active="active" :options="options" option-ids />
</template>

Installation

Barrel

import { MenuBar } from "@dicehub/phi";

Granular

import { MenuBar } from "@dicehub/phi/components/menubar";

Usage

<script setup lang="ts">
import { PhTextBolder } from "@phosphor-icons/vue";
import { MenuBar, type MenuOptionProps } from "@dicehub/phi/components/menubar";

const options: MenuOptionProps[] = [
  {
    icon: PhTextBolder,
    id: "bold",
    tooltip: "Bold",
    onClick: () => console.log("Bold clicked"),
  },
];
</script>

<template>
  <MenuBar :options="options" option-ids />
</template>

Examples

Text Formatting

<script setup lang="ts">
import { ref } from "vue";
import { PhTextBolder, PhTextItalic } from "@phosphor-icons/vue";
import { MenuBar, type MenuOptionProps } from "@dicehub/phi/components/menubar";

const active = ref<string | undefined>("bold");

const options: MenuOptionProps[] = [
  {
    icon: PhTextBolder,
    id: "bold",
    tooltip: "Bold",
    onClick: () => {
      active.value = active.value === "bold" ? undefined : "bold";
    },
  },
  {
    icon: PhTextItalic,
    id: "italic",
    tooltip: "Italic",
    onClick: () => {
      active.value = active.value === "italic" ? undefined : "italic";
    },
  },
];
</script>

<template>
  <MenuBar :is-active="active" :options="options" option-ids />
</template>

Without Active State

<script setup lang="ts">
import { ref } from "vue";
import { PhTextBolder, PhTextItalic } from "@phosphor-icons/vue";
import { MenuBar, type MenuOptionProps } from "@dicehub/phi/components/menubar";

const active = ref<string | undefined>();

const options: MenuOptionProps[] = [
  {
    icon: PhTextBolder,
    id: "bold",
    tooltip: "Bold",
    onClick: () => {
      active.value = active.value === "bold" ? undefined : "bold";
    },
  },
  {
    icon: PhTextItalic,
    id: "italic",
    tooltip: "Italic",
    onClick: () => {
      active.value = active.value === "italic" ? undefined : "italic";
    },
  },
];
</script>

<template>
  <MenuBar :is-active="active" :options="options" option-ids />
</template>

API Reference

Prop	Type	Default	Description
`className`	`string`	`-`	Additional CSS classes merged via `cn()`.
`isActive`	`number \| string`	`-`	The currently active option value, matched against option index or `id`.
`options*`	`MenuOptionProps[]`	`-`	Array of menu option configurations.
`optionIds`	`boolean`	`-`	When true, each option's `id` field is used for matching instead of its array index.

Events

Event	Type	Description
`@select`	`(details: MenuBarSelectDetails) => void`	Emitted after a non-disabled option is selected. Details include option, index, and value.