test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 04:08:34 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(button): when(circle) use button-padding-vertical & add size demo (#2860)

Browse Source
This commit is contained in:
云游君 2021-08-07 00:06:33 +08:00 committed by GitHub
parent 2c8a02f54f
commit 594eb5b33f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 177 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -186,8 +186,9 @@
map.get($--button-font-size, $size), map.get($--button-font-size, $size),
map.get($--button-border-radius, $size) map.get($--button-border-radius, $size)
); );
@include when(circle) { @include when(circle) {
padding: map.get($--button-padding-horizontal, $size); padding: map.get($--button-padding-vertical, $size);
} }
} }
} }

53
website/docs/en-US/button.md
View File

@ -43,6 +43,7 @@ Commonly used button.
<el-button type="danger" icon="el-icon-delete" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row> </el-row>
``` ```
::: :::
### Disabled Button ### Disabled Button
@ -70,6 +71,7 @@ The `disabled` attribute determines if the button is disabled.
<el-button type="danger" plain disabled>Danger</el-button> <el-button type="danger" plain disabled>Danger</el-button>
</el-row> </el-row>
``` ```
::: :::
### Text Button ### Text Button
@ -77,10 +79,12 @@ The `disabled` attribute determines if the button is disabled.
Buttons without border and background. Buttons without border and background.
:::demo :::demo
```html ```html
<el-button type="text">Text Button</el-button> <el-button type="text">Text Button</el-button>
<el-button type="text" disabled>Text Button</el-button> <el-button type="text" disabled>Text Button</el-button>
``` ```
::: :::
### Icon Button ### Icon Button
@ -94,8 +98,11 @@ Use icons to add more meaning to Button. You can use icon alone to save some spa
<el-button type="primary" icon="el-icon-share"></el-button> <el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Search</el-button> <el-button type="primary" icon="el-icon-search">Search</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button> <el-button type="primary"
>Upload<i class="el-icon-upload el-icon-right"></i
></el-button>
``` ```
::: :::
### Button Group ### Button Group
@ -107,7 +114,9 @@ Displayed as a button group, can be used to group a series of similar operations
```html ```html
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button> <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
<el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button> <el-button type="primary"
>Next Page<i class="el-icon-arrow-right el-icon-right"></i
></el-button>
</el-button-group> </el-button-group>
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button> <el-button type="primary" icon="el-icon-edit"></el-button>
@ -115,6 +124,7 @@ Displayed as a button group, can be used to group a series of similar operations
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group> </el-button-group>
``` ```
::: :::
### Loading Button ### Loading Button
@ -126,6 +136,7 @@ Click the button to load data, then the button displays a loading state.
```html ```html
<el-button type="primary" :loading="true">Loading</el-button> <el-button type="primary" :loading="true">Loading</el-button>
``` ```
::: :::
### Sizes ### Sizes
@ -147,25 +158,33 @@ Besides default size, Button component provides three additional sizes for you t
<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-row> </el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button icon="el-icon-search" size="medium" circle></el-button>
<el-button icon="el-icon-search" size="small" circle></el-button>
<el-button icon="el-icon-search" size="mini" circle></el-button>
</el-row>
``` ```
::: :::
### Attributes ### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- | | Attribute | Description | Type | Accepted Values | Default |
| size | button size | string | medium / small / mini | — | | ----------- | -------------------------------------- | ------- | -------------------------------------------------- | ------- |
| type | button type | string | primary / success / warning / danger / info / text | — | | size | button size | string | medium / small / mini | — |
| plain | determine whether it's a plain button | boolean | — | false | | type | button type | string | primary / success / warning / danger / info / text | — |
| round | determine whether it's a round button | boolean | — | false | | plain | determine whether it's a plain button | boolean | — | false |
| circle | determine whether it's a circle button | boolean | — | false | | round | determine whether it's a round button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false | | circle | determine whether it's a circle button | boolean | — | false |
| disabled | disable the button | boolean | — | false | | loading | determine whether it's loading | boolean | — | false |
| icon | icon class name | string | — | — | | disabled | disable the button | boolean | — | false |
| autofocus | same as native button's `autofocus` | boolean | — | false | | icon | icon class name | string | — | — |
| native-type | same as native button's `type` | string | button / submit / reset | button | | autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button / submit / reset | button |
### Button-Group Slots ### Button-Group Slots
| Name | Description | | Name | Description |
| ------ | ------------------ | | ------- | ------------------------------ |
| default | customize button group content | | default | customize button group content |

26
website/docs/es/button.md
View File

@ -43,6 +43,7 @@ Botones comúnmente usados.
<el-button type="danger" icon="el-icon-delete" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row> </el-row>
``` ```
::: :::
### Botón deshabilitado ### Botón deshabilitado
@ -70,6 +71,7 @@ El atributo `disabled` determina su un botón esta deshabilitado.
<el-button type="danger" plain disabled>Danger</el-button> <el-button type="danger" plain disabled>Danger</el-button>
</el-row> </el-row>
``` ```
::: :::
### Botón de texto ### Botón de texto
@ -77,10 +79,12 @@ El atributo `disabled` determina su un botón esta deshabilitado.
Botones sin borde ni fondo. Botones sin borde ni fondo.
:::demo :::demo
```html ```html
<el-button type="text">Text Button</el-button> <el-button type="text">Text Button</el-button>
<el-button type="text" disabled>Text Button</el-button> <el-button type="text" disabled>Text Button</el-button>
``` ```
::: :::
### Botón icono ### Botón icono
@ -94,8 +98,11 @@ Use iconos para darle mayor significado a Button. Se puede usar simplemente un i
<el-button type="primary" icon="el-icon-share"></el-button> <el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Search</el-button> <el-button type="primary" icon="el-icon-search">Search</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button> <el-button type="primary"
>Upload<i class="el-icon-upload el-icon-right"></i
></el-button>
``` ```
::: :::
### Grupo de botones ### Grupo de botones
@ -107,7 +114,9 @@ Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones
```html ```html
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button> <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
<el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button> <el-button type="primary"
>Next Page<i class="el-icon-arrow-right el-icon-right"></i
></el-button>
</el-button-group> </el-button-group>
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button> <el-button type="primary" icon="el-icon-edit"></el-button>
@ -115,9 +124,10 @@ Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group> </el-button-group>
``` ```
::: :::
### Botón de descarga ### Botón de descarga
Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga. Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.
@ -126,6 +136,7 @@ Cuando se hace clic en un botón para descargar datos, el botón muestra un esta
```html ```html
<el-button type="primary" :loading="true">Loading</el-button> <el-button type="primary" :loading="true">Loading</el-button>
``` ```
::: :::
### Tamaños ### Tamaños
@ -147,10 +158,18 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
<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-row> </el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button icon="el-icon-search" size="medium" circle></el-button>
<el-button icon="el-icon-search" size="small" circle></el-button>
<el-button icon="el-icon-search" size="mini" circle></el-button>
</el-row>
``` ```
::: :::
### 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 | — |
@ -163,4 +182,3 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
| icon | nombre de la clase del icono | string | — | — | | icon | nombre de la clase del icono | string | — | — |
| autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false | | autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false |
| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button | | native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button |

51
website/docs/fr-FR/button.md
View File

@ -43,6 +43,7 @@ Bouton communément utilisé.
<el-button type="danger" icon="el-icon-delete" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row> </el-row>
``` ```
::: :::
### Bouton désactivé ### Bouton désactivé
@ -70,6 +71,7 @@ L'attribut `disabled` détermine si le bouton est désactivé.
<el-button type="danger" plain disabled>Danger</el-button> <el-button type="danger" plain disabled>Danger</el-button>
</el-row> </el-row>
``` ```
::: :::
### Bouton texte ### Bouton texte
@ -77,10 +79,12 @@ L'attribut `disabled` détermine si le bouton est désactivé.
Bouton sans bordure ni fond. Bouton sans bordure ni fond.
:::demo :::demo
```html ```html
<el-button type="text">Bouton texte</el-button> <el-button type="text">Bouton texte</el-button>
<el-button type="text" disabled>Bouton texte</el-button> <el-button type="text" disabled>Bouton texte</el-button>
``` ```
::: :::
### Icône ### Icône
@ -94,8 +98,11 @@ Utilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser
<el-button type="primary" icon="el-icon-share"></el-button> <el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Recherche</el-button> <el-button type="primary" icon="el-icon-search">Recherche</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button> <el-button type="primary"
>Upload<i class="el-icon-upload el-icon-right"></i
></el-button>
``` ```
::: :::
### Groupes de boutons ### Groupes de boutons
@ -106,8 +113,12 @@ Affiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opé
```html ```html
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">Page précédente</el-button> <el-button type="primary" icon="el-icon-arrow-left"
<el-button type="primary">Page suivante<i class="el-icon-arrow-right el-icon-right"></i></el-button> >Page précédente</el-button
>
<el-button type="primary"
>Page suivante<i class="el-icon-arrow-right el-icon-right"></i
></el-button>
</el-button-group> </el-button-group>
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button> <el-button type="primary" icon="el-icon-edit"></el-button>
@ -115,6 +126,7 @@ Affiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opé
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group> </el-button-group>
``` ```
::: :::
### Bouton en chargement ### Bouton en chargement
@ -126,6 +138,7 @@ Cliquez sur le bouton pour charger des données et il affichera un état de char
```html ```html
<el-button type="primary" :loading="true">Chargement</el-button> <el-button type="primary" :loading="true">Chargement</el-button>
``` ```
::: :::
### Tailles ### Tailles
@ -147,19 +160,27 @@ En plus de la taille par défaut, le composant Button fournit trois tailles supp
<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-row> </el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button icon="el-icon-search" size="medium" circle></el-button>
<el-button icon="el-icon-search" size="small" circle></el-button>
<el-button icon="el-icon-search" size="mini" circle></el-button>
</el-row>
``` ```
::: :::
### 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 | — | | ----------- | ---------------------------------------------- | ------- | -------------------------------------------------- | ------ |
| type | Type du bouton. | string | primary / success / warning / danger / info / text | — | | size | Taille du bouton. | string | medium / small / mini | — |
| plain | Détermine si le bouton est plein. | boolean | — | false | | type | Type du bouton. | string | primary / success / warning / danger / info / text | — |
| round | Détermine si le bouton est arrondi. | boolean | — | false | | plain | Détermine si le bouton est plein. | boolean | — | false |
| circle | Détermine si le bouton est un cercle. | boolean | — | false | | round | Détermine si le bouton est arrondi. | boolean | — | false |
| loading | Détermine si l'état de chargement est affiché. | boolean | — | false | | circle | Détermine si le bouton est un cercle. | boolean | — | false |
| disabled | Désactive le bouton | boolean | — | false | | loading | Détermine si l'état de chargement est affiché. | boolean | — | false |
| icon | Classe de l'icône. | string | — | — | | disabled | Désactive le bouton | boolean | — | false |
| autofocus | Identique à l'attribut natif `autofocus` | boolean | — | false | | icon | Classe de l'icône. | string | — | — |
| native-type | Identique à l'attribut natif `type` | string | button / submit / reset | button | | autofocus | Identique à l'attribut natif `autofocus` | boolean | — | false |
| native-type | Identique à l'attribut natif `type` | string | button / submit / reset | button |

75
website/docs/jp/button.md
View File

@ -1,6 +1,6 @@
## Button ## Button
広く使われているbuttonです。 広く使われている button です。
### 基本的な使い方 ### 基本的な使い方
@ -43,13 +43,14 @@
<el-button type="danger" icon="el-icon-delete" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row> </el-row>
``` ```
::: :::
### 無効化button ### 無効化 button
`disabled` 属性はbuttonが無効になっているかどうかを判定します。 `disabled` 属性は button が無効になっているかどうかを判定します。
:::demo buttonが無効になっているかどうかを判断するには `disabled` 属性を用いる。これは `Boolean` 値を受け取ります。 :::demo button が無効になっているかどうかを判断するには `disabled` 属性を用いる。これは `Boolean` 値を受け取ります。
```html ```html
<el-row> <el-row>
@ -70,22 +71,25 @@
<el-button type="danger" plain disabled>Danger</el-button> <el-button type="danger" plain disabled>Danger</el-button>
</el-row> </el-row>
``` ```
::: :::
### テキストbutton ### テキスト button
枠線と背景のないbuttonです。 枠線と背景のない button です。
:::demo :::demo
```html ```html
<el-button type="text">Text Button</el-button> <el-button type="text">Text Button</el-button>
<el-button type="text" disabled>Text Button</el-button> <el-button type="text" disabled>Text Button</el-button>
``` ```
::: :::
### アイコンbutton ### アイコン button
アイコンを使ってButtonにさらに意味を持たせましょう。アイコンだけでスペースを確保したり、テキストと一緒に使うこともできます。 アイコンを使って Button にさらに意味を持たせましょう。アイコンだけでスペースを確保したり、テキストと一緒に使うこともできます。
:::demo アイコンを追加するには `icon` 属性を使います。アイコンのリストは要素のアイコンコンポーネントにあります。テキストの右側にアイコンを追加するには、`<i>` タグを使用します。カスタムアイコンも使用できます。 :::demo アイコンを追加するには `icon` 属性を使います。アイコンのリストは要素のアイコンコンポーネントにあります。テキストの右側にアイコンを追加するには、`<i>` タグを使用します。カスタムアイコンも使用できます。
@ -94,20 +98,25 @@
<el-button type="primary" icon="el-icon-share"></el-button> <el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Search</el-button> <el-button type="primary" icon="el-icon-search">Search</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button> <el-button type="primary"
>Upload<i class="el-icon-upload el-icon-right"></i
></el-button>
``` ```
::: :::
### buttonグループ ### button グループ
buttonグループとして表示され、同じよう操作をグループ化することができます。 button グループとして表示され、同じよう操作をグループ化することができます。
:::demo buttonをグループ化するにはタグ `<el-button-group>` を使用します。 :::demo button をグループ化するにはタグ `<el-button-group>` を使用します。
```html ```html
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button> <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
<el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button> <el-button type="primary"
>Next Page<i class="el-icon-arrow-right el-icon-right"></i
></el-button>
</el-button-group> </el-button-group>
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button> <el-button type="primary" icon="el-icon-edit"></el-button>
@ -115,22 +124,24 @@ buttonグループとして表示され、同じよう操作をグループ化
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group> </el-button-group>
``` ```
::: :::
### 読み込みbutton ### 読み込み button
buttonをクリックしてデータを読み込むと、読み込み状態が表示されます。 button をクリックしてデータを読み込むと、読み込み状態が表示されます。
:::demo ロード状態を表示するために `loading` 属性を `true` に設定します。 :::demo ロード状態を表示するために `loading` 属性を `true` に設定します。
```html ```html
<el-button type="primary" :loading="true">Loading</el-button> <el-button type="primary" :loading="true">Loading</el-button>
``` ```
::: :::
### サイズ ### サイズ
Buttonコンポーネントにはデフォルトサイズの他に、3つの追加サイズが用意されており、異なるシナリオの中から選択することができます。 Button コンポーネントにはデフォルトサイズの他に、3 つの追加サイズが用意されており、異なるシナリオの中から選択することができます。
:::demo 追加のサイズを `medium`, `small`, `mini` で設定するには、属性 `size` を使用します。 :::demo 追加のサイズを `medium`, `small`, `mini` で設定するには、属性 `size` を使用します。
@ -147,19 +158,27 @@ Buttonコンポーネントにはデフォルトサイズの他に、3つの追
<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-row> </el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button icon="el-icon-search" size="medium" circle></el-button>
<el-button icon="el-icon-search" size="small" circle></el-button>
<el-button icon="el-icon-search" size="mini" circle></el-button>
</el-row>
``` ```
::: :::
### 属性 ### 属性
| Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- | | Attribute | Description | Type | Accepted values | Default |
| size | buttonサイズ | string | medium / small / mini | — | | ----------- | ---------------------------------------------- | ------- | -------------------------------------------------- | ------- |
| type | buttonタイプ | string | primary / success / warning / danger / info / text | — | | size | button サイズ | string | medium / small / mini | — |
| plain | プレーンbuttonか判定する | boolean | — | false | | type | button タイプ | string | primary / success / warning / danger / info / text | — |
| round | ラウンド(丸みを持った)buttonか判定する | boolean | — | false | | plain | プレーン button か判定する | boolean | — | false |
| circle | サークル(丸)buttonか判定する | boolean | — | false | | round | ラウンド(丸みを持った)button か判定する | boolean | — | false |
| loading | 読み込み中か判定する | boolean | — | false | | circle | サークル(丸)button か判定する | boolean | — | false |
| disabled | buttonを無効化する | boolean | — | false | | loading | 読み込み中か判定する | boolean | — | false |
| icon | アイコンクラス名 | string | — | — | | disabled | button を無効化する | boolean | — | false |
| autofocus | ネイティブbuttonの `オートフォーカス` と同じ | boolean | — | false | | icon | アイコンクラス名 | string | — | — |
| native-type | ネイティブbuttonの `タイプ` と同じ | string | button / submit / reset | button | | autofocus | ネイティブ button の `オートフォーカス` と同じ | boolean | — | false |
| native-type | ネイティブ button の `タイプ` と同じ | string | button / submit / reset | button |

48
website/docs/zh-CN/button.md
View File

@ -1,4 +1,5 @@
## Button 按钮 ## Button 按钮
常用的操作按钮。 常用的操作按钮。
### 基础用法 ### 基础用法
@ -44,6 +45,7 @@
<el-button type="danger" icon="el-icon-delete" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row> </el-row>
``` ```
::: :::
### 禁用状态 ### 禁用状态
@ -71,6 +73,7 @@
<el-button type="danger" plain disabled>危险按钮</el-button> <el-button type="danger" plain disabled>危险按钮</el-button>
</el-row> </el-row>
``` ```
::: :::
### 文字按钮 ### 文字按钮
@ -78,10 +81,12 @@
没有边框和背景色的按钮。 没有边框和背景色的按钮。
:::demo :::demo
```html ```html
<el-button type="text">文字按钮</el-button> <el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button> <el-button type="text" disabled>文字按钮</el-button>
``` ```
::: :::
### 图标按钮 ### 图标按钮
@ -95,8 +100,11 @@
<el-button type="primary" icon="el-icon-share"></el-button> <el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button> <el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button> <el-button type="primary"
>上传<i class="el-icon-upload el-icon--right"></i
></el-button>
``` ```
::: :::
### 按钮组 ### 按钮组
@ -108,7 +116,9 @@
```html ```html
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button> <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> <el-button type="primary"
>下一页<i class="el-icon-arrow-right el-icon--right"></i
></el-button>
</el-button-group> </el-button-group>
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button> <el-button type="primary" icon="el-icon-edit"></el-button>
@ -116,6 +126,7 @@
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group> </el-button-group>
``` ```
::: :::
### 加载中 ### 加载中
@ -127,6 +138,7 @@
```html ```html
<el-button type="primary" :loading="true">加载中</el-button> <el-button type="primary" :loading="true">加载中</el-button>
``` ```
::: :::
### 不同尺寸 ### 不同尺寸
@ -148,19 +160,27 @@ 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-row> </el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button icon="el-icon-search" size="medium" circle></el-button>
<el-button icon="el-icon-search" size="small" circle></el-button>
<el-button icon="el-icon-search" size="mini" circle></el-button>
</el-row>
``` ```
::: :::
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| size | 尺寸 | string | medium / small / mini | — | | ----------- | -------------- | ------- | -------------------------------------------------- | ------ |
| type | 类型 | string | primary / success / warning / danger / info / text | — | | size | 尺寸 | string | medium / small / mini | — |
| plain | 是否朴素按钮 | boolean | — | false | | type | 类型 | string | primary / success / warning / danger / info / text | — |
| round | 是否圆角按钮 | boolean | — | false | | plain | 是否朴素按钮 | boolean | — | false |
| circle | 是否圆形按钮 | boolean | — | false | | round | 是否圆角按钮 | boolean | — | false |
| loading | 是否加载中状态 | boolean | — | false | | circle | 是否圆形按钮 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false | | loading | 是否加载中状态 | boolean | — | false |
| icon | 图标类名 | string | — | — | | disabled | 是否禁用状态 | boolean | — | false |
| autofocus | 是否默认聚焦 | boolean | — | false | | icon | 图标类名 | string | — | — |
| native-type | 原生 type 属性 | string | button / submit / reset | button | | autofocus | 是否默认聚焦 | boolean | — | false |
| native-type | 原生 type 属性 | string | button / submit / reset | button |