Skip to content

Latest commit

 

History

History
345 lines (314 loc) · 8.45 KB

dropdown.md

File metadata and controls

345 lines (314 loc) · 8.45 KB
<script setup> import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExamplePlacement.vue' import FwbDropdownExampleAlignment from './dropdown/examples/FwbDropdownExampleAlignment.vue' import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue' import FwbDropdownExampleColors from './dropdown/examples/FwbDropdownExampleColors.vue' import FwbDropdownExampleDisabled from './dropdown/examples/FwbDropdownExampleDisabled.vue' import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue' import FwbDropdownExampleCloseInside from './dropdown/examples/FwbDropdownExampleCloseInside.vue' </script>

Vue Dropdown - Flowbite

Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements

:::tip Original reference: https://flowbite.com/docs/components/dropdowns/ :::

The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.

Dropdown - placement

```vue

Dropdown content line one

Dropdown content line two

Dropdown content line three

Dropdown content line four

Dropdown content line one

Dropdown content line two

Dropdown content line three

Dropdown content line four

Dropdown content line one

Dropdown content line two

Dropdown content line three

Dropdown content line four

Dropdown content line one

Dropdown content line two

Dropdown content line three

Dropdown content line four

<script setup> import { FwbDropdown } from 'flowbite-vue' </script> 

## Dropdown - alignment

The property controls how the dropdown is aligned with the trigger

<fwb-dropdown-example-alignment />
```vue
<template>
  <fwb-dropdown placement="top" text="Top" align-to-end>
    <div class="w-52">
      <p class="p-2">
        Dropdown content line one
      </p>
      <p class="p-2">
        Dropdown content line two
      </p>
      <p class="p-2">
        Dropdown content line three
      </p>
      <p class="p-2">
        Dropdown content line four
      </p>
    </div>
  </fwb-dropdown>
  <fwb-dropdown placement="right" text="Right" align-to-end>
    <div class="w-52">
      <p class="p-2">
        Dropdown content line one
      </p>
      <p class="p-2">
        Dropdown content line two
      </p>
      <p class="p-2">
        Dropdown content line three
      </p>
      <p class="p-2">
        Dropdown content line four
      </p>
    </div>
  </fwb-dropdown>
  <fwb-dropdown text="Bottom" align-to-end>
    <div class="w-52">
      <p class="p-2">
        Dropdown content line one
      </p>
      <p class="p-2">
        Dropdown content line two
      </p>
      <p class="p-2">
        Dropdown content line three
      </p>
      <p class="p-2">
        Dropdown content line four
      </p>
    </div>
  </fwb-dropdown>
  <fwb-dropdown placement="left" text="Left" align-to-end>
    <div class="w-52">
      <p class="p-2">
        Dropdown content line one
      </p>
      <p class="p-2">
        Dropdown content line two
      </p>
      <p class="p-2">
        Dropdown content line three
      </p>
      <p class="p-2">
        Dropdown content line four
      </p>
    </div>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>

Dropdown with List Group

```vue Profile Settings Messages Download <script setup> import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue' </script> 

## Dropdown - Button colors
<fwb-dropdown-example-colors />
```vue
<template>
  <fwb-dropdown text="Default" color="default">
    ...
  </fwb-dropdown>
  <fwb-dropdown text="Alternative" color="alternative">
    ...
  </fwb-dropdown>
  <fwb-dropdown text="Dark" color="dark">
    ...
  </fwb-dropdown>
  <fwb-dropdown text="Light" color="light">
    ...
  </fwb-dropdown>
  <fwb-dropdown text="Green" color="green">
    ...
  </fwb-dropdown>
  <fwb-dropdown text="Red" color="red">
    ...
  </fwb-dropdown>
  <fwb-dropdown text="Yellow" color="yellow">
    ...
  </fwb-dropdown>
  <fwb-dropdown text="Purple" color="purple">
    ...
  </fwb-dropdown>
  <fwb-dropdown text="Pink" color="pink">
    ...
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>

Dropdown - Disabled

Please note that when using a custom trigger (via the trigger slot), you'll need to also implement the disabled state manually by passing the disabled prop to your trigger element. You should still use the disabled prop here to ensure correct handling of the disabled state in the dropdown click handler.

```vue Dropdown content Disabled dropdown content <script setup> import { FwbDropdown } from 'flowbite-vue' </script> 


## Dropdown - trigger

<fwb-dropdown-example-trigger />
```vue
<template>
  <fwb-dropdown>
    <template #trigger>
      <span>Custom Trigger Element</span>
    </template>
    <fwb-list-group>
      <fwb-list-group-item>
        Profile
      </fwb-list-group-item>
      <fwb-list-group-item>
        Settings
      </fwb-list-group-item>
      <fwb-list-group-item>
        Messages
      </fwb-list-group-item>
      <fwb-list-group-item>
        Download
      </fwb-list-group-item>
    </fwb-list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
</script>

Dropdown - close inside

```vue Profile Settings Messages Download <script setup> import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue' </script> 

## API

### Props
| Name        | Values              | Default     |
|-------------|---------------------|-------------|
| placement   | `DropdownPlacement` | `'bottom'`  |
| text        | `string`            | `''`        |
| color       | `ButtonVariant`     | `'default'` |
| disabled    | `boolean`           | `false`     |
| transition  | `string`            | `''`        |
| closeInside | `boolean`           | `false`     |
| alignToEnd  | `boolean`           | `false`     |

### Events
| Name | Description            |
|------|------------------------|
| show | the dropdown is opened |
| hide | the dropdown is closed |

### Slots
| Name    | Description                                |
|---------|--------------------------------------------|
| default | dropdown content                           |
| trigger | replace button with custom trigger element |