Dropdown

Introduction to using the Dropdown component

Dropdown - a drop-down menu used to let users take the next interaction for selected data. Clicking the button opens a floating area containing a series of options. It looks similar to Select, but the biggest difference is that Dropdown triggers the option event when an option is clicked and then closes the floating area.

Theme color

<bpa-dropdown v-model="value" :options="options" theme="primary" @click="onClick"/>

Size

<bpa-dropdown v-model="value" :options="options" size="small" @click="onClick"/>

Placeholder text

<bpa-dropdown v-model="value" :options="options" placeholder="Custom text" @click="onClick"/>

Disabled

<bpa-dropdown v-model="value" :options="options" theme="primary" disabled @click="onClick"/>

Prefix and suffix

<bpa-dropdown v-model="value" :options="options" @click="onClick">
  <template v-slot:prefix>Prefix</template>
  <template v-slot:affix>Affix</template>
</bpa-dropdown>

If a parent has "position: fixed"

<bpa-dropdown v-model="value" :options="options" fixed @click="onClick"/>

Inside bp-form-item

<bpa-form-item labelFor="bpa-dropdown-{id}-btn">
	<bpa-dropdown v-model="value" :options="options" :id="{id}" @click="onClick"/>
</bpa-form-item>

Custom list width

<bpa-dropdown v-model="value" :options="options" optionWidth="100px" @click="onClick"/>

Options and Methods

//data
options: [
  { 
    type: 'link',
    url: '/',
    label: 'Internal Link',
  },
  { 
    type: 'external-link',
    url: 'https://google.com',
    label: 'External Link',
  },
  { 
    label: 'Text',
  }
]

//methods
onClick(item: any){
  console.log(item);
}

Attributes

Name	Value	Type	Default	Required	Note
id		String	random
size	small, large	String
v-model		String
options		Array<{ label: string; type?: ‘link’ or ‘external-link’; url: string }>
disabled		Boolean
placeholder		String
theme	primary, success, warning, danger, primary-ghost, success-ghost, warning-ghost, danger-ghost	String
optionWidth		String
fixed		Boolean
v-slot:prefix
v-slot:affix
listboxClass		String			You can add a classname to the listbox

Demo