mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
feat(input): styles as a form item
This commit is contained in:
07akioni
parent
31abde5a1e
commit
ccd5a35eed
128
demo/documentation/components/form/enUS/basic.md
Normal file
128
demo/documentation/components/form/enUS/basic.md
Normal file
@ -0,0 +1,128 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-form :model="model" ref="form">
|
||||
<n-row :gutter="[28, 0]">
|
||||
<n-col :span="12">
|
||||
<n-form-item label="Trigger Name" path="name" required>
|
||||
<n-input placeholder="Trigger Name" v-model="model.name" />
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row :gutter="[0, 0]">
|
||||
<n-col :span="24">
|
||||
<n-form-item label="Description" path="description" required>
|
||||
<n-input placeholder="Description" v-model="model.description" />
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row :gutter="[28, 0]">
|
||||
<n-col :span="12">
|
||||
<n-form-item label="Trigger Type" path="type" required>
|
||||
<n-select placeholder="Trigger Type" :options="generalOptions" v-model="model.type"/>
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-form-item label="Start Time" path="startTime" required>
|
||||
<n-date-picker type="datetime" v-model="model.startTime"/>
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row :gutter="[28, 0]">
|
||||
<n-col :span="12">
|
||||
<n-row :gutter="16">
|
||||
<n-col :span="12">
|
||||
<n-form-item label="Interval" path="interval.value" required>
|
||||
<n-input placeholder="Interval" v-model="model.interval.value"/>
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-form-item path="interval.unit" required>
|
||||
<n-select placeholder="Interval Unit" :options="generalOptions" v-model="model.interval.unit"/>
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row :gutter="[28, 0]">
|
||||
<n-col :span="12">
|
||||
<n-row :gutter="16">
|
||||
<n-col :span="12">
|
||||
<n-form-item label="Count" path="count" required>
|
||||
<n-input placeholder="Count" v-model="model.count"/>
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-form-item label="Location" path="location" required>
|
||||
<n-select placeholder="Location" :options="generalOptions" v-model="model.location"/>
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-row :gutter="16">
|
||||
<n-col :span="12">
|
||||
<n-form-item label="Status" path="status.value" required>
|
||||
<n-select placeholder="Status" :options="generalOptions" v-model="model.status.value"/>
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-form-item label="Type" path="status.type" required>
|
||||
<n-select placeholder="Type" :options="generalOptions" v-model="model.status.type"/>
|
||||
</n-form-item>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row :gutter="[0, 24]">
|
||||
<n-col :span="24">
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<n-button @click="handleValidateButtonClick" round type="primary">Validate</n-button>
|
||||
</div>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-form>
|
||||
|
||||
<pre>
|
||||
{{ JSON.stringify(model, 0, 2) }}
|
||||
</pre>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
model: {
|
||||
name: null,
|
||||
description: null,
|
||||
type: null,
|
||||
startTime: null,
|
||||
interval: {
|
||||
value: null,
|
||||
unit: null
|
||||
},
|
||||
count: null,
|
||||
location: null,
|
||||
status: {
|
||||
value: null,
|
||||
type: null
|
||||
}
|
||||
},
|
||||
generalOptions: [
|
||||
'groode',
|
||||
'veli good',
|
||||
'emazing',
|
||||
'lidiculous'
|
||||
].map(v => ({
|
||||
label: v,
|
||||
value: v
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleValidateButtonClick (e) {
|
||||
e.preventDefault()
|
||||
this.$refs.form.validate()
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -2,4 +2,5 @@
|
||||
<!--single-column-->
|
||||
```demo
|
||||
inline
|
||||
basic
|
||||
```
|
||||
@ -3,7 +3,7 @@
|
||||
<n-form
|
||||
inline
|
||||
:label-width="80"
|
||||
:value="formValue"
|
||||
:model="formValue"
|
||||
ref="form"
|
||||
>
|
||||
<n-form-item label="Name" path="user.name" required>
|
||||
|
||||
@ -138,22 +138,6 @@
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
// @include m(icon) {
|
||||
// @include m(left-icon) {
|
||||
|
||||
// @include e(icon) {
|
||||
// left: 0;
|
||||
// margin-left: 12px;
|
||||
// }
|
||||
// }
|
||||
// @include m(right-icon) {
|
||||
// @include e(icon) {
|
||||
// right: 0;
|
||||
// margin-right: 12px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@include m(split) {
|
||||
display: inline-flex;
|
||||
@include e(input) {
|
||||
@ -199,7 +183,7 @@
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
}
|
||||
color: map-get($--input-color, 'default');
|
||||
caret-color: $--input-caret-color;
|
||||
caret-color: map-get($--input-caret-color, 'default');
|
||||
background-color: transparent;
|
||||
&::placeholder {
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
@ -234,4 +218,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@include as-form-item {
|
||||
@include with-status(error) {
|
||||
@include b(input) {
|
||||
box-shadow: map-get($--input-box-shadow, 'error-default');
|
||||
&:hover {
|
||||
box-shadow: map-get($--input-box-shadow, 'error-hover');
|
||||
}
|
||||
@include m(focus) {
|
||||
box-shadow: map-get($--input-box-shadow, 'error-focus');
|
||||
}
|
||||
@include e(input, textarea) {
|
||||
caret-color: map-get($--input-caret-color, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,10 @@
|
||||
'default': $--n-secondary-text-color,
|
||||
'disabled': rgba(255, 255, 255, .2)
|
||||
) !global;
|
||||
$--input-caret-color: $--primary-6 !global;
|
||||
$--input-caret-color: (
|
||||
'default': $--primary-6,
|
||||
'error': $--error-6
|
||||
) !global;
|
||||
$--input-placeholder-color: (
|
||||
'default': rgba(255, 255, 255, .3),
|
||||
'disabled': rgba(255, 255, 255, .2)
|
||||
@ -18,6 +21,9 @@
|
||||
'default': inset 0 0 0 0 transparent,
|
||||
'hover': inset 0 0 0px 1px $--primary-6,
|
||||
'focus': (inset 0 0 0px 1px $--primary-6, 0 0 8px 0px change-color($--primary-6, $alpha: .3)),
|
||||
"disabled": inset 0 0 0 1px transparent
|
||||
"disabled": inset 0 0 0 1px transparent,
|
||||
"error-default": inset 0 0 0 1px $--error-6,
|
||||
"error-hover": inset 0 0 0 1px $--error-6,
|
||||
"error-focus": (inset 0 0 0 1px $--error-6, 0 0 8px 0px change-color($--error-6, $alpha: .3))
|
||||
) !global;
|
||||
}
|
||||
@ -3,7 +3,10 @@
|
||||
'default': $--n-secondary-text-color,
|
||||
'disabled': rgba(0, 0, 0, .3)
|
||||
) !global;
|
||||
$--input-caret-color: initial !global;
|
||||
$--input-caret-color: (
|
||||
'default': $--primary-6,
|
||||
'error': $--error-6
|
||||
) !global;
|
||||
$--input-placeholder-color: (
|
||||
"default": $--n-disabled-text-color,
|
||||
"disabled": $--n-disabled-text-color,
|
||||
@ -18,6 +21,9 @@
|
||||
"default": inset 0 0 0 1px $--n-border-color,
|
||||
"hover": inset 0 0 0 1px $--primary-5,
|
||||
"focus": (inset 0 0 0 1px $--primary-5, 0 0 0 2px change-color($--primary-5, $alpha: .3)),
|
||||
"disabled": inset 0 0 0 1px $--n-border-color
|
||||
"disabled": inset 0 0 0 1px $--n-border-color,
|
||||
"error-default": inset 0 0 0 1px $--error-6,
|
||||
"error-hover": inset 0 0 0 1px $--error-6,
|
||||
"error-focus": (inset 0 0 0 1px $--error-6, 0 0 0 2px change-color($--error-6, $alpha: .3)),
|
||||
) !global;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user