Dropdown

Demos

Style variants

Available style variants for the ui prop: primary / text.

Edit this page on GitHubEdit
<template>
<article>
  <veui-dropdown
    label="Primary"
    ui="primary"
    :options="options"
  />
  <veui-dropdown
    label="Default"
    :options="options"
  />
  <veui-dropdown
    label="Normal"
    ui="normal"
    :options="options"
  />
  <veui-dropdown
    label="Text"
    ui="text"
    :options="options"
  />
</article>
</template>

<script>
import { Dropdown } from 'veui'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      options: [
        {
          label: '新建',
          value: 'create'
        },
        {
          label: '编辑',
          value: 'edit'
        },
        {
          label: '删除',
          value: 'remove'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.veui-dropdown {
  & + & {
    margin-left: 1em;
  }
}
</style>

Size variants

Available size values for the ui prop: xs / s / m / l.

Edit this page on GitHubEdit
<template>
<article>
  <veui-dropdown
    label="Action"
    ui="xs"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="s"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="l"
    :options="operations"
    @click="alert"
  />
</article>
</template>

<script>
import { Dropdown, toast } from 'veui'

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>

<style lang="less" scoped>
.veui-dropdown {
  max-width: 120px;
  margin-right: 10px;
}
</style>

Using embedded OptionGroups & Options

Can be used with embedded OptionGroups & Options.

Edit this page on GitHubEdit
<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, toast } from 'veui'

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

Searchable dropdown

Usingsearchable prop to make the component support search functionality.

Edit this page on GitHubEdit
<template>
<article>
  <veui-dropdown
    label="Operation"
    placeholder="Type to search..."
    searchable
    :options="options"
  />
</article>
</template>

<script>
import { Dropdown } from 'veui'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      options: [
        {
          label: '>',
          value: '>'
        },
        {
          label: '>>',
          value: '>>'
        },
        {
          label: '<',
          value: '<'
        },
        {
          label: '|',
          value: '|'
        },
        {
          label: '~/.bash_profile',
          value: '~/.bash_profile'
        },
        {
          label: 'alias',
          value: 'alias'
        },
        {
          label: 'cd',
          value: 'cd'
        },
        {
          label: 'cd ..',
          value: 'cd ..'
        },
        {
          label: 'cp',
          value: 'cp'
        },
        {
          label: 'Wildcards (*)',
          value: 'Wildcards (*)'
        },
        {
          label: 'env',
          value: 'env'
        },
        {
          label: 'env | grep VARIABLE',
          value: 'env | grep VARIABLE'
        },
        {
          label: 'export',
          value: 'export'
        },
        {
          label: 'grep',
          value: 'grep'
        },
        {
          label: 'grep -i',
          value: 'grep -i'
        },
        {
          label: 'grep -R',
          value: 'grep -R'
        },
        {
          label: 'grep -Rl',
          value: 'grep -Rl'
        },
        {
          label: 'HOME',
          value: 'HOME'
        },
        {
          label: 'ls',
          value: 'ls'
        },
        {
          label: 'mkdir',
          value: 'mkdir'
        },
        {
          label: 'mv',
          value: 'mv'
        },
        {
          label: 'nano',
          value: 'nano'
        },
        {
          label: 'PATH',
          value: 'PATH'
        },
        {
          label: 'pwd',
          value: 'pwd'
        },
        {
          label: 'rm',
          value: 'rm'
        },
        {
          label: 'rm -r',
          value: 'rm -r'
        },
        {
          label: 'sed',
          value: 'sed'
        },
        {
          label: 'sort',
          value: 'sort'
        },
        {
          label: 'standard error',
          value: 'standard error'
        },
        {
          label: 'source',
          value: 'source'
        },
        {
          label: 'standard input',
          value: 'standard input'
        },
        {
          label: 'standard output',
          value: 'standard output'
        },
        {
          label: 'touch',
          value: 'touch'
        },
        {
          label: 'uniq',
          value: 'uniq'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.veui-dropdown {
  margin-left: 1em;
}
</style>

Disabled dropdown

Use the disabled property in options items to disable single option.

Edit this page on GitHubEdit
<template>
<article>
  <veui-dropdown
    label="Operation"
    disabled
    ui="text"
    :options="options"
  />
  <veui-dropdown
    label="Operation"
    disabled
    :options="options"
  />
  <veui-dropdown
    label="Operation"
    disabled
    ui="primary"
    :options="options"
  />
  <veui-dropdown
    label="Operation"
    disabled
    split
    :options="options"
  />
  <veui-dropdown
    label="Operation"
    disabled
    split
    ui="primary"
    :options="options"
  />
</article>
</template>

<script>
import { Dropdown } from 'veui'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      options: [
        {
          label: '新建',
          value: 'create'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.veui-dropdown {
  margin-left: 1em;
}
</style>

Trigger and split

Use the trigger prop to specify when to open the dropdown menu. Use the split prop to separate command button and dropdown button.

Edit this page on GitHubEdit
<template>
<article>
  <div class="container">
    <veui-dropdown
      label="Operation"
      split
      trigger="hover"
      :options="options"
    />
    <veui-dropdown
      label="Operation"
      split
      trigger="click"
      :options="options"
    />
    <veui-dropdown
      label="Operation"
      ui="primary"
      split
      trigger="hover"
      :options="options"
    />
    <veui-dropdown
      label="Operation"
      ui="primary"
      split
      trigger="click"
      :options="options"
    />
  </div>
  <div class="container">
    <veui-dropdown
      label="Operation"
      trigger="hover"
      :options="options"
    />
    <veui-dropdown
      label="Operation"
      trigger="click"
      :options="options"
    />
    <veui-dropdown
      label="Operation"
      ui="text"
      split
      trigger="hover"
      :options="options"
    />
    <veui-dropdown
      label="Operation"
      ui="text"
      split
      trigger="click"
      :options="options"
    />
  </div>
</article>
</template>

<script>
import { Dropdown } from 'veui'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      options: [
        {
          label: '新建新建新建新建新建新建新建',
          value: 'create'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  margin-bottom: 1em;

  .veui-dropdown {
    margin-left: 1em;
  }
}
</style>

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
primaryPrimary style.
textText style.
xsExtra small.
sSmall.
mMedium.
lLarge.
optionsArray<Object>=[]

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

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
optionsArray<Object>=The child options of current option. The item type is the same as the items of the options prop.
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'.
splitboolean=falseWhether to split the dropdown button into a command button and a toggle button for the dropdown layer.
expandedboolean=false

.sync

Whether the dropdown menu is expanded.

disabledboolean=falseWhether the dropdown is disabled.
overlay-classstring | Array | Object=-See the overlay-class prop of the Overlay component.
overlay-stylestring | Array | Object=-See the overlay-style prop of the Overlay component.

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.

trigger

The entire drop-down trigger area. Displays the dropdown button by default.

NameTypeDescription
attrsObjectAttributes that need to be output to the trigger element, including aria-* / disabled, etc., can be output using v-bind="attrs".
handlersObject[^handlers-desc]
expandedbooleanWhether the dropdown menu is expanded or not.
togglefunction(force?: boolean): voidUsed to toggle the expanded state of the dropdown menu.

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.
toggleTriggered when the expanded state is going to change. The callback parameter list is (expanded: boolean). expanded denotes whether the dropdown menu is to be expanded or collapsed.

Icons

NameDescription
expandExpand the dropdown layer.
collapseCollapse the dropdown layer.
Edit this page on GitHubEdit