@marchef/vuejs-dropdown

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	Default	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.