github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Button: add compact size (#15895) 

* Button: add compact size
* Docs: 極小 -> 极小
pull/16146/head
amedora 2019-06-20 13:02:10 +09:00 committed by Zhi Cun
parent 34308354c8
commit 05fe6e6591
6 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/docs/en-US/button.md
View File

@ -132,7 +132,7 @@ Click the button to load data, then the button displays a loading state.
Besides default size, Button component provides three additional sizes for you to choose among different scenarios. Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. :::demo Use attribute `size` to set additional sizes with `medium`, `small`, `mini` or `compact`.
```html ```html
<el-row> <el-row>
@ -140,12 +140,14 @@ Besides default size, Button component provides three additional sizes for you t
<el-button size="medium">Medium</el-button> <el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button> <el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button> <el-button size="mini">Mini</el-button>
<el-button size="compact">Compact</el-button>
</el-row> </el-row>
<el-row> <el-row>
<el-button round>Default</el-button> <el-button round>Default</el-button>
<el-button size="medium" round>Medium</el-button> <el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button> <el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button> <el-button size="mini" round>Mini</el-button>
<el-button size="compact" round>Compact</el-button>
</el-row> </el-row>
``` ```
::: :::
@ -153,7 +155,7 @@ Besides default size, Button component provides three additional sizes for you t
### Attributes ### Attributes
| Attribute | Description | Type | Accepted values | Default | | Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| size | button size | string | medium / small / mini | — | | size | button size | string | medium / small / mini / compact | — |
| type | button type | string | primary / success / warning / danger / info / text | — | | type | button type | string | primary / success / warning / danger / info / text | — |
| plain | determine whether it's a plain button | boolean | — | false | | plain | determine whether it's a plain button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false | | round | determine whether it's a round button | boolean | — | false |

6
examples/docs/es/button.md
View File

@ -132,7 +132,7 @@ Cuando se hace clic en un botón para descargar datos, el botón muestra un esta
Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios. Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` o `mini`. :::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small`, `mini` o `compact`.
```html ```html
<el-row> <el-row>
@ -140,12 +140,14 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
<el-button size="medium">Medium</el-button> <el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button> <el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button> <el-button size="mini">Mini</el-button>
<el-button size="compact">Compact</el-button>
</el-row> </el-row>
<el-row> <el-row>
<el-button round>Default</el-button> <el-button round>Default</el-button>
<el-button size="medium" round>Medium</el-button> <el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button> <el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button> <el-button size="mini" round>Mini</el-button>
<el-button size="compact" round>Compact</el-button>
</el-row> </el-row>
``` ```
::: :::
@ -153,7 +155,7 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ----------- | --------------------------------------------- | ------- | -------------------------------------------------- | ----------- | | ----------- | --------------------------------------------- | ------- | -------------------------------------------------- | ----------- |
| size | tamaño del botón | string | medium / small / mini | — | | size | tamaño del botón | string | medium / small / mini / compact | — |
| type | tipo de botón | string | primary / success / warning / danger / info / text | — | | type | tipo de botón | string | primary / success / warning / danger / info / text | — |
| plain | determinar si es o no un botón plano | boolean | — | false | | plain | determinar si es o no un botón plano | boolean | — | false |
| round | determinar si es o no un botón redondo | boolean | — | false | | round | determinar si es o no un botón redondo | boolean | — | false |

6
examples/docs/fr-FR/button.md
View File

@ -132,7 +132,7 @@ Cliquez sur le bouton pour charger des données et il affichera un état de char
En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios. En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios.
:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small` ou `mini`. :::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small`, `mini` ou `compact`.
```html ```html
<el-row> <el-row>
@ -140,12 +140,14 @@ En plus de la taille par défaut, le composant Button fournit trois tailles supp
<el-button size="medium">Medium</el-button> <el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button> <el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button> <el-button size="mini">Mini</el-button>
<el-button size="compact">Compact</el-button>
</el-row> </el-row>
<el-row> <el-row>
<el-button round>Défaut</el-button> <el-button round>Défaut</el-button>
<el-button size="medium" round>Medium</el-button> <el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button> <el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button> <el-button size="mini" round>Mini</el-button>
<el-button size="compact" round>Compact</el-button>
</el-row> </el-row>
``` ```
::: :::
@ -153,7 +155,7 @@ En plus de la taille par défaut, le composant Button fournit trois tailles supp
### Attributs ### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| size | Taille du bouton. | string | medium / small / mini | — | | size | Taille du bouton. | string | medium / small / mini / compact | — |
| type | Type du bouton. | string | primary / success / warning / danger / info / text | — | | type | Type du bouton. | string | primary / success / warning / danger / info / text | — |
| plain | Détermine si le bouton est plein. | boolean | — | false | | plain | Détermine si le bouton est plein. | boolean | — | false |
| round | Détermine si le bouton est arrondi. | boolean | — | false | | round | Détermine si le bouton est arrondi. | boolean | — | false |

6
examples/docs/zh-CN/button.md
View File

@ -133,7 +133,7 @@
Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。 Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。 :::demo 额外的尺寸：`medium`、`small`、`mini`、`compact`，通过设置`size`属性来配置它们。
```html ```html
<el-row> <el-row>
@ -141,12 +141,14 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
<el-button size="medium">中等按钮</el-button> <el-button size="medium">中等按钮</el-button>
<el-button size="small">小型按钮</el-button> <el-button size="small">小型按钮</el-button>
<el-button size="mini">超小按钮</el-button> <el-button size="mini">超小按钮</el-button>
<el-button size="compact">極小按钮</el-button>
</el-row> </el-row>
<el-row> <el-row>
<el-button round>默认按钮</el-button> <el-button round>默认按钮</el-button>
<el-button size="medium" round>中等按钮</el-button> <el-button size="medium" round>中等按钮</el-button>
<el-button size="small" round>小型按钮</el-button> <el-button size="small" round>小型按钮</el-button>
<el-button size="mini" round>超小按钮</el-button> <el-button size="mini" round>超小按钮</el-button>
<el-button size="compact" round>极小按钮</el-button>
</el-row> </el-row>
``` ```
::: :::
@ -154,7 +156,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| size | 尺寸 | string | medium / small / mini | — | | size | 尺寸 | string | medium / small / mini / compact | — |
| type | 类型 | string | primary / success / warning / danger / info / text | — | | type | 类型 | string | primary / success / warning / danger / info / text | — |
| plain | 是否朴素按钮 | boolean | — | false | | plain | 是否朴素按钮 | boolean | — | false |
| round | 是否圆角按钮 | boolean | — | false | | round | 是否圆角按钮 | boolean | — | false |

6
packages/theme-chalk/src/button.scss
View File

@ -154,6 +154,12 @@
padding: $--button-mini-padding-vertical; padding: $--button-mini-padding-vertical;
} }
} }
@include m(compact) {
@include button-size($--button-compact-padding-vertical, $--button-compact-padding-horizontal, $--button-compact-font-size, $--button-compact-border-radius);
@include when(circle) {
padding: $--button-compact-padding-vertical;
}
}
@include m(text) { @include m(text) {
border-color: transparent; border-color: transparent;
color: $--color-primary; color: $--color-primary;

9
packages/theme-chalk/src/common/var.scss
View File

@ -534,6 +534,7 @@ $--button-small-border-radius: #{$--border-radius-base - 1} !default;
$--button-small-padding-vertical: 9px !default; $--button-small-padding-vertical: 9px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-small-padding-horizontal: 15px !default; $--button-small-padding-horizontal: 15px !default;
/// fontSize||Font|1 /// fontSize||Font|1
$--button-mini-font-size: 12px !default; $--button-mini-font-size: 12px !default;
$--button-mini-border-radius: #{$--border-radius-base - 1} !default; $--button-mini-border-radius: #{$--border-radius-base - 1} !default;
@ -542,6 +543,14 @@ $--button-mini-padding-vertical: 7px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-mini-padding-horizontal: 15px !default; $--button-mini-padding-horizontal: 15px !default;
/// fontSize||Font|1
$--button-compact-font-size: 12px !default;
$--button-compact-border-radius: #{$--border-radius-base - 1} !default;
/// padding||Spacing|3
$--button-compact-padding-vertical: 5px !default;
/// padding||Spacing|3
$--button-compact-padding-horizontal: 12px !default;
/// color||Color|0 /// color||Color|0
$--button-default-font-color: $--color-text-regular !default; $--button-default-font-color: $--color-text-regular !default;
/// color||Color|0 /// color||Color|0