mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-13 11:34:02 +08:00
Button: add compact size (#15895)
* Button: add compact size * Docs: 極小 -> 极小
This commit is contained in:
@@ -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.
|
||||
|
||||
:::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>
|
||||
@@ -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="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>
|
||||
```
|
||||
:::
|
||||
@@ -153,7 +155,7 @@ Besides default size, Button component provides three additional sizes for you t
|
||||
### 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 |
|
||||
|
||||
@@ -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.
|
||||
|
||||
:::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>
|
||||
@@ -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="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>
|
||||
```
|
||||
:::
|
||||
@@ -153,7 +155,7 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
|
||||
### 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 |
|
||||
|
||||
@@ -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.
|
||||
|
||||
:::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>
|
||||
@@ -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="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>
|
||||
```
|
||||
:::
|
||||
@@ -153,7 +155,7 @@ En plus de la taille par défaut, le composant Button fournit trois tailles supp
|
||||
### 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 |
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
|
||||
Button 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。
|
||||
|
||||
:::demo 额外的尺寸:`medium`、`small`、`mini`,通过设置`size`属性来配置它们。
|
||||
:::demo 额外的尺寸:`medium`、`small`、`mini`、`compact`,通过设置`size`属性来配置它们。
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
@@ -141,12 +141,14 @@ 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>
|
||||
</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>
|
||||
```
|
||||
:::
|
||||
@@ -154,7 +156,7 @@ Button 组件提供除了默认值以外的三种尺寸,可以在不同场景
|
||||
### 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 |
|
||||
|
||||
Reference in New Issue
Block a user