mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-21 02:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: checkbox support size prop both border or not (#3099)

Browse Source 
* style: checkbox support size prop both border or not

* feat: update

* style: update
This commit is contained in:
kooriookami 2021-08-27 20:28:56 +08:00 committed by GitHub
parent 0617cdf9f8
commit 5f87831710
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 233 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/components/checkbox/src/checkbox.vue
View File

@ -3,7 +3,7 @@
:id="id"
class="el-checkbox"
:class="[
border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
checkboxSize ? 'el-checkbox--' + checkboxSize : '',
{ 'is-disabled': isDisabled },
{ 'is-bordered': border },
{ 'is-checked': isChecked }

39
packages/theme-chalk/src/checkbox.scss
View File

@ -6,13 +6,24 @@
@import 'mixins/_button';
@import 'mixins/utils';
$--checkbox-height: () !default;
$--checkbox-height: map.merge(
(
'default': 40px,
'medium': 36px,
'small': 32px,
'mini': 28px,
),
$--checkbox-height
);
$--checkbox-bordered-padding: () !default;
$--checkbox-bordered-padding: map.merge(
(
'default': 9px 20px 9px 10px,
'medium': 7px 20px 7px 10px,
'small': 5px 15px 5px 10px,
'mini': 3px 15px 3px 10px,
'default': 0 20px 0 10px,
'medium': 0 20px 0 10px,
'small': 0 15px 0 10px,
'mini': 0 15px 0 10px,
),
$--checkbox-bordered-padding
);
@ -33,17 +44,6 @@ $--checkbox-bordered-input-width: map.merge(
$--checkbox-bordered-input-width
);
$--checkbox-bordered-height: () !default;
$--checkbox-bordered-height: map.merge(
(
'default': 40px,
'medium': 36px,
'small': 32px,
'mini': 28px,
),
$--checkbox-bordered-height
);
@include b(checkbox) {
@include set-component-css-var('checkbox', $--checkbox);
}
@ -59,13 +59,19 @@ $--checkbox-bordered-height: map.merge(
white-space: nowrap;
user-select: none;
margin-right: 30px;
height: map.get($--checkbox-height, 'default');
@each $size in (medium, small, mini) {
&.#{$namespace}-checkbox--#{$size} {
height: map.get($--checkbox-height, $size);
}
}
@include when(bordered) {
padding: map.get($--checkbox-bordered-padding, 'default');
border-radius: var(--el-border-radius-base);
border: var(--el-border-base);
box-sizing: border-box;
height: map.get($--checkbox-bordered-height, 'default');
&.is-checked {
border-color: var(--el-color-primary);
@ -84,7 +90,6 @@ $--checkbox-bordered-height: map.merge(
&.#{$namespace}-checkbox--#{$size} {
padding: map.get($--checkbox-bordered-padding, $size);
border-radius: map.get($--button-border-radius, $size);
height: map.get($--checkbox-bordered-height, $size);
.#{$namespace}-checkbox__label {
font-size: map.get($--button-font-size, $size);

50
website/docs/en-US/checkbox.md
View File

@ -10,14 +10,35 @@ Checkbox can be used alone to switch between two states.
```html
<template>
<!-- `checked` should be true or false -->
<el-checkbox v-model="checked">Option</el-checkbox>
<div>
<el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
<el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
<el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
<el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checked: true
checked1: true,
checked2: false,
checked3: false,
checked4: false,
checked5: false,
checked6: false,
checked7: false,
checked8: false,
};
}
};
@ -29,9 +50,23 @@ Checkbox can be used alone to switch between two states.
export default defineComponent({
setup() {
const checked = ref(true);
const checked1 = ref(true);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
const checked6 = ref(false);
const checked7 = ref(false);
const checked8 = ref(false);
return {
checked,
checked1,
checked2,
checked3,
checked4,
checked5,
checked6,
checked7,
checked8,
};
},
});
@ -137,7 +172,6 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
```html
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
@ -402,7 +436,7 @@ export default defineComponent({
| false-label | value of the Checkbox if it's not checked | string / number | — | — |
| disabled | whether the Checkbox is disabled | boolean | — | false |
| border | whether to add a border around Checkbox | boolean | — | false |
| size | size of the Checkbox, only works when `border` is true | string | medium / small / mini | — |
| size | size of the Checkbox | string | medium / small / mini | — |
| name | native 'name' attribute | string | — | — |
| checked | if the Checkbox is checked | boolean | — | false |
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
@ -416,7 +450,7 @@ export default defineComponent({
| Attribute | Description | Type | Accepted Values | Default|
|---------- |-------- |---------- |------------- |-------- |
| model-value / v-model | binding value | array | — | — |
|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
|size | size of checkbox | string | medium / small / mini | — |
| disabled | whether the nesting checkboxes are disabled | boolean | — | false |
| min | minimum number of checkbox checked | number | — | — |
| max | maximum number of checkbox checked | number | — | — |

50
website/docs/es/checkbox.md
View File

@ -10,14 +10,35 @@ Checkbox puede ser usado para alternar entre dos estados.
```html
<template>
<!-- `checked` debe ser true o false -->
<el-checkbox v-model="checked">Opción</el-checkbox>
<div>
<el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
<el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
<el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
<el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checked: true
checked1: true,
checked2: false,
checked3: false,
checked4: false,
checked5: false,
checked6: false,
checked7: false,
checked8: false,
};
}
};
@ -29,9 +50,23 @@ Checkbox puede ser usado para alternar entre dos estados.
export default defineComponent({
setup() {
const checked = ref(true);
const checked1 = ref(true);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
const checked6 = ref(false);
const checked7 = ref(false);
const checked8 = ref(false);
return {
checked,
checked1,
checked2,
checked3,
checked4,
checked5,
checked6,
checked7,
checked8,
};
},
});
@ -136,7 +171,6 @@ La propiedad `indeterminate` puede ser usada para generar el efecto de marcar to
```html
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
@ -401,7 +435,7 @@ export default defineComponent({
| false-label | valor del Checkbox si no está marcado | string / number | — | — |
| disabled | especifica si el Checkbox está deshabilitado | boolean | — | false |
| border | especifica si agrega un borde alrededor del Checkbox | boolean | — | false |
| size | tamaño del Checkbox, sólo funciona si `border` es true | string | medium / small / mini | — |
| size | tamaño del Checkbox | string | medium / small / mini | — |
| name | atributo `name` nativo | string | — | — |
| checked | especifica si el Checkbox está marcado | boolean | — | false |
| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false |
@ -415,7 +449,7 @@ export default defineComponent({
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
| ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
| model-value / v-model | valor enlazado | array | — | — |
| size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — |
| size | size of checkbox | string | medium / small / mini | — |
| disabled | especifica si los checkboxes anidados están deshabilitados | boolean | — | false |
| min | cantidad mínima de checkboxes que deben ser marcados | number | — | — |
| max | cantidad máxima de checkboxes que pueden ser marcados | number | — | — |

50
website/docs/fr-FR/checkbox.md
View File

@ -10,14 +10,35 @@ Checkbox peut être utilisé seul pour switcher entre deux états.
```html
<template>
<!-- `checked` should be true or false -->
<el-checkbox v-model="checked">Option</el-checkbox>
<div>
<el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
<el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
<el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
<el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checked: true
checked1: true,
checked2: false,
checked3: false,
checked4: false,
checked5: false,
checked6: false,
checked7: false,
checked8: false,
};
}
};
@ -29,9 +50,23 @@ Checkbox peut être utilisé seul pour switcher entre deux états.
export default defineComponent({
setup() {
const checked = ref(true);
const checked1 = ref(true);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
const checked6 = ref(false);
const checked7 = ref(false);
const checked8 = ref(false);
return {
checked,
checked1,
checked2,
checked3,
checked4,
checked5,
checked6,
checked7,
checked8,
};
},
});
@ -136,7 +171,6 @@ La propriété `indeterminate` permet de réaliser un effet "Sélectionner tout"
```html
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Sélectionner tout</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
@ -401,7 +435,7 @@ export default defineComponent({
| false-label | Valeur de la checkbox si non cochée. | string / number | — | — |
| disabled | Désactive la checkbox. | boolean | — | false |
| border | Ajoute une bordure à la checkbox. | boolean | — | false |
| size | taille de la checkbox, ne marche que si `border` est 'true' | string | medium / small / mini | — |
| size | taille de la checkbox | string | medium / small / mini | — |
| name | Attribut 'name' natif. | string | — | — |
| checked | Si la checkbox est cochée. | boolean | — | false |
| indeterminate | Identique à `indeterminate` dans les checkbox natives. | boolean | — | false |
@ -415,7 +449,7 @@ export default defineComponent({
| Attribut | Description | Type | Options | Défaut|
|---------- |-------- |---------- |------------- |-------- |
| model-value / v-model | La valeur liée. | array | — | — |
|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini | — |
|size | size of checkbox | string | medium / small / mini | — |
| disabled | Si les checkbox imbriquées sont désactivées. | boolean | — | false |
| min | Nombre minimum de checkbox cochées. | number | — | — |
| max | Nombre maximum de checkbox cochées. | number | — | — |

66
website/docs/jp/checkbox.md
View File

@ -10,14 +10,35 @@ checkbox単独で使用して2つの状態を切り替えることができま
```html
<template>
<!-- `checked` should be true or false -->
<el-checkbox v-model="checked">Option</el-checkbox>
<div>
<el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
<el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
<el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
<el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checked: true
checked1: true,
checked2: false,
checked3: false,
checked4: false,
checked5: false,
checked6: false,
checked7: false,
checked8: false,
};
}
};
@ -29,25 +50,23 @@ checkbox単独で使用して2つの状態を切り替えることができま
export default defineComponent({
setup() {
const checked = ref(true);
const checked1 = ref(true);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
const checked6 = ref(false);
const checked7 = ref(false);
const checked8 = ref(false);
return {
checked,
};
},
});
</setup>
-->
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked = ref(true);
return {
checked,
checked1,
checked2,
checked3,
checked4,
checked5,
checked6,
checked7,
checked8,
};
},
});
@ -152,7 +171,6 @@ checkboxを無効にした状態。
```html
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
@ -417,7 +435,7 @@ export default defineComponent({
| false-label | checkboxがチェックされていない場合のcheckboxの値 | string / number | — | — |
| disabled | checkboxを無効にするかどうか | boolean | — | false |
| border | checkboxの周りにボーダーを追加するかどうか | boolean | — | false |
| size | checkboxのサイズ、`border` がtrueの場合にのみ動作します。 | string | medium / small / mini | — |
| size | checkboxのサイズ | string | medium / small / mini | — |
| name | ネイティブ 'name' 属性 | string | — | — |
| checked | checkboxがチェックされているかどうか | boolean | — | false |
| indeterminate | ネイティブcheckboxの `indeterminate` と同じ | boolean | — | false |
@ -431,7 +449,7 @@ export default defineComponent({
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
| model-value / v-model | バインディング値 | array | — | — |
|size | checkboxのボタンや枠線の大きさ | string | medium / small / mini | — |
|size | checkboxの大きさ | string | medium / small / mini | — |
| disabled | ネスティングcheckboxを無効にするかどうか | boolean | — | false |
| min | checkboxの最小チェック数 | number | — | — |
| max | checkboxの最大チェック数 | number | — | — |

50
website/docs/zh-CN/checkbox.md
View File

@ -9,14 +9,35 @@
```html
<template>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">备选项</el-checkbox>
<div>
<el-checkbox v-model="checked1" label="备选项1"></el-checkbox>
<el-checkbox v-model="checked2" label="备选项2"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked3" label="备选项1" size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="备选项2" size="medium"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked5" label="备选项1" size="small"></el-checkbox>
<el-checkbox v-model="checked6" label="备选项2" size="small"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked7" label="备选项1" size="mini"></el-checkbox>
<el-checkbox v-model="checked8" label="备选项2" size="mini"></el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checked: true
checked1: true,
checked2: false,
checked3: false,
checked4: false,
checked5: false,
checked6: false,
checked7: false,
checked8: false,
};
}
};
@ -28,9 +49,23 @@
export default defineComponent({
setup() {
const checked = ref(true);
const checked1 = ref(true);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
const checked6 = ref(false);
const checked7 = ref(false);
const checked8 = ref(false);
return {
checked,
checked1,
checked2,
checked3,
checked4,
checked5,
checked6,
checked7,
checked8,
};
},
});
@ -135,7 +170,6 @@
```html
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
@ -402,7 +436,7 @@
| false-label | 没有选中时的值 | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| border | 是否显示边框 | boolean | — | false |
| size | Checkbox 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
| size | Checkbox 的尺寸 | string | medium / small / mini | — |
| name | 原生 name 属性 | string | — | — |
| checked | 当前是否勾选 | boolean | — | false |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
@ -416,7 +450,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| model-value / v-model | 绑定值 | array | — | — |
| size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — |
| size | 多选框组尺寸 | string | medium / small / mini | — |
| disabled | 是否禁用 | boolean | — | false |
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |