Page Comparison

Table of Contents

minLevel	2
maxLevel	2

...

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

Button

...

Code Block

language	xml

<desy-button ...></desy-button>

...

Expand

title	Ejemplos

con entrada de texto

Code Block

language	xml

<desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button>

Image Removed

Image Added

Button con entrada de html y recogiendo el evento de salida

Code Block

language	xml

<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

language	typescript

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoButtonComponent {
	...
	handleClickEvent(event: any): void {
	   ...
	}
	...
}

Button Loader

...

Code Block

language	xml

<desy-button-loader ...></desy-button-loader>

...

Expand

title	Eventos de salida

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

Image Removed

Expand

title	Ejemplos

Button-loader con entrada de texto

Code Block

language	xml

<desy-button-loader id="send" (clickEvent)="handleClickEvent($event)"  text="Enviar" ariaLabel="Prueba del componente button"></desy-button-loader>

Image Added

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

Code Block

language	xml

<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

Image Added

Button-loader cargando

Code Block

language	xml

<desy-button-loader text="Comenzar" state="is-loading" classes="c-button-loader--is-loading" loaderText="Ejecutando proceso"></desy-button-loader>

Image Removed

Image Added

Button-loader exito

Code Block

language	xml

<desy-button-loader text="Comenzar" state="is-success" classes="c-button-loader--is-succes" successText="Proceso ejecutado correctamente"></desy-button-loader>

Image Added

s

...

Code Block

language	xml

<desy-dropdown ...></desy-dropdown>

Permite generar un desplegable

...

Expand

title	Propiedades 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

title	Eventos de salida

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

Expand

title	Ejemplos

Dropdown base

Code Block

language	xml

<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 Modified

Dropdown con menu

Code Block

language	html

<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 Modified

Anchor
errorMessage
errorMessage
Pill

...

Code Block

language	xml

<desy-pill ...></desy-pill>

...

Expand

title	Eventos de salida

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

Expand

title	Ejemplos

Image Removed

pill

Code Block

language	xml

<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.

...

Versions Compared

Old Version 9

New Version 10

Key

Button

con entrada de texto

Button con entrada de html y recogiendo el evento de salida

Button Loader

Button-loader con entrada de texto

Button-loader con entrada de html y recogiendo el evento de salida

Button-loader cargando

Button-loader exito

Dropdown base

Dropdown con menu

Anchor
errorMessage
errorMessage
Pill

pill

Accesibilidad

Page Comparison

Versions Compared

Old Version 9

New Version 10

Key

Button

con entrada de texto

Button con entrada de html y recogiendo el evento de salida

Button Loader

Button-loader con entrada de texto

Button-loader con entrada de html y recogiendo el evento de salida

Button-loader cargando

Button-loader exito

Dropdown

Dropdown base

Dropdown con menu

AnchorerrorMessageerrorMessagePill

pill

Accesibilidad

Anchor
errorMessage
errorMessage
Pill