Flexi Widget

Reusable, mobile responsive Vue component

Installation

npm i --save-dev flexi-widget

Browser

Include the script file, then install the component with Vue.use(FlexiWidget); e.g.:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/flexi-widget/dist/flexi-widget.min.js"></script>
<script type="text/javascript">
  Vue.use(FlexiWidget);
</script> 

Module

import FlexiWidget from 'flexi-widget';

Usage

Once installed, it can be used as simply as:

<flexi-widget :color="'blue'"
              :header="'Flexi Widget'"
              :result="202030"
              :progressBar="50">
</flexi-widget>

.container{
    display: flex;
    //optionial 
    #use flex-direction: 'column' or 'row'
}

API

Props

Name	Type	Description
color	String	Changes the theme color of the flexi widget.
header	Sting	Set a header.
result	String Number	Set a main value in the widget
progressBar	Number	Set a value for progress bar