CheckboxComponent
Properties
- label - You can use a
slot
or alabel
property - name - Custom name for the checkbox
- value - Pass a value to the checkbox
- disabled - To get a disabled checkbox
- trueValue - Default:
true
- falseValue - Default:
false
<checkbox v-model='model'>Check label</checkbox>true
RadioComponent
Properties
- label - Label for the radio
- name - Custom name for the radio
- val - Pass a value to the radio
- disabled - To get a disabled radio
<radio class="gap" name="radio_name" val="1" v-model="bindModel" label="Um"></radio> <radio class="gap" name="radio_name" val="2" v-model="bindModel" label="Dois"></radio>1
IosSwitchComponent
Properties
- name - Custom name for the switch
- value - Pass a value to the switch
- disabled - To get a disabled switch
- trueValue - Default:
true
- falseValue - Default:
false
<ios-switch :value="bindValue" :disabled="disabledBind" @input="someMethod"></ios-switch>
Normal example
Disabled example
false
BackComponent
An arrow back button using vue router
Usage example
<back></back>
SpinnerComponent
Show a pulse spinner
Properties
- loading -
true
to set visible orfalse
to set hidden - color - Spinner color, ex:
#9d9d9d
- size
- margin
- radius
<spinner :loading="loadingBind"></spinner>
ListManagerComponent
Used to show a list when status is
success
and got itens, or a No records found message when the status is success
and the list size is zeroProperties
- status - Status can be
loading | success | failure
- count - Number with a list count
<list-manager :status="statusBind" :count="myList.length">Some html content</list-manager>
Nenhum registro encontrado
LoadManagerComponent
Used to show an spinner when status is
Properties
loading
, an error message when the status is
failure
or the content when status is success
Properties
- status - Status can be
loading | success | failure
<load-manager :status="statusBind">Some html content</load-manager>
InputContainerComponent
Container for label and input
Properties
- icon -
String
Icon label class. Ex:fa fa-user
- label -
String
Label for the input - asterisk -
Boolean
Show an asterisk after label iftrue
. Used to indicates required inputs
<input-container :icon="iconClass" :label="labalText" :asterisk="true"></input-container>
PaginatorComponent
1 de 5
Usage (pug)
paginator(:page='page', :pages='pages' @prev-page='prevPage' @next-page='nextPage' color='green')
BackgroundImageDirective
Add a background image to an element
<div class="thumb" v-background-image="url">
Url:
TextBindDirective
Bind some content to a html tag
export default { data () { return { myProp: 'Orange' } } }
<div v-text-bind="'myProp'"></div> //Outputs -> Orange
CurrencyFilter
Show a Number in currency format
export default { data () { return { amount: 35.6 } } }
<div>{{amount}}</div> // Outputs -> 35.6
<div>{{amount | currency}}</div> // Outputs -> R$35,60Alternatively you can pass a prefix
<div>{{amount | currency("$")}}</div> // Outputs -> $35,60
DateFilter
Show a formatted date
export default { data () { return { myDate: '2017-03-01T11:54:56.856Z' } } }
<div>{{myDate}}</div> // Outputs -> 2017-03-01T11:54:56.856Z
<div>{{myDate | date}}</div> // Outputs -> 01/03/17 11:54Alternatively you can pass a custom format
<div>{{myDate | date("dateTime")}}</div> // Outputs -> 01/03/2017 11:54:56Available formats
- default = 'DD/MM/YYYY HH:mm:ss'
- date = 'DD/MM/YYYY'
- time = 'HH:mm:ss'
- dateTime = 'DD/MM/YYYY HH:mm:ss'
- shortDate = 'DD/MM/YY'
- shortTime = 'HH:mm'
- shortDateTime = 'DD/MM/YY HH:mm'
- json = 'YYYY-MM-DDTHH:mm:ss'
TruncateFilter
Truncate a string
export default { data () { return { text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' } } }
<div>{{text | truncate}}</div> //Outputs -> Lorem ipsum dolor sit amet,...
Example:
Lorem ipsum dolor sit amet,...
VuexMapper
Mixin to map vuex in the components
1 - Install (Pass Vuex when install)
import Vue from 'vue' import Vuex from 'vuex' import PaliariVue from 'paliari-vue' Vue.use(PaliariVue, { Vuex })
2 - Then in your components
export default { vuex: { products: { state: ['list', 'status', 'page', 'pages', 'query'], getters: ['someGetter'] actions: ['fetchList', 'prevPage', 'nextPage'] mutations: ['someMutation'] }, session: { state: ['currentUser'] } }, }