1.0.7 • Published 4 years ago
@psff/cmp-dropdown v1.0.7
@psff/cmp-dropdown psff-dropdown
Dropdowns are compact elements that allow users to select an action from a list.
Getting started
Setup the package as a dependency.
yarn add @psff/cmp-dropdown
Use the component
<psff-dropdown />
.import PsffDropdown from '@psff/cmp-dropdown'; @Component({ components: { 'psff-dropdown': PsffDropdown, }, }) export default class MyComponent extends Vue { private menuItems: Array<{ label: string, value: any}> = [ { label: 'Element 1', value: 1 }, { label: 'Element 2', value: 2 }, { label: 'Element 3', value: 3 }, ]; }
<psff-dropdown v-model="model" :placeholder="Choose an element" v-on:input="handleInputChange" :items="menuItems" />
Specifications
Parameters:
items
(Array<{ label: string, value: any }>): elements to render on the menu.placeholder
(string, optional): text describing what menu items are.trigger
('click'|'hover', default: 'click'): how to unfold the menu.
Events
input
*(any) returns current selected item
Custom propperties:
Dropdown:
--background-color: var(--psff-dropdown-background-color, transparent);
--color: var(--psff-dropdown-color, #848484);
--color-active: var(--psff-dropdown-color-active, #648cfa);
--border-color: var(--psff-dropdown-border-color, transparent);
--border-radius: var(--psff-dropdown-border-radius, 0);
--border-size: var(--psff-dropdown-border-size, 1px);
--font-family: var(--psff-dropdown-font-family, inherit);
--font-size: var(--psff-dropdown-font-size, .8rem);
--font-weight: var(--psff-dropdown-font-weight, 400);
--justify-content: var(--psff-dropdown-justify-content, flex-end);
--line-height: var(--psff-dropdown-line-height, 1);
--min-width: var(--psff-dropdown-min-width, auto);
--padding: var(--psff-dropdown-padding, 0);
--width: var(--psff-dropdown-width, 100%);
Listbox
--listbox-background-color: var(--psff-dropdown-listbox-background-color, #fff);
--listbox-border-radius: var(--psff-dropdown-listbox-border-radius, .25rem);
--listbox-border-color: var(--psff-dropdown-listbox-border-color, #cbd9fd);
--listbox-border-size: var(--psff-dropdown-listbox-border-size, 1px);
--listbox-box-shadow: var(--psff-dropdown-listbox-box-shadow, .12rem .12rem .12rem color-mod(#cbd9fd a(50%)));
--listbox-margin: var(--psff-dropdown-listbox-margin, 1rem);
--listbox-min-width: var(--psff-dropdown-listbox-min-width, auto);
--listbox-z-index: var(--psff-dropdown-listbox-z-index, 10);
Listbox items
--listbox-item-color: var(--psff-dropdown-listbox-item-color, #5a5a5a);
--listbox-item-color-hover: var(--psff-dropdown-listbox-item-color-hover, #648cfa);
--listbox-item-background: var(--psff-dropdown-listbox-item-background, transparent);
--listbox-item-background-hover: var(--psff-dropdown-listbox-item-background-hover, #f5f7ff);
--listbox-item-icon-width: var(--psff-dropdown-listbox-item-icon-width, .5rem);
Icon
--icon-color: var(--psff-dropdown-icon-color, #648cfa);
--icon-width: var(--psff-dropdown-icon-width, .5rem);