desy-angular v10.0 - Manual de integración DesyButtonsModule

Componentes relativos a botones


Vamos a ver como se usa cada uno de los componentes.

 

Button


<desy-button ...></desy-button>

Permite representar un botón.

Propiedad

Tipo

Descripción

Obligatorio

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador del botón.

 

text

string

Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.

Si para elementos a y button y cuando no se especifica html.

html

string

Contenido del texto en formato HTML.

Nota: no aplica al elemento input.

Si para elementos a y button y cuando no se especifica text.

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

 

element

string

Elemento HTML que se utilizará para representar el botón. Los valores posibles son:

  • (por defecto, si se incluye un href)

  • button (por defecto)

  • input

 

name

string

Nombre o atributo name del elemento que representa el botón.

Nota: sólo para los elementos buttoninput.

 

value

any

Valor del botón a enviar como parte del formulario.

Nota: sólo para el elemento button

 

type

string

Tipo del botón. Los valores posibles son:

  • submit (por defecto)

  • button

  • reset

Nota: sólo para los elementos buttoninput.

 

disabled

boolean

Indica si el botón está deshabilitado.

 

preventDoubleClick

boolean

Evita un doble click.

Nota: sólo para los elementos buttoninput.

 

href

string

Ruta externa a la que se redirigirá al pulsar el botón.  No se aplicará cuando se especifique la propiedad routerLink.  Por defecto #.

Nota: sólo para el elemento a.

 

target

string

Pestaña en la que se abrirá el enlace.

Nota: sólo para el elemento a con href.

 

routerLink

string|string[]

Ruta interna relativa al proyecto (ver Angular ).

 

routerLinkActiveClasses

string|string[]

Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver Angular ).

 

 

Propiedades de accesibilidad

El componente button admite los siguientes parámetros de accesibilidad.

 

Evento

Tipo

Descripción

Evento

Tipo

Descripción

clickEvent

DOM Event

Se emite al pulsar sobre el botón.

Button con entrada de texto
<desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button>
Button con contenido
<desy-button id="send" ariaLabel="Prueba del componente button">Button with <strong>&nbsp;HTML</strong></desy-button>

 

Button con entrada de html y recogiendo el evento de salida

 

 

Button Loader


Permite representar un botón que realiza una acción "pesada", mostrando diferente apariencia para los distintos estados de la acción.

Propiedad

Tipo

Descripción

Obligatorio

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador del botón.

 

text

string

Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.

Si para elementos a y button y cuando no se especifica html.

html

string

Contenido del texto en formato HTML.

Si para elementos a y button y cuando no se especifica text.

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el componente.

 

element

string

Elemento HTML que se utilizará para representar el botón. Los valores posibles son:

  • (por defecto, si se incluye un href)

  • button (por defecto)

  • input

 

state

string

Estado del componente. Los valores posibles son:

  • is-loading → Representa el estado "cargando". Muestra el spinner de carga. Deberá añadirse la clase "c-button-loader--is-loading" al parámetro classes.

  • is-success → Representa el estado "éxito". Muestra el icono ✓. Deberá añadirse la clase "c-button-loader--is-success" al parámetro classes.

Por defecto, o si no se especifica el valor, se muestra el contenido de los parámetros texthtml.

 

successText

string

Texto que se interpretará por los lectores de pantalla cuando se llegue al estado de "éxito".

 

loaderText

string

Texto que se interpretará por los lectores de pantalla mientras está en el estado de "cargando".

 

loaderClasses

string

Clases que se aplican sobre spinner.

 

name

string

Nombre o atributo name del elemento que representa el botón.

Nota: sólo para los elementos buttoninput.

 

value

any

Valor del botón a enviar como parte del formulario.

Nota: sólo para el elemento button.

 

type

string

Tipo del botón. Los valores posibles son:

  • submit (por defecto)

  • button

  • reset

Nota: sólo para los elementos buttoninput.

 

disabled

boolean

Indica si el botón está deshabilitado.

 

preventDoubleClick

boolean

Evita un doble click.

Nota: sólo para los elementos buttoninput.

 

href

string

Ruta externa a la que se redirigirá al pulsar el botón.

Nota: sólo para el elemento a.

 

target

string

Pestaña en la que se abrirá el enlace.

Nota: sólo para el elemento a con href.

 

routerLink

string|string[]

Ruta interna relativa al proyecto (ver Angular ).

 

routerLinkActiveClasses

string|string[]

Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver Angular ).

 

Propiedades de accesibilidad
El componente button-loader admite los siguientes parámetros de accesibilidad.

Evento

Tipo

Descripción

Evento

Tipo

Descripción

clickEvent

DOM Event

Se emite al pulsar sobre el botón.

 

Dropdown


Permite generar un desplegable

 

 

Listbox


Permite generar un desplegable con una lista de opciones

 

 

 

Pill


Permite representar un botón de tipo pill.

 

Toggle


 

 

Permite representar un botón de tipo toggle

Accesibilidad


En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.

Parámetro

Atributo de accesibilidad equivalente

Parámetro

Atributo de accesibilidad equivalente

role

role

ariaLabel

aria-label

ariaDescribedBy

aria-describedby

ariaLabelledBy

aria-labelledby

ariaHidden

aria-hidden

ariaDisabled

aria-disabled

ariaControls

aria-controls

ariaCurrent

aria-current

ariaLive

aria-live

ariaExpanded

aria-expanded

ariaErrorMessage

aria-errormessage

ariaHasPopup

aria-haspopup

ariaModal

aria-modal

tabindex

tabindex