ui-dropdown

Usage

<ui-dropdown
      type="search selection"
      label="Gender"
      options="selectOptions"></ui-dropdown>

new Vue({
   data: {
      selectOptions: [
         { text: 'Male', value: 'male' },
         { text: 'Female', value: 'female'}
   ]
   }
})

Behavior

A dropdown instance has the following methods

$toggle()

$hide()

$show()

type {String}

Change the type of the Dropdown the same way you would normally do it in Semantic-UI by using class names

'type' is simply a list of classes which are appended to the dropdown

Dropdown (default)

<ui-dropdown label="Gender" options="selectOptions"></ui-dropdown>

Selection

<ui-dropdown type="selection" label="Gender" options="selectOptions"></ui-dropdown>

Search Selection

<ui-dropdown type="search selection" label="Gender" options="selectOptions"></ui-dropdown>

Inline

The gender of this user is

<span> The gender of this user is
   <ui-dropdown type="inline" label="Gender" options="selectOptions"></ui-dropdown>
</span>

label | {String}

A label which appears on the dropdown when no option is selected

on | {String} Default: 'click'

Event used to trigger dropdown 'hover' or 'click'

options | {Array}

options should be a keypath/expression in the parent view model that points to an Array to use as the dropdown options

name | {String}

sets the name of the <input /> inside the dropdown

Here is the Jade template of this component. The content blocks can be replaced using a selector. Important: Make sure you include all the Vue.js directives as in the original template for the Component to work.