VueTailwind

DropDown

Playground
Button size

Button variant

Placement:

Placement variant:

Examples

Simple Example

<t-dropdown text="Im a happy button">
  <ul>
    <li>
      <a 
        href="#" 
        class="block no-underline px-4 py-2 hover:bg-blue-500 hover:text-white"
      >My orders</a>
    </li>
    <li>
      <a 
        href="#" 
        class="block no-underline px-4 py-2 hover:bg-blue-500 hover:text-white"
      >Account settings</a>
    </li>
    <li class="border-b"></li>
    <li>
      <a 
        href="#" 
        class="block no-underline px-4 py-2 hover:bg-blue-500 hover:text-white"
      >Sign out</a>
    </li>
  </ul>
</t-dropdown>

Update child TButton classes (or any TButton prop)

<t-dropdown :button-props="{ baseClass: 'shadow-md block rounded' }">
  <ul>
    <li>
      <a 
        href="#" 
        class="block no-underline px-4 py-2 hover:bg-blue-500 hover:text-white"
      >My orders</a>
    </li>
    ...
  </ul>
</t-dropdown>

Add HTML label

<t-dropdown>
 <template v-slot:button-content>
    <span>Hello <strong>Alfonso</strong>!</span>
  </template>
  <ul>
    <li>
      <a 
        href="#" 
        class="block no-underline px-4 py-2 hover:bg-blue-500 hover:text-white"
      >My orders</a>
    </li>
    ...
  </ul>
</t-dropdown>

Update child TButton classes (or any TButton prop)

<t-dropdown :button-props="{ baseClass: 'shadow-md block rounded' }">
  <ul>
    <li>
      <a 
        href="#" 
        class="block no-underline px-4 py-2 hover:bg-blue-500 hover:text-white"
      >My orders</a>
    </li>
    ...
  </ul>
</t-dropdown>

Events

Event Arguments Description
focus FocusEvent Emitted when the button is focused
blur FocusEvent Emitted when the button is blurred
click MouseEvent Emitted when the button is clicked
dropdown-click context[Object] Emitted when the dropdown is clicked
created 1 context[Object] Created popper component
show 1 context[Object] Show popover
hide 1 context[Object] Hide popover
document-click 1 context[Object]

Props

Property Type Default value Accepted values Description
variant String undefined 'primary', 'secondary', 'tertiary', 'danger', 'warning', 'success'
size String undefined 'sm', 'lg'
tagName String 'div' Any valid HTML tag The component wrapper tag
buttonTagName String 'button' 'button', 'a' The button Tag
disabled Boolean false true, false
placement String 'auto' 'auto', 'top', 'right', 'bottom', 'left' and adding the suffix '-start' or '-end', example: 'top-start'...
closeOnDropdownClick Boolean true true, false If should close the dropdown when clicked
buttonProps Object {} All the attributes in the object will be used as props in the child TButton on this component
delay-on-mouse-over 1 Number 10 Delay in ms before showing popper during a mouse over
delay-on-mouse-out 1 Number 10 Delay in ms before hiding popper during a mouse out
append-to-body 1 Boolean false
visible-arrow 1 Boolean true
force-show 1 Boolean false
trigger 1 String hover Optional value: hover or click
enter-active-class 1 String null
leave-active-class 1 String null
transition 1 String empty
options 1 Object {} popper.js options
stop-propagation 1 Boolean false
prevent-default 1 Boolean false

1 Props inherited from vue-popper dependency see vue-popper docs

Property Description
baseClass Base dropdown wrapper class
dropdownClass Dropdown class
disabledClass Disabled wrapper class

1 Events inherited from vue-popper dependency see vue-popper docs

Slots

Slot name Description Slot props
button-content The content of the dropdown button shown: shown status

Default theme settings

const TDropdown = {
  baseClass: '',
  dropdownClass: 'w-64 bg-white rounded border shadow-md py-2 z-10',
  disabledClass: '',
}

export default TDropdown
  • Remember that in order to change the default settings you can change default theme or use the props:
<t-dropdown
  dropdown-class="w-64 bg-blue-500 text-white border-blue-500 rounded-lg border shadow-md p-6 z-10"
  text="Super duper dropdown"
>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem possimus nihil minus rerum aperiam, quidem, reprehenderit! Atque, facere inventore nam suscipit, excepturi nesciunt incidunt, explicabo error molestiae iure optio enim.</p>
</t-dropdown>

The result:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem possimus nihil minus rerum aperiam, quidem, reprehenderit! Atque, facere inventore nam suscipit, excepturi nesciunt incidunt, explicabo error molestiae iure optio enim.

← Input Group →