desy-angular v2.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 https://angular.io/api/router/RouterLink).



routerLinkActiveClasses

string|string[]

Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver https://angular.io/api/router/RouterLinkActive).



 

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.

con entrada de texto
<desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button>
Button con entrada de html y recogiendo el evento de salida
<desy-button id="delete" classes="c-button-loader--alert" (clickEvent)="handleClickEvent($event)" html="Botón con icono<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path fill=\"currentColor\" stroke=\"none\" d=\"M14.621 7.928a.643.643 0 00-.478-.214H3.857a.643.643 0 00-.643.711l.965 9A.643.643 0 004.82 18h8.358a.643.643 0 00.642-.575l.965-9a.643.643 0 00-.165-.497zM16.071 3.59h-3.214a.321.321 0 01-.321-.322V2.25A2.253 2.253 0 0010.286 0H7.714a2.26 2.26 0 00-2.25 2.215L5.45 3.272a.323.323 0 01-.322.318H1.93a1.286 1.286 0 000 2.571H16.07a1.286 1.286 0 000-2.571zM7.393 2.245a.323.323 0 01.321-.316h2.572a.321.321 0 01.321.321v1.018a.321.321 0 01-.321.322H7.699a.323.323 0 01-.322-.327z\"/> "></desy-button>

 

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 https://angular.io/api/router/RouterLink).



routerLinkActiveClasses

string|string[]

Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver https://angular.io/api/router/RouterLinkActive).



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

 

Pill


Permite representar un botón de tipo pill.



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