mirror of https://github.com/ElemeFE/element
177 lines
5.7 KiB
Markdown
177 lines
5.7 KiB
Markdown
<style>
|
|
.demo-box.demo-button {
|
|
.el-row {
|
|
margin-bottom: 10px;
|
|
}
|
|
.el-button + .el-button {
|
|
margin-left: 10px;
|
|
}
|
|
.el-button-group {
|
|
margin-bottom: 20px;
|
|
|
|
.el-button + .el-button {
|
|
margin-left: 0;
|
|
}
|
|
|
|
& + .el-button-group {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
## Button
|
|
|
|
Botones comúnmente usados.
|
|
|
|
### Uso básico
|
|
|
|
::: demo Use `type`, `plain` y `round` para definir estilos a los botones.
|
|
|
|
```html
|
|
<div>
|
|
<el-button>Default</el-button>
|
|
<el-button type="primary">Primary</el-button>
|
|
<el-button type="success">Success</el-button>
|
|
<el-button type="info">Info</el-button>
|
|
<el-button type="warning">Warning</el-button>
|
|
<el-button type="danger">Danger</el-button>
|
|
</div>
|
|
|
|
<div style="margin: 20px 0">
|
|
<el-button plain>Plain</el-button>
|
|
<el-button type="primary" plain>Primary</el-button>
|
|
<el-button type="success" plain>Success</el-button>
|
|
<el-button type="info" plain>Info</el-button>
|
|
<el-button type="warning" plain>Warning</el-button>
|
|
<el-button type="danger" plain>Danger</el-button>
|
|
</div>
|
|
|
|
<div>
|
|
<el-button round>Round</el-button>
|
|
<el-button type="primary" round>Primary</el-button>
|
|
<el-button type="success" round>Success</el-button>
|
|
<el-button type="info" round>Info</el-button>
|
|
<el-button type="warning" round>Warning</el-button>
|
|
<el-button type="danger" round>Danger</el-button>
|
|
</div>
|
|
```
|
|
:::
|
|
|
|
### Botón deshabilitado
|
|
|
|
El atributo `disabled` determina su un botón esta deshabilitado.
|
|
|
|
:::demo Use el atributo `disabled` para determinar si un botón esta deshabilitado. Acepta un valor `Boolean`.
|
|
|
|
```html
|
|
<div>
|
|
<el-button disabled>Default</el-button>
|
|
<el-button type="primary" disabled>Primary</el-button>
|
|
<el-button type="success" disabled>Success</el-button>
|
|
<el-button type="info" disabled>Info</el-button>
|
|
<el-button type="warning" disabled>Warning</el-button>
|
|
<el-button type="danger" disabled>Danger</el-button>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px">
|
|
<el-button plain disabled>Plain</el-button>
|
|
<el-button type="primary" plain disabled>Primary</el-button>
|
|
<el-button type="success" plain disabled>Success</el-button>
|
|
<el-button type="info" plain disabled>Info</el-button>
|
|
<el-button type="warning" plain disabled>Warning</el-button>
|
|
<el-button type="danger" plain disabled>Danger</el-button>
|
|
</div>
|
|
```
|
|
:::
|
|
|
|
### Botón de texto
|
|
|
|
Botones sin borde ni fondo.
|
|
|
|
:::demo
|
|
```html
|
|
<el-button type="text">Text Button</el-button>
|
|
<el-button type="text" disabled>Text Button</el-button>
|
|
```
|
|
:::
|
|
|
|
### Botón icono
|
|
|
|
Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
|
|
|
|
:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
|
|
|
|
```html
|
|
<el-button type="primary" icon="el-icon-edit"></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-search">Search</el-button>
|
|
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
|
```
|
|
:::
|
|
|
|
### Grupo de botones
|
|
|
|
Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.
|
|
|
|
:::demo Use el tag `<el-button-group>` para agrupar sus botones.
|
|
|
|
```html
|
|
<el-button-group>
|
|
<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-group>
|
|
<el-button-group>
|
|
<el-button type="primary" icon="el-icon-edit"></el-button>
|
|
<el-button type="primary" icon="el-icon-share"></el-button>
|
|
<el-button type="primary" icon="el-icon-delete"></el-button>
|
|
</el-button-group>
|
|
```
|
|
:::
|
|
|
|
### Botón de descarga
|
|
|
|
Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.
|
|
|
|
:::demo Sete el atributo `loading` a `true` para mostrar el estado de descarga.
|
|
|
|
```html
|
|
<el-button type="primary" :loading="true">Loading</el-button>
|
|
```
|
|
:::
|
|
|
|
### Tamaños
|
|
|
|
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` or `mini`.
|
|
|
|
```html
|
|
<div>
|
|
<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>
|
|
</div>
|
|
<div style="margin-top: 20px">
|
|
<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>
|
|
</div>
|
|
```
|
|
:::
|
|
|
|
### Atributos
|
|
| Atributo | Descripción | Tipo | Valores aceptados | Default |
|
|
|---------- |-------- |---------- |------------- |-------- |
|
|
| size | tamaño del botón | string | medium / small / mini | — |
|
|
| 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 |
|
|
| loading | determinar si es o no un botón de descarga | boolean | — | false |
|
|
| disabled | deshabilitar el botón | boolean | — | false |
|
|
| icon | nombre de la clase del icono | string | — | — |
|
|
| autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false |
|
|
| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button | |