vuetify-components

UI components for Vuetify.js

Installation

npm install --save vuetify-components

or

yarn add vuetify-components

import Vue from 'vue'
import VuetifyComponents from 'vuetify-components'
import 'vuetify-components/src/stylus/main.styl'

Vue.use(VuetifyComponents)

Usage

Once installed, it can be used in a template as simply as:

MessageBox

Examples

<v-message
        v-model="message"
        text="Show Message!"
        :timeout="5000"
        color="success"
        @close="closeHandler">
</v-message>

Properties

| Name | Type | Default Value | Description | | --------------- | ------- | ------------- | --------------------------------------- | | display (model) | Boolean | false | Controls visibility. | | text | string | | Sets text. | | timeout | Number | 0 | Time (in milliseconds) to wait until snackbar is automatically hidden. Use 0 to keep open indefinitely. | | color | string | info | Applies specified color to the control. | | mode | string | vertical | Sets snackbar display mode. Available options are vertical and multi-line. | | closeText | string | Close | Sets the text of the button. |

Events

| Name | Arguments | Description | | -----------| -------------------| ------------------------ | | close | display (Boolean) | The close event |

ConfirmBox

Examples

<v-confirm-box
        v-model="confirmBox"
        title="Confirm Box Title"
        text="Confirm Box Text"
        :width="500"
        :cancel="cancelHandler"
        :ok="okHandler">
</v-confirm-box>

Properties

| Name | Type | Default Value | Description | | --------------- | -------- | ------------- | ------------------------------------------------ | | display (model) | Boolean | false | Controls visibility. | | title | string | | Sets title. | | text | string | | Sets text. | | width | Number | 400 | Sets the confirm box width. | | cancelText | string | CANCEL | Sets the text of the cancel button. | | okText | string | OK | Sets the text of the ok button. | | cancel | Function | | Sets the handler when the cancel button clicked. | | ok | Function | | Sets the handler when the ok button clicked. | | danger | Boolean | true | Sets the color of the ok button to danger. |

Events

| Name | Arguments | Description | | -----------| -------------------| ------------------------ | | hide | display (Boolean) | The hide event |

StaticTextField

Examples

<v-static-text-field
        :loading="loading"
        label="static text field"
        value="value"
        hint="hint"
        :counter="20"
        :persistentHint="true">
</v-static-text-field>

Properties

| Name | Type | Default Value | Description | | -------------- | -------- | ------------- | ------------------------------------------------ | | label | string | | Sets input label. | | value | string | | Input value. | | hint | string | | Hint text. | | counter | Number | | Creates counter for input length. | | persistentHint | Boolean | | Forces hint to always be visible. | | loading | Boolean | | Displays linear progress bar. | | progressColor | string | primary | Applies specified color to the progress control. | | progressWidth | Number | 3 | Sets the stroke of the circle in pixels/ |

SwitchField

Examples

<v-switch-field
        label="readonly switch field"
        :loading="loading"
        value="value"
        :readonly="true"
        :checked="false">
</v-switch-field>

Properties

| Name | Type | Default Value | Description | | ------------- | -------- | ------------- | -------------------------------------------------- | | label | string | | Sets input label. | | text | string | | Sets the text of the selection control component. | | loading | Boolean | | Displays linear progress bar. | | disabled | Boolean | | Input is disabled. | | value (model) | Boolean | | Sets the value of the selection control component. | | readonly | Boolean | false | Puts input in readonly state. | | progressColor | string | primary | Applies specified color to the progress control. | | progressWidth | Number | 3 | Sets the stroke of the circle in pixels/ |

Events

| Name | Arguments | Description | | -----------| -------------------| ------------------------------------------------------ | | change | checked (Boolean) | Emitted when the input is changed by user interaction. |