VEUI

Dropdown can be used with embedded Option or OptionGroup.

Demos

Style variants

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

<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 `OptionGroup`s & `Option`s

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>

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>

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

Name Type Default Description

ui

string=

Style variants.

Value	Description
`primary`	Primary style.
`text`	Text style.
`xs`	Extra small.
`s`	Small.
`m`	Medium.
`l`	Large.

options

Array<Object>=

[]

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

Name	Type	Description
`label`	`string`	The descriptive label of the option.
`value`	`*`	The value of the option.
`options`	`Array<Object>=`	The child options of current option. The item type is the same as the items of the `options` prop.
`disabled`	`boolean=`	Whether the option is disabled.

label string - The descriptive label of the dropdown button.

trigger string= 'click' When to trigger the dropdown to open. Available values are 'click' / 'hover'.

split boolean= false Whether to split the dropdown button into a command button and a toggle button for the dropdown layer.

expanded

boolean=

false

.sync

Whether the dropdown menu is expanded.

disabled boolean= false Whether the dropdown is disabled.

overlay-class string | Array | Object= - See the overlay-class prop of the Overlay component.

overlay-style string | Array | Object= - See the overlay-style prop of the Overlay component.

Slots

Name Description

default The content of the options dropdown layer. Can be used to place Options or OptionGroupss when the options prop is not specified.

before The content before the options in the dropdown layer.

after The content after the options in the dropdown layer.

label

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

Name	Type	Description
`label`	`string`	The 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.

Name	Type	Description
`label`	`string`	The descriptive label of the option group.
`disabled`	`boolean=`	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.

Name	Type	Description
`label`	`string`	The descriptive label of the option.
`value`	`*`	The value of the option.
`selected`	`boolean`	Whether the the option is selected.
`disabled`	`boolean=`	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.

Name	Type	Description
`label`	`string`	The descriptive label of the option.
`value`	`*`	The value of the option.
`selected`	`boolean`	Whether the the option is selected.
`disabled`	`boolean=`	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.

Name	Type	Description
`attrs`	`Object`	Attributes that need to be output to the trigger element, including `aria-*` / `disabled`, etc., can be output using `v-bind="attrs"`.
`handlers`	`Object`	Event listeners that need to be bound to the trigger element, can be output using `v-on="handlers"`. The element used to bind `handlers` needs to support focus acquisition so that various keyboard interactions can still be triggered properly.
`expanded`	`boolean`	Whether the dropdown menu is expanded or not.
`toggle`	`function(force?: boolean): void`	Used to toggle the expanded state of the dropdown menu.

Events

Name	Description
`click`	Triggered 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.
`toggle`	Triggered 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

Name	Description
`expand`	Expand the dropdown layer.
`collapse`	Collapse the dropdown layer.

Edit this page on GitHubEdit

Dropdown

Demos

Style variants

Size variants

Using embedded OptionGroups & Options

Searchable dropdown

Disabled dropdown

Trigger and split

API

Props

Slots

Events

Icons

Using embedded `OptionGroup`s & `Option`s