Dropdown

Use Dropdown component for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Dropdown

Code

<script setup lang="ts">
import { BaseDropdown, BaseDropdownItem } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseDropdown" text="Options">
      <component :is="BaseDropdownItem" text="Option 1" />
      <component :is="BaseDropdownItem" text="Option 2" />
      <component :is="BaseDropdownItem" text="Option 3" />
      <component :is="BaseDropdownItem" text="Option 4" />
    </component>
  </div>
</template>

Custom Trigger

Using #trigger slot to customize trigger button

Code

<script setup lang="ts">
import { BaseDropdown, BaseDropdownItem } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseDropdown">
      <template #trigger>
        <div class="bg-red-500 text-white rounded px-4 py-2">Custom Trigger</div>
      </template>
      <component :is="BaseDropdownItem" text="Option 1" />
      <component :is="BaseDropdownItem" text="Option 2" />
      <component :is="BaseDropdownItem" text="Option 3" />
      <component :is="BaseDropdownItem" text="Option 4" />
    </component>
  </div>
</template>

Custom Menu

Using #default slot to customize menu items

Code

<script setup lang="ts">
import { BaseDropdown, BaseDropdownItem } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseDropdown">
    <component :is="BaseDropdownItem" v-slot="{ active }">
      <div :class="{ 'dropdown-item-active': active }" class="dropdown-item">
        <base-icon icon="i-far-pen-to-square" />
        <span>Edit</span>
      </div>
    </component>
    <component :is="BaseDropdownItem" v-slot="{ active }">
      <div :class="{ 'dropdown-item-active': active }" class="dropdown-item">
        <base-icon icon="i-far-copy" />
        <span>Duplicate</span>
      </div>
    </component>
  </component>
</template>

Dropdown API

Tyoes

export type BaseDropdownPosition = 'left' | 'right'

Props

Name	Type	Default	Description
text	string	Options	Dropdown button text
position	BaseDropdownPosition	left	Dropdown menu position

Slot

#default slot for rendering dropdown menu items

#trigger slot for rendering dropdown trigger button

Dropdown Item API

Props

Name	Type	Default	Description
text	string		Dropdown menu item text

Slot

#default slot for rendering dropdown content