feat(form-item): label=false to hide label area

This commit is contained in:
07akioni 2021-02-01 13:45:46 +08:00
parent 8cc44dd656
commit 0c20f4b200
6 changed files with 14 additions and 8 deletions

View File

@ -25,6 +25,7 @@
--> -->
<n-form-item <n-form-item
ignore-path-change ignore-path-change
:label="false"
:path="`dynamicInputValue[${index}].name`" :path="`dynamicInputValue[${index}].name`"
:rule="dynamicInputRule" :rule="dynamicInputRule"
> >
@ -40,6 +41,7 @@
<div style="height: 34px; line-height: 34px; margin: 0 8px;">=</div> <div style="height: 34px; line-height: 34px; margin: 0 8px;">=</div>
<n-form-item <n-form-item
ignore-path-change ignore-path-change
:label="false"
:path="`dynamicInputValue[${index}].value`" :path="`dynamicInputValue[${index}].value`"
:rule="dynamicInputRule" :rule="dynamicInputRule"
> >

View File

@ -22,6 +22,7 @@
--> -->
<n-form-item <n-form-item
ignore-path-change ignore-path-change
:label="false"
:path="`dynamicInputValue[${index}].name`" :path="`dynamicInputValue[${index}].name`"
:rule="dynamicInputRule" :rule="dynamicInputRule"
> >
@ -37,6 +38,7 @@
<div style="height: 34px; line-height: 34px; margin: 0 8px;">=</div> <div style="height: 34px; line-height: 34px; margin: 0 8px;">=</div>
<n-form-item <n-form-item
ignore-path-change ignore-path-change
:label="false"
:path="`dynamicInputValue[${index}].value`" :path="`dynamicInputValue[${index}].value`"
:rule="dynamicInputRule" :rule="dynamicInputRule"
> >

View File

@ -45,7 +45,7 @@ import {
export const formItemProps = { export const formItemProps = {
...(useTheme.props as ThemeProps<FormTheme>), ...(useTheme.props as ThemeProps<FormTheme>),
label: String, label: String as PropType<string | false>,
labelWidth: [Number, String] as PropType<string | number>, labelWidth: [Number, String] as PropType<string | number>,
labelStyle: [String, Object] as PropType<CSSProperties | string>, labelStyle: [String, Object] as PropType<CSSProperties | string>,
labelAlign: String as PropType<LabelAlign>, labelAlign: String as PropType<LabelAlign>,
@ -369,7 +369,8 @@ export default defineComponent({
'n-form-item', 'n-form-item',
[ [
`n-form-item--${this.mergedSize}-size`, `n-form-item--${this.mergedSize}-size`,
`n-form-item--${this.mergedLabelPlacement}-labelled` `n-form-item--${this.mergedLabelPlacement}-labelled`,
this.label === false && 'n-form-item--no-label'
] ]
]} ]}
style={this.cssVars as CSSProperties} style={this.cssVars as CSSProperties}

View File

@ -65,6 +65,12 @@ export default cB('form-item', {
"feedback"; "feedback";
grid-template-rows: var(--label-height) 1fr; grid-template-rows: var(--label-height) 1fr;
`, [ `, [
cM('no-label', `
grid-template-areas:
"blank"
"feedback";
grid-template-rows: 1fr;
`),
cB('form-item-label', { cB('form-item-label', {
display: 'flex', display: 'flex',
alignItems: 'flex-end' alignItems: 'flex-end'

5
src/shims-vue.d.ts vendored
View File

@ -1,5 +0,0 @@
declare module '*.vue' {
import { defineComponent } from 'vue'
const component: ReturnType<typeof defineComponent>
export default component
}

View File

@ -413,7 +413,7 @@
- [x] vshow (maybe create a vue pr) - [x] vshow (maybe create a vue pr)
- [x] jsx focusin out (waiting for vue update) - [x] jsx focusin out (waiting for vue update)
- [ ] inject key & value in type - [ ] inject key & value in type
- [ ] form item no label css - [x] form item no label css
- [x] unify treemate ignored - [x] unify treemate ignored
- [ ] fix menu extra - [ ] fix menu extra