i-dropdown v1.3.0

i-dropdown is a simplistic dropdown forked from vue-material inspired in Material Design specs.

Installation

Install via npm

npm install i-dropdown --save

Import or require in your code:

import Vue from 'vue';
import iDropdown from 'i-dropdown';

// OR

var Vue = require('vue');
var iDropdown = require('i-dropdown');

Module

import iDropdown from 'i-dropdown';

// ...

export default {
  // ...
  components: {
    'my-awesome-dropdown': iDropdown,
  },
  // ...
};

Browser

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="dist/i-dropdown.min.js"></script>
<script>
Vue.use(iDropdown);

new Vue({
  el: '#app'
});
</script>

Usage

It's very useful to use i-dropdown you only need to register then :smile: seems like with

<i-dropdown v-model="dropdown" :options="['A', 'B', 'C']">

</i-dropdown>

It's easier to use, you only need to pass an array [] with Number or String type. When you pass an Object you need some attention to default key label. Some like this:

<i-dropdown v-model="dropdown" :options="options">

</i-dropdown>

import iDropdown from 'i-dropdown';

export default {
  components: {
    iDropdown,
  },
  data: () => ({
    dropdown: '',
    options: [
      { label: 'Option 1', hide: `you'll don't see this text` },
      { label: 'Option 2', hide: `you'll don't see this text` },
      { label: 'Option 3', hide: `you'll don't see this text` },
      { label: 'Option 4', hide: `you'll don't see this text` },
    ],
  }),
};

But you can personalize this with some properties like

Options

@type {Array}

Options to show on dropdown. You probably need to use a v-model to receive this data information.

<i-dropdown v-model="myModel" :options="['A', 'B', 'C']">
</i-dropdown>

Label

@type {String}

Imagine now, you have myOptions that is an Array but you haven't a key property like label. Are you thinking to use an array.map()? No way! You should to use label property passing the key name that you want use instead.

<i-dropdown v-model="myModel" :options="myOptions" label="name">
</i-dropdown>

Initial value

@type {String}

Will be impressed instead i-dropdown

<i-dropdown initial="Hi I'm Goku">
</i-dropdown>

Placeholder

@type {String}

Add a placeholder on filter when avaliable

<i-dropdown placeholder="Search here">
</i-dropdown>

No Matching

@type {String}

Alternative message to show when has no matching on filter

<i-dropdown no-matching="Sorry :/">
</i-dropdown>

Return

@type {String}

Return to v-model only a single value instead an object. Enter with key name and get this value

<i-dropdown return="id">
</i-dropdown>

Limit

@type {String}

Limit how much results will be avaliable in Dropdown. Default are 5 results

<i-dropdown limit="8">
</i-dropdown>

Filter

@type {Boolean}

When True a input search will be avaliable

<i-dropdown filter>
</i-dropdown>

Disabled

@type {Boolean}

Disable the entire component

<i-dropdown disabled>
</i-dropdown>

Clear

@type {String}

Text used to reset model

<i-dropdown clear="Reset">
</i-dropdown>

Hide Results

@type {Boolean}

Hide results from Dropdown when filter is called

<i-dropdown hide-results>
</i-dropdown>

Inline

@type {Boolean}

Display element inline. Its mean, no borders

<i-dropdown inline>
</i-dropdown>

Prefix

@type {String}

Display a Prefix in iDropdown

<i-dropdown prefix="prefix">
</i-dropdown>

Suffix

@type {String}

Display a Suffix in iDropdown

<i-dropdown suffix="suffix">
</i-dropdown>

Open Top

@type {Boolean}

Open iDropdown to Top

<i-dropdown open-top>
</i-dropdown>

Max Height

@type {String}

Sets the max-height property on the dropdown list. Default is 200px

<i-dropdown max-height="500px">
</i-dropdown>

Personalization

You can personalize your <i-dropdown> with class i-dropdown or through some properties.

Uppercase

@type {Boolean}

Convert All Exibed Text to UPPERCASE

<i-dropdown uppercase>
</i-dropdown>

isBackground

@type {String}

Paint Background Color

<i-dropdown is-background="#ff0"></i-dropdown>

isOutline

@type {String}

Paint Border Color

<i-dropdown is-outline="#f0f"></i-dropdown>

isColor

@type {String}

Paint Text Color

<i-dropdown is-color="#00f"></i-dropdown>

isTooltip

@type {String}

Give us a Tooltip

<i-dropdown is-tooltip="This is a Tooltip"></i-dropdown>

This example will open a Tooltip with a message to top. See above all tooltips positions (is-position) avaliable:

• top
• left
• right
• bottom

<i-dropdown is-tooltip="This is a Tooltip" is-position="right"></i-dropdown>

Demo

JSFiddle