Versions Compared

Old Version 7

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 {
	   ...
	}
	...
}
Button Loader
...
 Code Block
languagexml
<desy-button-loader ...></desy-button-loader>
...
 Expand
titleEventos de salida
Evento
Tipo
Descripción
clickEvent
DOM Event
Se emite al pulsar sobre el botón.
Image Removed
 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> 
 Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoButtonComponent {
	...
	handleClickEvent(event: any): void {
	   ...
	}
	...
}
Image Removed
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> 
Dropdown
...
 Code Block
languagexml
<desy-dropdown ...></desy-dropdown>
Permite generar un desplegable
...
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
text
string
Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Si, cuando no se especifica html.
html
string
Contenido del texto en formato HTML.
Si, cuando no se especifica text.
hiddenText
string
Contenido del texto oculto en formato texto plano
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.

classesTooltip
string
Clases CSS separadas por espacio que se aplicarán sobre el tooltip.
classesContainer
string
Clases CSS separadas por espacio que se aplicarán sobre el container del componente.
disabled
boolean
Deshabilita el boton
caller
TemplateRef <any>
Template para mostrar dentro del tooltip



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

 Expand
titleEventos de salida
Evento
Tipo
Descripción
clickEvent
DOM Event
Se emite al pulsar sobre el botón.
 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 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 Added

 Anchor
errorMessage
errorMessage
Pill
...
 Code Block
languagexml
<desy-pill ...></desy-pill>
...
 Expand
titleEventos de salida

Evento
Tipo
Descripción
clickEvent
DOM Event
Se emite al pulsar sobre el botón.

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


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