nb-button-split-dropdown

<template>
  <NbButtonSplitDropdown nb-id="split-1" :menu-items="menuItems">
    <template #main-content>
      Custom Main Button Text
    </template>
  </NbButtonSplitDropdown>
</template>

<template>
  <NbButtonSplitDropdown nb-id="split-1" :menu-items="menuItems">
    <template #popup-icon>
      <svg>...</svg>
    </template>
  </NbButtonSplitDropdown>
</template>

<template>
  <NbButtonSplitDropdown nb-id="split-1" :menu-items="menuItems">
    <template #item-icon-0="{ item }">
      <span>Icon for {{ item.label }}</span>
    </template>
  </NbButtonSplitDropdown>
</template>

<template>
  <NbButtonSplitDropdown
    nb-id="split-button-example"
    display="b"
    main-button-text="Save"
    :menu-items="menuItems"
    theme="light"
    :show-border="true"
    :show-popup-button="true"
    light-button-color="#dbeafe"
    light-button-color-hover="#bfdbfe"
    light-text-color="#1e40af"
    light-text-color-hover="#1e3a8a"
    light-border-color="#93c5fd"
    light-border-color-hover="#60a5fa"
    light-popup-bg-color="#ffffff"
    light-menu-item-hover-color="#e0e7ff"
    light-menu-item-text-color="#1e40af"
    :border-radius="0.375"
    :padding-x="1"
    :padding-y="0.2"
    :tab-index="0"
    :has-tab-index-enter="true"
    :has-tab-index-space="true"
    aria-label="Split Button Example"
    @main-clicked="handleMainClick"
    @menu-item-clicked="handleMenuItemClick"
    @clicked="handleClick"
  />
</template>

<script setup>
defineOptions({
  name: 'CompSplit',
});

const menuItems = [
  { label: 'Save and New', icon: '📄' },
  { label: 'Save and Close', icon: '✅' },
  { label: 'Save as Draft', icon: '💾', disabled: false },
  { label: 'Delete', icon: '🗑️', disabled: true }
];

const handleMainClick = () => {
  console.log('Main button clicked');
};

const handleMenuItemClick = ({ item, index }) => {
  console.log('Menu item clicked:', item, index);
};

const handleClick = (data) => {
  console.log('Button clicked:', data);
};
</script>

<template>
  <NbButtonSplitDropdown
    nb-id="split-button-dark-example"
    display="b"
    main-button-text="Save"
    :menu-items="menuItems"
    theme="dark"
    :show-border="true"
    :show-popup-button="true"
    dark-button-color="#8b5cf6"
    dark-button-color-hover="#7c3aed"
    dark-text-color="#f3f4f6"
    dark-text-color-hover="#ffffff"
    dark-border-color="#a78bfa"
    dark-border-color-hover="#8b5cf6"
    dark-popup-bg-color="#2d2d2d"
    dark-menu-item-hover-color="#3d3d3d"
    dark-menu-item-text-color="#e0e0e0"
    :border-radius="0.5"
    :popup-border-radius="0.5"
    :padding-x="1.5"
    :padding-y="0.4"
    @main-clicked="handleMainClick"
    @menu-item-clicked="handleMenuItemClick"
    @clicked="handleClick"
  />
</template>

<script setup>
defineOptions({
  name: 'CompSplitDark',
});

const menuItems = [
  { label: 'Save and New', icon: '📄' },
  { label: 'Save and Close', icon: '✅' },
  { label: 'Save as Draft', icon: '💾' }
];

const handleMainClick = () => {
  console.log('Main button clicked');
};

const handleMenuItemClick = ({ item, index }) => {
  console.log('Menu item clicked:', item, index);
};

const handleClick = (data) => {
  console.log('Button clicked:', data);
};
</script>

<template>
  <NbButtonSplitDropdown
    nb-id="dropdown-button-example"
    display="b"
    main-button-text="Options"
    :menu-items="menuItems"
    theme="light"
    :show-border="true"
    :show-popup-button="false"
    :border-radius="0.375"
    :padding-x="1"
    :padding-y="0.2"
    :tab-index="0"
    :has-tab-index-enter="true"
    :has-tab-index-space="true"
    aria-label="Dropdown Button Example"
    @menu-item-clicked="handleMenuItemClick"
    @clicked="handleClick"
  />
</template>

<script setup>
defineOptions({
  name: 'CompDropdown',
});

const menuItems = [
  { label: 'Option 1', icon: '📄' },
  { label: 'Option 2', icon: '✅' },
  { label: 'Option 3', icon: '💾' }
];

const handleMenuItemClick = ({ item, index }) => {
  console.log('Menu item clicked:', item, index);
};

const handleClick = (data) => {
  console.log('Button clicked:', data);
};
</script>