## Alert Mostrar mensajes de alertas importantes. ### Uso básico Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente. ::: demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`. ```html ``` ::: ### Customización del botón de cerrar Customizá el botón de cerrar como texto u otros símbolos. ::: demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son customizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puedes configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. Ten cuidado que el atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra. ```html ``` ::: ### Usar iconos Mostrar un icono mejora la legibilidad. ::: demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando. ```html ``` ::: ### Texto centrado Para centrar el texto utilice el atributo `center`. ::: demo ```html ``` ::: ### Con descripción Descripción incluye un mensaje con información más detallada. ::: demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente. ```html ``` ::: ### Utilizando icono y descripción ::: demo Finalmente este es un ejemplo utilizando icono y descripción. ```html ``` ::: ### Atributos | Atributo | Descrpción | Tipo | Valores válidos | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | **title** | Título **REQUIRED** | string | — | — | | type | tipo de componente | string | success/warning/info/error | info | | description | texto descriptivo. También puede ser pasado con el slot por defecto | string | — | — | | closable | si se puede cerrar o no | boolean | — | true | | center | si el texto debe estar centrado | boolean | — | false | | close-text | texto de cerrado customizado | string | — | — | | show-icon | si un icono del tipo de alerta se debe mostrar| boolean | — | false | ### Eventos | Nombre del evento | Descripción | Parámetros | |---------- |-------- |---------- | | close | Se dispara cuando la alerta se cierra | — |