Skip to content

Commit 05fe6e6

Browse files
amedoraisland205
amedora
authored and
island205
committed
Button: add compact size (#15895)
* Button: add compact size * Docs: 極小 -> 极小
1 parent 3430835 commit 05fe6e6

File tree

6 files changed

+31
-8
lines changed

6 files changed

+31
-8
lines changed

‎examples/docs/en-US/button.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,28 +132,30 @@ Click the button to load data, then the button displays a loading state.
132132

133133
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
134134

135-
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
135+
:::demo Use attribute `size` to set additional sizes with `medium`, `small`, `mini` or `compact`.
136136

137137
```html
138138
<el-row>
139139
<el-button>Default</el-button>
140140
<el-button size="medium">Medium</el-button>
141141
<el-button size="small">Small</el-button>
142142
<el-button size="mini">Mini</el-button>
143+
<el-button size="compact">Compact</el-button>
143144
</el-row>
144145
<el-row>
145146
<el-button round>Default</el-button>
146147
<el-button size="medium" round>Medium</el-button>
147148
<el-button size="small" round>Small</el-button>
148149
<el-button size="mini" round>Mini</el-button>
150+
<el-button size="compact" round>Compact</el-button>
149151
</el-row>
150152
```
151153
:::
152154

153155
### Attributes
154156
| Attribute | Description | Type | Accepted values | Default |
155157
|---------- |-------- |---------- |------------- |-------- |
156-
| size | button size | string | medium / small / mini | — |
158+
| size | button size | string | medium / small / mini / compact | — |
157159
| type | button type | string | primary / success / warning / danger / info / text | — |
158160
| plain | determine whether it's a plain button | boolean | — | false |
159161
| round | determine whether it's a round button | boolean | — | false |

‎examples/docs/es/button.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,28 +132,30 @@ Cuando se hace clic en un botón para descargar datos, el botón muestra un esta
132132

133133
Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
134134

135-
:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` o `mini`.
135+
:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small`, `mini` o `compact`.
136136

137137
```html
138138
<el-row>
139139
<el-button>Default</el-button>
140140
<el-button size="medium">Medium</el-button>
141141
<el-button size="small">Small</el-button>
142142
<el-button size="mini">Mini</el-button>
143+
<el-button size="compact">Compact</el-button>
143144
</el-row>
144145
<el-row>
145146
<el-button round>Default</el-button>
146147
<el-button size="medium" round>Medium</el-button>
147148
<el-button size="small" round>Small</el-button>
148149
<el-button size="mini" round>Mini</el-button>
150+
<el-button size="compact" round>Compact</el-button>
149151
</el-row>
150152
```
151153
:::
152154

153155
### Atributos
154156
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
155157
| ----------- | --------------------------------------------- | ------- | -------------------------------------------------- | ----------- |
156-
| size | tamaño del botón | string | medium / small / mini | — |
158+
| size | tamaño del botón | string | medium / small / mini / compact | — |
157159
| type | tipo de botón | string | primary / success / warning / danger / info / text | — |
158160
| plain | determinar si es o no un botón plano | boolean | — | false |
159161
| round | determinar si es o no un botón redondo | boolean | — | false |

‎examples/docs/fr-FR/button.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,28 +132,30 @@ Cliquez sur le bouton pour charger des données et il affichera un état de char
132132

133133
En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios.
134134

135-
:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small` ou `mini`.
135+
:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small`, `mini` ou `compact`.
136136

137137
```html
138138
<el-row>
139139
<el-button>Défaut</el-button>
140140
<el-button size="medium">Medium</el-button>
141141
<el-button size="small">Small</el-button>
142142
<el-button size="mini">Mini</el-button>
143+
<el-button size="compact">Compact</el-button>
143144
</el-row>
144145
<el-row>
145146
<el-button round>Défaut</el-button>
146147
<el-button size="medium" round>Medium</el-button>
147148
<el-button size="small" round>Small</el-button>
148149
<el-button size="mini" round>Mini</el-button>
150+
<el-button size="compact" round>Compact</el-button>
149151
</el-row>
150152
```
151153
:::
152154

153155
### Attributs
154156
| Attribut | Description | Type | Valeurs acceptées | Défaut |
155157
|---------- |-------- |---------- |------------- |-------- |
156-
| size | Taille du bouton. | string | medium / small / mini | — |
158+
| size | Taille du bouton. | string | medium / small / mini / compact | — |
157159
| type | Type du bouton. | string | primary / success / warning / danger / info / text | — |
158160
| plain | Détermine si le bouton est plein. | boolean | — | false |
159161
| round | Détermine si le bouton est arrondi. | boolean | — | false |

‎examples/docs/zh-CN/button.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,28 +133,30 @@
133133

134134
Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
135135

136-
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
136+
:::demo 额外的尺寸：`medium`、`small`、`mini`、`compact`，通过设置`size`属性来配置它们。
137137

138138
```html
139139
<el-row>
140140
<el-button>默认按钮</el-button>
141141
<el-button size="medium">中等按钮</el-button>
142142
<el-button size="small">小型按钮</el-button>
143143
<el-button size="mini">超小按钮</el-button>
144+
<el-button size="compact">極小按钮</el-button>
144145
</el-row>
145146
<el-row>
146147
<el-button round>默认按钮</el-button>
147148
<el-button size="medium" round>中等按钮</el-button>
148149
<el-button size="small" round>小型按钮</el-button>
149150
<el-button size="mini" round>超小按钮</el-button>
151+
<el-button size="compact" round>极小按钮</el-button>
150152
</el-row>
151153
```
152154
:::
153155

154156
### Attributes
155157
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
156158
|---------- |-------- |---------- |------------- |-------- |
157-
| size | 尺寸 | string | medium / small / mini | — |
159+
| size | 尺寸 | string | medium / small / mini / compact | — |
158160
| type | 类型 | string | primary / success / warning / danger / info / text | — |
159161
| plain | 是否朴素按钮 | boolean | — | false |
160162
| round | 是否圆角按钮 | boolean | — | false |

‎packages/theme-chalk/src/button.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,12 @@
154154
padding: $--button-mini-padding-vertical;
155155
}
156156
}
157+
@include m(compact) {
158+
@include button-size($--button-compact-padding-vertical, $--button-compact-padding-horizontal, $--button-compact-font-size, $--button-compact-border-radius);
159+
@include when(circle) {
160+
padding: $--button-compact-padding-vertical;
161+
}
162+
}
157163
@include m(text) {
158164
border-color: transparent;
159165
color: $--color-primary;

‎packages/theme-chalk/src/common/var.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -534,6 +534,7 @@ $--button-small-border-radius: #{$--border-radius-base - 1} !default;
534534
$--button-small-padding-vertical: 9px !default;
535535
/// padding||Spacing|3
536536
$--button-small-padding-horizontal: 15px !default;
537+
537538
/// fontSize||Font|1
538539
$--button-mini-font-size: 12px !default;
539540
$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
@@ -542,6 +543,14 @@ $--button-mini-padding-vertical: 7px !default;
542543
/// padding||Spacing|3
543544
$--button-mini-padding-horizontal: 15px !default;
544545

546+
/// fontSize||Font|1
547+
$--button-compact-font-size: 12px !default;
548+
$--button-compact-border-radius: #{$--border-radius-base - 1} !default;
549+
/// padding||Spacing|3
550+
$--button-compact-padding-vertical: 5px !default;
551+
/// padding||Spacing|3
552+
$--button-compact-padding-horizontal: 12px !default;
553+
545554
/// color||Color|0
546555
$--button-default-font-color: $--color-text-regular !default;
547556
/// color||Color|0

0 commit comments

Comments
 (0)