naive-ui/demo/documentation/components/form/enUS/inline.md

47 lines
987 B
Markdown
Raw Normal View History

2019-11-01 19:01:55 +08:00
# Inline Form
```html
<n-form
inline
:label-width="80"
2019-11-06 13:48:05 +08:00
:model="formValue"
2019-11-01 19:01:55 +08:00
ref="form"
>
<n-form-item label="Name" path="user.name" required>
<n-input v-model="formValue.user.name" placeholder="Input Name" />
2019-11-01 19:01:55 +08:00
</n-form-item>
<n-form-item label="Age" path="user.age" required>
<n-input placeholder="Input Age" v-model="formValue.user.age"/>
2019-11-01 19:01:55 +08:00
</n-form-item>
<n-form-item label="Phone" path="phone" required>
2019-11-01 19:01:55 +08:00
<n-input placeholder="Phone Number" v-model="formValue.phone"/>
</n-form-item>
<n-form-item v-model="formValue.phone">
<n-button @click="handleValidateClick">Validate</n-button>
</n-form-item>
</n-form>
<pre>
{{ JSON.stringify(formValue, 0, 2) }}
</pre>
```
```js
export default {
data () {
return {
formValue: {
user: {
name: '',
age: ''
},
2019-11-01 19:01:55 +08:00
phone: ''
}
}
},
methods: {
handleValidateClick (e) {
e.preventDefault()
this.$refs.form.validate()
}
}
}
```