...
Vamos a ver como se usa cada uno de los componentes.
...
| Code Block |
|---|
|
<desy-button ...></desy-button> |
...
| Expand |
|---|
|
con entrada de texto| Code Block |
|---|
| <desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button> |
 Image Removed Image Added| 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 {
...
}
...
} |
Image Modified |
Button Loader
...
| 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.
...