Skip to content
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

Jump to bottom

Button: add compact size #15895

Merged
merged 2 commits into from
Jun 20, 2019
Merged

Button: add compact size #15895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27d7ba9
Button: add compact size
amedora May 21, 2019
06021a0
Docs: 極小 -> 极小
amedora Jun 10, 2019
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
6 changes: 4 additions & 2 deletions examples/docs/en-US/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,28 +132,30 @@ 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.

:::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
<el-row>
<el-button>Default</el-button>
<el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button>
<el-button size="compact">Compact</el-button>
</el-row>
<el-row>
<el-button round>Default</el-button>
<el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button>
<el-button size="compact" round>Compact</el-button>
</el-row>
```
:::

### Attributes
| 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 | — |
| plain | determine whether it's a plain button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false |
Expand Down
6 changes: 4 additions & 2 deletions examples/docs/es/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,28 +132,30 @@ 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.

:::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
<el-row>
<el-button>Default</el-button>
<el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button>
<el-button size="compact">Compact</el-button>
</el-row>
<el-row>
<el-button round>Default</el-button>
<el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button>
<el-button size="compact" round>Compact</el-button>
</el-row>
```
:::

### Atributos
| 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 | — |
| plain | determinar si es o no un botón plano | boolean | — | false |
| round | determinar si es o no un botón redondo | boolean | — | false |
Expand Down
6 changes: 4 additions & 2 deletions examples/docs/fr-FR/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,28 +132,30 @@ 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.

:::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
<el-row>
<el-button>Défaut</el-button>
<el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button>
<el-button size="compact">Compact</el-button>
</el-row>
<el-row>
<el-button round>Défaut</el-button>
<el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button>
<el-button size="compact" round>Compact</el-button>
</el-row>
```
:::

### Attributs
| 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 | — |
| plain | Détermine si le bouton est plein. | boolean | — | false |
| round | Détermine si le bouton est arrondi. | boolean | — | false |
Expand Down
6 changes: 4 additions & 2 deletions examples/docs/zh-CN/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,28 +133,30 @@

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

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

```html
<el-row>
<el-button>默认按钮</el-button>
<el-button size="medium">中等按钮</el-button>
<el-button size="small">小型按钮</el-button>
<el-button size="mini">超小按钮</el-button>
<el-button size="compact">極小按钮</el-button>
amedora marked this conversation as resolved.
Show resolved Hide resolved
</el-row>
<el-row>
<el-button round>默认按钮</el-button>
<el-button size="medium" round>中等按钮</el-button>
<el-button size="small" round>小型按钮</el-button>
<el-button size="mini" round>超小按钮</el-button>
<el-button size="compact" round>极小按钮</el-button>
</el-row>
```
:::

### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| size | 尺寸 | string | medium / small / mini | — |
| size | 尺寸 | string | medium / small / mini / compact | — |
| type | 类型 | string | primary / success / warning / danger / info / text | — |
| plain | 是否朴素按钮 | boolean | — | false |
| round | 是否圆角按钮 | boolean | — | false |
Expand Down
6 changes: 6 additions & 0 deletions packages/theme-chalk/src/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,12 @@
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) {
border-color: transparent;
color: $--color-primary;
Expand Down
9 changes: 9 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 @@ -534,6 +534,7 @@ $--button-small-border-radius: #{$--border-radius-base - 1} !default;
$--button-small-padding-vertical: 9px !default;
/// padding||Spacing|3
$--button-small-padding-horizontal: 15px !default;

/// fontSize||Font|1
$--button-mini-font-size: 12px !default;
$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
Expand All @@ -542,6 +543,14 @@ $--button-mini-padding-vertical: 7px !default;
/// padding||Spacing|3
$--button-mini-padding-horizontal: 15px !default;

/// fontSize||Font|1
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iamkun is these theme config right?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes

$--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
$--button-default-font-color: $--color-text-regular !default;
/// color||Color|0
Expand Down