Versions Compared

Old Version 10

changes.mady.by.user Servicios Digitales de Aragón

Saved on

compared with

New Version Current

changes.mady.by.user Servicios Digitales de Aragón

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel2
maxLevel2

...

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

Button

...

Code Block
languagexml
<desy-button ...></desy-button>

...

Expand
titleEjemplos
con entrada de texto
Image Added
Code Block
languagexml
<desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button>
Image Removed
Button con entrada de html y recogiendo el evento de salida
Image Added
Code Block
languagexml
<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
languagetypescript
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoButtonComponent {
	...
	handleClickEvent(event: any): void {
	   ...
	}
	...
}
Image Removed
Button Loader
...
 Code Block
languagexml
<desy-button-loader ...></desy-button-loader>
...
 Expand
titleEjemplos
Button-loader con entrada de texto
Image Added
 Code Block
languagexml
<desy-button-loader id="send" (clickEvent)="handleClickEvent($event)"  text="Enviar" ariaLabel="Prueba del componente button"></desy-button-loader> 
Image Removed
 Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoButtonComponent {
	...
	handleClickEvent(event: any): void {
	   ...
	}
	...
}
Button-loader con entrada de html y recogiendo el evento de salida
Image Added
 Code Block
languagexml
<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> 
Image Removed
Button-loader cargando
Image Added
 Code Block
languagexml
<desy-button-loader text="Comenzar" state="is-loading" classes="c-button-loader--is-loading" loaderText="Ejecutando proceso"></desy-button-loader> 
Image Removed
Button-loader exito
Image Added
 Code Block
languagexml
<desy-button-loader text="Comenzar" state="is-success" classes="c-button-loader--is-succes" successText="Proceso ejecutado correctamente"></desy-button-loader> 
Image Removed
s
Dropdown
...
 Code Block
languagexml
<desy-dropdown ...></desy-dropdown>
...
 Expand
titleEjemplos
Dropdown base
 Code Block
languagexml
<desy-dropdown text="Desplegable" [caller]="caller"></desy-dropdown>
<ng-template #caller>
      <div class="w-48 p-2"><div class="border-4 border-dashed border-gray-200 rounded-lg h-40"></div></div>
    </ng-template>
Image Removed

Image Added

Dropdown con menu
 Code Block
languagehtml
<ng-template #caller1>
      <ul>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 1</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 2</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 3</a>
        </li>
      </ul>
    </ng-template>
<desy-dropdown text="Desplegable" [caller]="caller1"></desy-dropdown>
Image RemovedImage Added

 Anchor
errorMessage
errorMessage
Pill
...
 Code Block
languagexml
<desy-pill ...></desy-pill>
...
 Expand
titleEjemplos
pill
 Code Block
languagexml
<desy-pill id="example-pill" text="Focussed" classes="ds-focus" type="button" (clickEvent)="gestionarClick($event)"></desy-pill>
Image RemovedImage Added


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