vuetify-form-dialog
Version:
Form dialog for Vuetify
144 lines (91 loc) • 2.39 kB
Markdown
# vuetify-form-dialog
[](https://www.npmjs.com/package/vuetify-form-dialog)
## Usage
```HTML
<VFormDialog v-model="dialogVisible" @save="handleSave">
<v-text-field v-model="firstName" label="First name"></v-text-field>
<v-text-field v-model="lastName" label="Last name"></v-text-field>
</VFormDialog>
<v-btn @click="dialogVisible = true">Show</v-btn>
```
```javascript
import { VFormDialog } from 'vuetify-form-dialog'
export default {
data() {
return {
firstName: '',
lastName: '',
dialogVisible
}
},
components: {
VFormDialog
},
methods: {
handleSave() {
// Handle saving here
}
}
}
```
## API
### v-form-dialog
#### slots
- `default`
- `beforeButtons`
- `buttons`
- `afterButtons`
#### props
- `buttons-right` ***Boolean*** (*optional*)
- `cancel-button-color` ***String*** (*optional*)
- `cancel-button-text` ***String*** (*optional*) `default: 'Cancel'`
- `clear-button-color` ***String*** (*optional*)
- `clear-button-text` ***String*** (*optional*) `default: 'Clear'`
- `colored-buttons` ***Boolean*** (*optional*)
- `dark-title` ***Boolean*** (*optional*)
- `hide-cancel-icon` ***Boolean*** (*optional*)
- `hide-cancel-button` ***Boolean*** (*optional*)
- `hide-clear-button` ***Boolean*** (*optional*)
- `hide-save-button` ***Boolean*** (*optional*)
- `save-button-color` ***String*** (*optional*)
- `save-button-text` ***String*** (*optional*) `default: 'Save'`
- `title` ***String*** (*optional*)
- `title-color` ***String*** (*optional*) `default: 'primary'`
- `value` ***Boolean*** (*optional*) `default: true`
#### data
- `formValid`
**initial value:** `false`
#### events
- `clear`
#### methods
- `handleClear()`
## Installation
```
npm install vuetify-form-dialog
```
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
### Update the API section of README.md with generated documentation
```
npm run doc:build
```