i-button v1.0.3

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

Installation

Install via npm

npm install i-button --save

Import or require in your code:

import Vue from 'vue';
import iButton from 'i-button';

// OR

var Vue = require('vue');
var iButton = require('i-button');

Installation

Module

import iButton from 'i-button';

// ...

export default {
  // ...
  components: {
    'my-awesome-button': iButton,
  },
  // ...
};

Browser

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

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

Usage

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

<i-button class="is-background-red">
  🗑
</i-button>

You also can use some properties like

A Link (href & target & rel)

<i-button class="is-background-red"
:href="'http://ivomarsan.com'"
:target="'_blank'"
:rel="'noopener'">
  🗑
</i-button>

Button (disabled & type)

<i-button class="is-background-red"
:disabled="isDisabled"
:type="'button'">
  🗑
</i-button>

With a Tooltip

<i-button class="is-outline-blue"
tooltip="This is a Tooltip"
tooltip-pos="top">
  🗑
</i-button>

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

• top
• left
• right
• bottom

toolpos its a String and has by default value: top

Personalization

You can personalize your <i-button> with class i-button or pre-defined classes to change background, color or outline (list bellow) or through some properties.

uppercase (Boolean) if true, text will be UPPERCASED.

<i-button uppercase>🗑</i-button>

is-color (String: Hex) to define a color to button.

<i-button is-color="#d43f3a">🗑</i-button>

is-outline (String: Hex) to draw a custom border.

<i-button is-outline="#d43f3a">🗑</i-button>

is-background (String: Hex) to get a background color.

<i-button is-background="#d43f3a">🗑</i-button>

Colors

Actually we have 10 colors, are:

Classes

Classes are formed by prefix-type-color, examples:

.is-color-green

<i-button class="is-color-green">🗑</i-button>

.is-outline-green

<i-button class="is-outline-green">🗑</i-button>

.is-background-green

<i-button class="is-background-green">🗑</i-button>

See more in i-colors and examples. It's easier :smile:

Demo

JSFiddle