Vue Button Animation Components

This library is collection of Vue single-file components to render animated buttons.

Installation

Using NPM:

$ npm i vue-button-animation

Demo

https://codesandbox.io/s/vue-button-animation-yb9tq

Usage

In your main.js file:

import VueButtonAnimation from 'vue-button-animation'

Vue.use(VueButtonAnimation);

In your components template:

• button

  <button-basic>Button</button-basic>

• a

  <a-basic>Button</a-basic>

• radio

  <radio-basic value="dog" v-model="selectedAnimal">
    Dog
  </radio-basic>
  <radio-basic value="cat" v-model="selectedAnimal">
    Cat
  </radio-basic>
  <radio-basic value="rabbit" v-model="selectedAnimal">
    Rabbit
  </radio-basic>

• checkbox

  <checkbox-basic value="1" v-model="selectedIds">
    Id-1
  </checkbox-basic>
  <checkbox-basic value="2" v-model="selectedIds">
    Id-2
  </checkbox-basic>
  <br>
  <checkbox-basic value="3" v-model="selectedIds">
    Id-3
  </checkbox-basic>

• file

  <file-basic @change="onChangeFile">Select File</file-basic>

Components

• button
  It acts as the button element. So it performs the basic attributes of button element like disabled.

  | Name | Available Props | |----------------|--------------------------------------------------------------------------| | button-basic | color, size, weight, width, height, loadingDot, circle, square | | button-press | color, size, weight, width, height, loadingDot | | button-neon | size, weight, width, height, loadingDot, hueRotate |

• a
  It acts as the a element. So it performs the basic attributes of a element like href.

  | Name | Available Props | |----------------|--------------------------------------------------------------------------| | a-basic | color, size, weight, width, height, disabled, loadingDot, circle, square | | a-press | color, size, weight, width, height, disabled, loadingDot | | a-neon | size, weight, width, height, disabled, loadingDot, hueRotate |

• radio
  It acts as the input type="radio".

  | Name | Available Props | |----------------|--------------------------------------------------------------------------| | radio-basic | color, size, id, name, value, checked, required, disabled |

• checkbox
  It acts as the input type="checkbox".

  | Name | Available Props | |----------------|--------------------------------------------------------------------------| | checkbox-basic | color, size, id, name, value, checked, required, disabled |

• file
  It acts as the input type="file".

  | Name | Available Props | |----------------|--------------------------------------------------------------------------| | checkbox-basic | color, size, id, name, accept, multiple, weight, width, height, disabled, loadingDot, circle, square |

Props

| Prop | Type (Range) | Default value | |---------------|---------------------------------------------------------------------------|---------------| | color | String (Predefined Colors) | primary | | size | String (ss, s, m, l) or Number | m | | weight | String (normal, bold, bolder, lighter, ...) or Number (100 ~ 900) | 800 | | width | String or Number | N/A | | height | String or Number | N/A | | disabled | Boolean | false | | loadingDot | Boolean | false | | hueRotate | String or Number | 0 | | circle | String or Number | N/A | | square | String or Number | N/A | | id | String | v-{component type}--{uuid}| | name | String | N/A | | value | String or Boolean | N/A | | checked | Boolean | false | | required | Boolean | false | | accept | String | * | | multiple | Boolean | false |

• color - You can set button's color to a Predefined color And if you want to set button's color to another color, you can customize the class or change the style. By default, this is primary.

  Example:

  <button-basic>Button</button-basic>  <!-- By default, this is `primary`. -->
  <button-basic color="secondary">Button</button-basic>
  <button-basic color="white-border-3">Button</button-basic>

• size - It means the font size or the size of button. If you enter a number or a string excluding unit, the unit is set to px. For Example, if you enter size="20" or :size="20", the size is set to 20px.
  If you enter a specific unit, the font size is set to that unit. For Example, If you enter size="10em", size="10rem", size="10px" or size="10pt", the each size is set to 10em, 10rem, 10px or 10pt.
  If you enter a ss, s, m, l or basic, the size is set to a Predefined size. By default, this is m.
  • ss : 0.75rem
  • s : 0.875rem
  • m : 1rem
  • l : 1.5rem
  • basic : font-size is 1rem, min-width is 120px and height is 40px.
  Example:

  <button-basic>Button</button-basic> <!-- By default, this is `m` -->
  <button-basic size="20">Button</button-basic> <!-- 20px -->
  <button-basic :size="20">Button</button-basic> <!-- 20px -->
  <button-basic size="20px">Button</button-basic> <!-- 20px -->
  <button-basic size="2em">Button</button-basic> <!-- 2em -->
  <button-basic size="1rem">Button</button-basic> <!-- 1rem -->
  <button-basic size="s">Button</button-basic> <!-- 0.875rem -->

• weight - You can set the font weight between 100 and 900, regardless of whether the type of value is string or number. For example, you can enter weight="400" or :weight="400". Also you can enter a basic property like 'bold'. By default, this is 800.

  Example:

  <button-basic>Button</button-basic>  <!-- By default, this is `800`. -->
  <button-basic weight="400">Button</button-basic>
  <button-basic :weight="400">Button</button-basic>
  <button-basic weight="bold">Button</button-basic>

• width - It means the button's min width. If you enter a number or a string excluding unit, the unit is set to px. If you enter a specific unit, the width is set to that unit. If you do not enter any width prop, the width is automatically calculated based on the length of button's text data and predefined padding value.

  Example:

  <button-basic>Button</button-basic> <!-- The width is automatically calculated -->
  <button-basic width="150">Button</button-basic> <!-- 150px -->
  <button-basic :width="150">Button</button-basic> <!-- 150px -->
  <button-basic width="150px">Button</button-basic> <!-- 150px -->
  <button-basic width="20em">Button</button-basic> <!-- 20em -->
  <button-basic width="30rem">Button</button-basic> <!-- 30rem -->

• height - It means the button's height. If you enter a number or a string excluding unit, the unit is set to px. If you enter a specific unit, the height is set to that unit. If you do not enter any height prop, the height is automatically calculated based on the length of button's text data and predefined padding value.

  Example:

  <button-basic>Button</button-basic> <!-- The height is automatically calculated -->
  <button-basic height="40">Button</button-basic> <!-- 40px -->
  <button-basic :height="40">Button</button-basic> <!-- 40px -->
  <button-basic height="40px">Button</button-basic> <!-- 40px -->
  <button-basic height="3em">Button</button-basic> <!-- 3em -->
  <button-basic height="4rem">Button</button-basic> <!-- 4rem -->

• disabled - If you want to set status of button to disabled, you can use disabled attribute in button element and disabled prop in a element.

  Example:

  <button-basic disabled>Button</button-basic>
  <button-basic :disabled="true">Button</button-basic>
  <button-basic :disabled="false">Button</button-basic>
  <a-basic disabled>Link</a-basic>
  <a-basic :disabled="true">Link</a-basic>
  <a-basic :disabled="false">Link</a-basic>

• loadingDot - If you want to set status of button to loading, you can use loadingDot prop.

  Example:

  <button-basic loadingDot>Button</button-basic>
  <button-basic :loadingDot="true">Button</button-basic>
  <button-basic :loadingDot="false">Button</button-basic>
  <a-basic loadingDot>Link</a-basic>
  <a-basic :loadingDot="true">Link</a-basic>
  <a-basic :loadingDot="false">Link</a-basic>

• hueRotate - You can use this prop to filter the color of the button. By default, this is 0. You can set the hueRotate between 0 and 359, regardless of whether the type of value is string or number. If you want to know about this feature, please visit MDN.

  Example:

  <button-neon :hueRotate="180">BUTTON</button-neon>
  <button-neon hueRotate="180">BUTTON</button-neon>
  <button-neon hueRotate="270">BUTTON</button-neon>
  <a-neon :hueRotate="180">LINK</a-neon>
  <a-neon hueRotate="180">LINK</a-neon>
  <a-neon hueRotate="270">LINK</a-neon>

• circle / square - You can create circle or square buttons by using this prop. If you enter a number or a string excluding unit, the unit is set to px. If you enter a specific unit, the size of button is set to that unit. If the length of button's text data is longer than the button size, it is hidden.

  Example:

  <button-basic circle="10em">Button</button-basic>
  <button-basic :circle="100">Button</button-basic>
  <button-basic circle="100">Button</button-basic>
  <button-basic sqaure="10em">Button</button-basic>
  <button-basic :square="100">Button</button-basic>
  <button-basic square="100">Button</button-basic>

Predefined Colors

• button-basic, a-basic
  • primary, secondary, success, danger, warning, info, light, dark, blue, green, orange, yellow, red, white, black, white-blue, file, cyan, navy, lightblue, lightsalmon, lightgray
  • white-border-[1~5], white-border-blue-[1~5], gray-border-[1~5], blue-border-[1~5], green-border-[1~5], orange-border-[1~5], yellow-border-[1~5]

• button-press, a-press
  • primary, secondary, success, danger, warning, info, light, dark, blue, green, orange, yellow, red, white, black, white-blue, file, cyan, navy, lightblue, lightsalmon, lightgray
  • ~~white-border-[1~5], white-border-blue-[1~5], gray-border-[1~5], blue-border-[1~5], green-border-[1~5], orange-border-[1~5], yellow-border-[1~5]~~

• radio-basic, checkbox-basic
  • primary, secondary, success, danger, warning, info, light, dark, blue, green, orange, yellow, red, white, black, ~~white-blue, file,~~ cyan, navy, lightblue, lightsalmon, lightgray
  • ~~white-border-[1~5], white-border-blue-[1~5], gray-border-[1~5], blue-border-[1~5], green-border-[1~5], orange-border-[1~5], yellow-border-[1~5]~~

Events

• <button>, <a>

  | Event | Description | |------------|-------------| | click | The event occurs when the user clicks on an element | | dblclick | The event occurs when the user double-clicks on an element | | mousedown | The event occurs when the user presses a mouse button over an element | | mouseenter | The event occurs when the pointer is moved onto an element | | mouseleave | The event occurs when the pointer is moved out of an element | | mousemove | The event occurs when the pointer is moving while it is over an element | | mouseout | The event occurs when a user moves the mouse pointer out of an element, or out of one of its children | | mouseover | The event occurs when the pointer is moved onto an element, or onto one of its children | | mouseup | The event occurs when a user releases a mouse button over an element |

Tips

• Containing Icon - If you want to render a button containing some icons, I recommend you to use the vue-material-design-icon library. the color of icon inside a button inherit the button's color even when button's status is hover.

  Example:

  <button-basic color="yellow-border-1">
  <menu-icon />
     Button
  </button-basic>
    
  <a-basic>
    Button
  <arrow-icon />
  </a-basic>

License

MIT