...
Vamos a ver como se usa cada uno de los componentes.
...
| Code Block |
|---|
|
<desy-button ...></desy-button> |
Permite representar un botón.
...
| Expand |
|---|
| title | Propiedades de entrada |
|---|
|
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: |
| name | string | Nombre o atributo name del elemento que representa el botón. Nota: sólo para los elementos button e input. |
| 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 button e input. |
| disabled | boolean | Indica si el botón está deshabilitado. |
| preventDoubleClick | boolean | Evita un doble click. Nota: sólo para los elementos button e input. |
| 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). |
|
El componente button admite los siguientes parámetros de accesibilidad. |
...
| Expand |
|---|
|
 Button con entrada de texto| Code Block |
|---|
| <desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button> |
| Code Block |
|---|
| <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> |
| Code Block |
|---|
| @Component({
selector: '...',
templateUrl: '...',
...
})
export class DemoButtonComponent {
...
handleClickEvent(event: any): void {
...
}
...
} |
|
...
| Code Block |
|---|
|
<desy-button-loader ...></desy-button-loader> |
...
| Expand |
|---|
|
Button-loader con entrada de texto| Code Block |
|---|
| <desy-button-loader id="send" (clickEvent)="handleClickEvent($event)" text="Enviar" ariaLabel="Prueba del componente button"></desy-button-loader> |
| Code Block |
|---|
@Component({
selector: '...',
templateUrl: '...',
...
})
export class DemoButtonComponent {
...
handleClickEvent(event: any): void {
...
}
...
} |
| Code Block |
|---|
| <desy-button-loader id="delete" classes="c-button-loader--alert" 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-loader> |
| Code Block |
|---|
| <desy-button-loader text="Comenzar" state="is-loading" classes="c-button-loader--is-loading" loaderText="Ejecutando proceso"></desy-button-loader> |
| Code Block |
|---|
| <desy-button-loader text="Comenzar" state="is-success" classes="c-button-loader--is-succes" successText="Proceso ejecutado correctamente"></desy-button-loader> |
|
...
| Code Block |
|---|
|
<desy-dropdown ...></desy-dropdown> |
...
Pill...
| Code Block |
|---|
|
<desy-pill ...></desy-pill> |
...
| Expand |
|---|
|
| Code Block |
|---|
| <desy-pill id="example-pill" text="Focussed" classes="ds-focus" type="button" (clickEvent)="gestionarClick($event)"></desy-pill> |
|
...
En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.
...