Skip to content

Checkbox: add compact size #15897

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Checkbox: add compact size #15897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions examples/docs/en-US/checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,11 @@ Checkbox with button styles.
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="compact" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
Expand All @@ -186,6 +191,7 @@ Checkbox with button styles.
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
checkboxGroup5: ['Shanghai'],
cities: cityOptions
};
}
Expand Down Expand Up @@ -219,6 +225,12 @@ Checkbox with button styles.
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="compact" disabled>
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>

<script>
Expand All @@ -230,7 +242,8 @@ Checkbox with button styles.
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
checkboxGroup2: [],
checkboxGroup3: []
};
}
}
Expand All @@ -247,7 +260,7 @@ Checkbox with button styles.
| 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, only works when `border` is true | string | medium / small / mini / compact | — |
| name | native 'name' attribute | string | — | — |
| checked | if the Checkbox is checked | boolean | — | false |
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
Expand All @@ -261,7 +274,7 @@ Checkbox with button styles.
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | binding value | array | — | — |
|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini / compact | — |
| disabled | whether the nesting checkboxes are disabled | boolean | — | false |
| min | minimum number of checkbox checked | number | — | — |
| max | maximum number of checkbox checked | number | — | — |
Expand Down
19 changes: 16 additions & 3 deletions examples/docs/es/checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,11 @@ Checkbox con estilo tipo Botón.
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="compact" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
Expand All @@ -186,6 +191,7 @@ Checkbox con estilo tipo Botón.
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
checkboxGroup5: ['Shanghai'],
cities: cityOptions
};
}
Expand Down Expand Up @@ -219,6 +225,12 @@ Checkbox con estilo tipo Botón.
<el-checkbox label="Opción2" border></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="compact" disabled>
<el-checkbox label="Opción1" border></el-checkbox>
<el-checkbox label="Opción2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>

<script>
Expand All @@ -230,7 +242,8 @@ Checkbox con estilo tipo Botón.
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
checkboxGroup2: [],
checkboxGroup3: []
};
}
}
Expand All @@ -247,7 +260,7 @@ Checkbox con estilo tipo Botón.
| 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, sólo funciona si `border` es true | string | medium / small / mini / compact | — |
| name | atributo `name` nativo | string | — | — |
| checked | especifica si el Checkbox está marcado | boolean | — | false |
| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false |
Expand All @@ -261,7 +274,7 @@ Checkbox con estilo tipo Botón.
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
| ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
| 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 | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini / compact | — |
| 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 | — | — |
Expand Down
19 changes: 16 additions & 3 deletions examples/docs/fr-FR/checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,11 @@ Des checkbox avec une apparence de bouton.
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="compact" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
Expand All @@ -186,6 +191,7 @@ Des checkbox avec une apparence de bouton.
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
checkboxGroup5: ['Shanghai'],
cities: cityOptions
};
}
Expand Down Expand Up @@ -219,6 +225,12 @@ Des checkbox avec une apparence de bouton.
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="compact" disabled>
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>

<script>
Expand All @@ -230,7 +242,8 @@ Des checkbox avec une apparence de bouton.
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
checkboxGroup2: [],
checkboxGroup3: []
};
}
}
Expand All @@ -247,7 +260,7 @@ Des checkbox avec une apparence de bouton.
| 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, ne marche que si `border` est 'true' | string | medium / small / mini / compact | — |
| name | Attribut 'name' natif. | string | — | — |
| checked | Si la checkbox est cochée. | boolean | — | false |
| indeterminate | Identique à `indeterminate` dans les checkbox natives. | boolean | — | false |
Expand All @@ -261,7 +274,7 @@ Des checkbox avec une apparence de bouton.
| Attribut | Description | Type | Options | Défaut|
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | La valeur liée. | array | — | — |
|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini | — |
|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini / compact | — |
| 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 | — | — |
Expand Down
19 changes: 16 additions & 3 deletions examples/docs/zh-CN/checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,11 @@
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="compact" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
Expand All @@ -185,6 +190,7 @@
checkboxGroup2: ['上海'],
checkboxGroup3: ['上海'],
checkboxGroup4: ['上海'],
checkboxGroup5: ['上海'],
cities: cityOptions
};
}
Expand Down Expand Up @@ -218,6 +224,12 @@
<el-checkbox label="备选项2" border></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="compact" disabled>
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>

<script>
Expand All @@ -229,7 +241,8 @@
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
checkboxGroup2: [],
checkboxGroup3: []
};
}
}
Expand All @@ -246,7 +259,7 @@
| false-label | 没有选中时的值 | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| border | 是否显示边框 | boolean | — | false |
| size | Checkbox 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
| size | Checkbox 的尺寸，仅在 border 为真时有效 | string | medium / small / mini / compact | — |
| name | 原生 name 属性 | string | — | — |
| checked | 当前是否勾选 | boolean | — | false |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
Expand All @@ -260,7 +273,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 绑定值 | array | — | — |
| size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — |
| size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini / compact | — |
| disabled | 是否禁用 | boolean | — | false |
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
Expand Down
25 changes: 25 additions & 0 deletions packages/theme-chalk/src/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,26 @@
}
}
}

&.el-checkbox--compact {
padding: $--checkbox-bordered-compact-padding;
border-radius: $--button-compact-border-radius;
height: $--checkbox-bordered-compact-height;

.el-checkbox__label {
line-height: 12px;
font-size: $--button-compact-font-size;
}

.el-checkbox__inner {
height: $--checkbox-bordered-compact-input-height;
width: $--checkbox-bordered-compact-input-width;
&::after {
height: 6px;
width: 2px;
}
}
}
}

@include e(input) {
Expand Down Expand Up @@ -352,6 +372,11 @@
@include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
}
}
@include m(compact) {
.el-checkbox-button__inner {
@include button-size($--button-compact-padding-vertical, $--button-compact-padding-horizontal, $--button-compact-font-size, 0);
}
}
}

@include b(checkbox-group) {
Expand Down
6 changes: 6 additions & 0 deletions packages/theme-chalk/src/common/var.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,8 @@ $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
/// padding||Spacing|3
$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
/// padding||Spacing|3
$--checkbox-bordered-compact-padding: 2px 13px 2px 10px !default;
$--checkbox-bordered-medium-input-height: 14px !default;
$--checkbox-bordered-medium-input-width: 14px !default;
/// height||Other|4
Expand All @@ -201,6 +203,10 @@ $--checkbox-bordered-mini-input-height: 12px !default;
$--checkbox-bordered-mini-input-width: 12px !default;
/// height||Other|4
$--checkbox-bordered-mini-height: 28px !default;
$--checkbox-bordered-compact-input-height: 12px !default;
$--checkbox-bordered-compact-input-width: 12px !default;
/// height||Other|4
$--checkbox-bordered-compact-height: 26px !default;

/// color||Color|0
$--checkbox-button-checked-background-color: $--color-primary !default;
Expand Down