@marchef/vuejs-dropdown NPM

Dropdown VueJs component

`THIS PACKAGE IS STILL IN BETA!`

A dropdown VueJs component. Compatible with Vue 2.x

Installation

npm i @marchef/vuejs-dropdown

Usage

import Dropdown from '@marchef/vuejs-dropdown'
Vue.component('dropdown', Dropdown);

<dropdown
    name="dropdown-name"
    :options="[
    {
        name: 'Option A',
        value: 'option_a'
    },
    {
        name: 'Option B',
        value: 'option_bOption B'
    }]"
>
</dropdown>

Props

Name	Description	Default	Require
`name`	The name of the form field. String		YES
`options`	The options of the dropdown field. Array (see below)		YES
`option-value-type`	Configure the Option format. `name`, `icon`, `iconName`, `nameIcon`	`iconName`
`current-option-value-type`	Configure the current Option format. `name`, `icon`, `iconName`, `nameIcon`	`iconName`
`current-option-class`	CSS Classes to style the current option. String	`dd_boarder_none`
`current-option-icon-class`	CSS Classes to style the current option icon. String	`dd_icon dd_float_left`
`current-option-value-class`	CSS Classes to style the current option value. String	`dd_float_left`
`description`	Short description or question text. View on the top of the options list. String
`descriptionClass`	CSS Classes to style the description. String
`:arrow`	Enable the arrow icon. Boolean	`true`
`arrow-icon-path`	The arrow SVG Icon path. String	`M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z`
`arrow-icon-viewbox`	The arrow SVG viewbox. String	`0 0 20 20`
`arrow-class`	CSS Classes to style the arrow. String	`dd_icon dd_float_left`
`arrow-active-class`	CSS Classes to style the arrow when the dropdown is Open. String	`dd_transform-180`
`popper_options`	Popper options. Object
`popperClass`	CSS Classes to override the default popper Class. String	`popper`

Prop Option Object

Name	Description	Require
`name`	The Option Name.	YES
`value`	The Option Value.	YES
`iconSvgPath`	The option SVG Icon path. String
`iconViewbox`	The option SVG Icon viewbox. String
`optionClass`	CSS Classes to style the option.
`optionActiveClass`	CSS Classes to style the active option in the options list.
`optionIconClass`	CSS Classes to style the option icon.
`optionValueClass`	CSS Classes to style the option value.