@psff/cmp-dropdown

@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);