Dropdown

Dropdown can be used with embedded Option or OptionGroup.

Demos

Size variants

Available size values for the ui prop: large/small/tiny/micro.

<template>
<article>
  <veui-dropdown
    label="Action"
    ui="large"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="small"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="tiny"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="micro"
    :options="operations"
    @click="alert"
  />
</article>
</template>

<script>
import { Dropdown } from 'veui'
import toast from 'veui/managers/toast'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      operations: [
        {
          label: 'Edit',
          value: 'edit'
        },
        {
          label: 'Delete',
          value: 'delete'
        },
        {
          label: 'Save',
          value: 'save'
        },
        {
          label: 'Publish',
          value: 'publish'
        }
      ]
    }
  },
  methods: {
    alert (e) {
      toast.info(e)
    }
  }
}
</script>

Using embedded OptionGroups & Options

Can be used with embedded OptionGroups & Options.

<template>
<veui-dropdown
  label="Files"
  @click="alert"
>
  <veui-option-group>
    <veui-option
      value="new-file"
      label="New File"
    />
    <veui-option
      value="new-window"
      label="New Window"
    />
  </veui-option-group>
  <veui-option-group>
    <veui-option
      value="open"
      label="Open…"
    />
    <veui-option
      value="open-workspace"
      label="Open Workspace…"
    />
    <veui-option-group
      label="Open Recent"
      position="popup"
    >
      <veui-option-group>
        <veui-option
          value="reopen"
          label="Reopen Closed Editor"
        />
      </veui-option-group>
      <veui-option-group>
        <veui-option
          value="open:~/Dropdown.vue"
          label="~/Dropdown.vue"
        />
        <veui-option
          value="open:~/Select.vue"
          label="~/Select.vue"
        />
      </veui-option-group>
    </veui-option-group>
  </veui-option-group>
</veui-dropdown>
</template>

<script>
import { Dropdown, OptionGroup, Option } from 'veui'
import toast from 'veui/managers/toast'

export default {
  components: {
    'veui-dropdown': Dropdown,
    'veui-option-group': OptionGroup,
    'veui-option': Option
  },
  methods: {
    alert (e) {
      toast.info(e)
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring-

Style variants.

ValueDescription
primaryPrimary style.
altAlternative style.
largeLarge size.
smallSmall size.
tinyTiny size.
microMicro size.
optionsArray<Object>=[]

The list of options with the option type being {label, value, disabled, ...}.

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
disabledboolean=Whether the option is disabled.
labelstring-The descriptive label of the dropdown button.
triggerstring'click'When to trigger the dropdown to open. Available values are 'click'/'hover'.
splitbooleanfalseWhether to split the dropdown button into a command button and a toggle button for the dropdown layer.
disabledbooleanfalseWhether the dropdown is disabled.
overlay-classstring|Array|Object-See the overlay-class prop of Overlay.

Slots

NameDescription
defaultThe content of the options dropdown layer. Can be used to place Options or OptionGroupss when the options prop is not specified.
beforeThe content before the options in the dropdown layer.
afterThe content after the options in the dropdown layer.
label

The content of the select button. Displays the label prop by default.

NameTypeDescription
labelstringThe descriptive label of the dropdown option.
group-label

The label text of each option group (option with child options). Displays the label of the option by default.

NameTypeDescription
labelstringThe descriptive label of the option group.
disabledboolean=Whether the option group is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via v-bind.

option-label

The label text of each option (option without child options). Displays the label of the option by default.

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
selectedbooleanWhether the the option is selected.
disabledboolean=Whether the option is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via v-bind.

option

The entire content area of each option (option without child options). Displays the default content of Options component by default.

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
selectedbooleanWhether the the option is selected.
disabledboolean=Whether the option is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via v-bind.

Events

NameDescription
clickTriggered when an option is clicked. The callback parameter list is (value: *=). value is the value property of the option being clicked. Also triggered when split is true and the command button is clicked, in this case there won't be a value argument.

Icons

NameDescription
expandExpand the dropdown layer.
collapseCollapse the dropdown layer.