mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
feat(radio, checkbox): label-padding customization
This commit is contained in:
07akioni
parent
1cb65cd4b8
commit
615fc3e107
@ -4,44 +4,44 @@ Use checkbox with grid.
|
||||
|
||||
```html
|
||||
<n-checkbox-group v-model:value="value">
|
||||
<n-row :gutter="[0, 8]">
|
||||
<n-col :span="12">
|
||||
<n-grid :y-gap="8" :cols="2">
|
||||
<n-gi>
|
||||
<n-checkbox value="Prosperity" label="Prosperity" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Democracy" label="Democracy" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Civility" label="Civility" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Harmony" label="Harmony" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Freedom" label="Freedom" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Equality" label="Equality" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Justice" label="Justice" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Rule of Law" label="Rule of Law" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Patriotism" label="Patriotism" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Dedication" label="Dedication" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Integrity" label="Integrity" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Friendship" label="Friendship" />
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-checkbox-group>
|
||||
```
|
||||
|
||||
|
||||
@ -4,44 +4,44 @@
|
||||
|
||||
```html
|
||||
<n-checkbox-group v-model:value="value">
|
||||
<n-row :gutter="[0, 8]">
|
||||
<n-col :span="12">
|
||||
<n-grid :y-gap="8" :cols="2">
|
||||
<n-gi>
|
||||
<n-checkbox value="Prosperity" label="富强" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Democracy" label="民主" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Civility" label="文明" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Harmony" label="和谐" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Freedom" label="自由" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Equality" label="平等" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Justice" label="公正" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Rule of Law" label="法制" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Patriotism" label="爱国" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Dedication" label="敬业" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Integrity" label="诚信" />
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-checkbox value="Friendship" label="友善" />
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-checkbox-group>
|
||||
```
|
||||
|
||||
|
||||
@ -194,6 +194,7 @@ export default defineComponent({
|
||||
checkMarkColorDisabledChecked,
|
||||
colorDisabledChecked,
|
||||
borderDisabledChecked,
|
||||
labelPadding,
|
||||
[createKey('fontSize', mergedSize)]: fontSize,
|
||||
[createKey('size', mergedSize)]: size
|
||||
}
|
||||
@ -219,7 +220,8 @@ export default defineComponent({
|
||||
'--check-mark-color': checkMarkColor,
|
||||
'--check-mark-color-disabled': checkMarkColorDisabled,
|
||||
'--check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
|
||||
'--font-size': fontSize
|
||||
'--font-size': fontSize,
|
||||
'--label-padding': labelPadding
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@ -23,6 +23,7 @@ import iconSwitchTransition from '../../../_styles/transitions/icon-switch'
|
||||
// --check-mark-color-disabled-checked
|
||||
// --border-radius
|
||||
// --font-size
|
||||
// --label-padding
|
||||
export default c([
|
||||
cB('checkbox', `
|
||||
line-height: 1;
|
||||
@ -184,7 +185,7 @@ export default c([
|
||||
color: var(--text-color);
|
||||
transition: color .3s var(--bezier);
|
||||
user-select: none;
|
||||
padding: 0 8px;
|
||||
padding: var(--label-padding);
|
||||
`, [
|
||||
c('&:empty', {
|
||||
display: 'none'
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export default {
|
||||
sizeSmall: '14px',
|
||||
sizeMedium: '16px',
|
||||
sizeLarge: '18px'
|
||||
sizeLarge: '18px',
|
||||
labelPadding: '0 8px'
|
||||
}
|
||||
|
||||
@ -34,6 +34,7 @@ export default defineComponent({
|
||||
textColorDisabled,
|
||||
dotColorActive,
|
||||
dotColorDisabled,
|
||||
labelPadding,
|
||||
[createKey('fontSize', size)]: fontSize,
|
||||
[createKey('radioSize', size)]: radioSize
|
||||
}
|
||||
@ -52,7 +53,8 @@ export default defineComponent({
|
||||
'--font-size': fontSize,
|
||||
'--radio-size': radioSize,
|
||||
'--text-color': textColor,
|
||||
'--text-color-disabled': textColorDisabled
|
||||
'--text-color-disabled': textColorDisabled,
|
||||
'--label-padding': labelPadding
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@ -15,6 +15,7 @@ import { c, cE, cM, cNotM, cB } from '../../../_utils/cssr'
|
||||
// --radio-size
|
||||
// --text-color
|
||||
// --text-color-disabled
|
||||
// --label-padding
|
||||
export default cB('radio', `
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
@ -72,7 +73,7 @@ export default cB('radio', `
|
||||
]),
|
||||
cE('label', `
|
||||
color: var(--text-color);
|
||||
padding: 0 8px;
|
||||
padding: var(--label-padding);
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
transition: color .3s var(--bezier);
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export default {
|
||||
radioSizeSmall: '14px',
|
||||
radioSizeMedium: '16px',
|
||||
radioSizeLarge: '18px'
|
||||
radioSizeLarge: '18px',
|
||||
labelPadding: '0 8px'
|
||||
}
|
||||
|
||||
@ -174,6 +174,7 @@ export const themeOverridesDark: GlobalThemeOverrides = {
|
||||
iconMarginLarge: '12px'
|
||||
},
|
||||
Checkbox: {
|
||||
labelPadding: '0 8px 0 12px',
|
||||
sizeMedium: '16px',
|
||||
fontSizeMedium: '16px',
|
||||
borderRadius: '4px',
|
||||
@ -475,6 +476,7 @@ export const themeOverridesDark: GlobalThemeOverrides = {
|
||||
textColorCircle: '#666666'
|
||||
},
|
||||
Radio: {
|
||||
labelPadding: '0 8px 0 12px',
|
||||
fontSizeMedium: '16px',
|
||||
radioSizeMedium: '16px',
|
||||
dotColorDisabled: '#5B5B5B',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user