Versions Compared

Old Version 1

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

Componentes relativos a botones

...

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

Button

...

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

...

Expand
titlePropiedades 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:

  • a (por defecto, si se incluye un href)

  • button (por defecto)

  • input

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

 

Propiedades de accesibilidad

El componente button 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
Image RemovedImage Added
Button con entrada de texto
Code Block
languagexml
<desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button>
Image RemovedImage Added
Button con contenido
Code Block
languagexml
<desy-button id="send" ariaLabel="Prueba del componente button">Button with <strong>&nbsp;HTML</strong></desy-button>

 Image Added

Image Removed
Button con entrada de html y recogiendo el evento de salida
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
titlePropiedades 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.

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:

  • a (por defecto, si se incluye un href)

  • button (por defecto)

  • input

state

string

Estado del componente. Los valores posibles son:

  • is-loading → Representa el estado "cargando". Muestra el spinner de carga. Deberá añadirse la clase "c-button-loader--is-loading" al parámetro classes.

  • is-success → Representa el estado "éxito". Muestra el icono ✓. Deberá añadirse la clase "c-button-loader--is-success" al parámetro classes.

Por defecto, o si no se especifica el valor, se muestra el contenido de los parámetros text o html.

successText

string

Texto que se interpretará por los lectores de pantalla cuando se llegue al estado de "éxito".

loaderText

string

Texto que se interpretará por los lectores de pantalla mientras está en el estado de "cargando".

loaderClasses

string

Clases que se aplican sobre spinner.

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.

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

Propiedades de accesibilidad
El componente button-loader 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
Image RemovedImage Added
Button-loader con entrada de texto
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 {
	   ...
	}
	...
}

 

Button-loader con contenido
Image RemovedImage Added<desy
Code Block
languagexml
<desy-button-loader id="send" (clickEvent)="handleClickEvent($event)"  ariaLabel="Prueba del componente button">Button-loader <strong>&nbsp;with HTML</strong></desy-button-loader>
Code Block
languagexml
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoButtonComponent {
	...
	handleClickEvent(event: any): void {
	   ...
	}
	...
}

 Image Added

Image Removed
Button-loader con entrada de html y recogiendo el evento de salida
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 RemovedImage Added
Button-loader cargando
Code Block
languagexml
<desy-button-loader text="Comenzar" state="is-loading" classes="c-button-loader--is-loading" loaderText="Ejecutando proceso"></desy-button-loader>
Image RemovedImage Added
Button-loader exito
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
Dropdown con menu y contenido
 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 [caller]="caller1">Desplegable <strong>&nbsp;con HTML</strong><svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></desy-dropdown>
...
Image Added
Listbox
...
 Code Block
languagexml
<desy-listbox ...></desy-listbox>
Permite generar un desplegable con una lista de opciones
...
 
...
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del listado.
Sí
text
string
Contenido del botón en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del botón en formato HTML.
Sí, cuando no se especifica text.
isMultiselectable
boolean
Indica si se pueden seleccionar varias opciones
...
 
doesChangeButtonText
boolean
Indica si, en caso de selección única, la opción seleccionada se muestra como texto del botón.
...
 
label
ListboxLabelData
Permite especificar el texto descriptivo que precede al botón.
...
 
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el botón.
...
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.
...
idPrefix
string
Prefijo para la id de los items. Si no se especifica se utilizará el id + ‘-listbox-item’.
...
disabled
boolean
Deshabilita el boton
...
 
items
ListboxItemData[]
Permite especificar los items del listado. Permite utilizar two-way binding para detectar cuando se activan o desactivan los items.
...
 
 
ListboxLabelData
Propiedad
Tipo
Descripción
Obligatorio
text
string
Contenido del label en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del label en formato HTML.
Sí, cuando no se especifica text.
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el label.
...
 
ListboxItemData
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del item. Si no se especifica, se utilizará el prefijo del listbox + el índice en la lista.
...
 
text
string
Contenido del item en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del item en formato HTML.
...
active
boolean
Indica si el item está activo. Esta propiedad se modifica cuando el usuario selecciona o deselecciona el item.
...
title
string
Atributo html title del item.
...
El item admite los siguientes parámetros de accesibilidad.
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad.
...
 Expand
titleContenido
Se permite proyectar contenido dentro del listbox para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
ListboxLabelComponent
 Code Block
languagexml
<desy-listbox-label ...>...</desy-listbox-label>
Permite utilizar el contenido especificado como descripción que precede al botón.
Admite las mismas propiedades de entrada que el objeto ListboxLabelData. 
ListboxItemComponent
 Code Block
languagexml
<desy-listbox-item ...>...</desy-listbox-item>
Permite utilizar el contenido especificado como item del listado a mostrar.
Admite las mismas propiedades de entrada que el objeto ListboxItemData. 
 Expand
titleEventos de salida
Evento
Tipo
Descripción
itemsChange
DOM Event
Se emite cuando se produce un cambio en los items (como activar o desactivar una opción).
activeItemChange
DOM Event
Se emite el item activo cuando este se selecciona.
 Expand
titleEjemplos
Listbox base
 Code Block
languagexml
<desy-listbox text="Ejemplo" [label]="{ text: 'Texto de label' }" [isMultiselectable]="true" [id]="'listbox'"
              [items]="[
                {text: 'item1'}, 
                {html: 'item2 {{ svgIcon }}'},
                {text: 'item editable'}]"></desy-listbox>
...
Image Added
Listbox con contenido
 Code Block
languagehtml
<desy-listbox text="Ejemplo" [doesChangeButtonText]="true" [id]="'listbox'">
  <desy-listbox-label>Texto de label</desy-listbox-label>
  <desy-listbox-item>item1</desy-listbox-item>
  <desy-listbox-item>item2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg></desy-listbox-item>
  <desy-listbox-item>item editable</desy-listbox-item>
</desy-listbox>
Image Added
 Anchor
...
errorMessage
...
errorMessage
Pill
...
 Code Block
languagexml
<desy-pill ...></desy-pill>
...
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
text
string
Contenido del texto de ayuda 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.
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
type
string
Tipo de pill. Los valores posibles son:
  • span (por defecto)
  • button
  • a
href
string
Ruta externa a la que se redirigirá al pulsar el botón de tipo pill. 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 ).
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
Image RemovedImage Added
pill
 Code Block
languagexml
<desy-pill id="example-pill" text="Focussed" classes="ds-focus" type="button" (clickEvent)="gestionarClick($event)"></desy-pill>
Image RemovedImage Added
Pill con contenido
 Code Block
languagexml
<desy-pill id="example-pill" classes="ds-focus" type="button" (clickEvent)="gestionarClick($event)">Esto es un pill <strong>&nbsp;con HTML</strong><svg viewBox="0 0 140 140" class=" self-center ml-2 " aria-hidden="true" width=" .75em " height=" .75em "><path fill="currentColor" d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z"></path></svg></desy-pill>
Toggle
...
 Code Block
 
language
...
html
<desy-toggle ... >
  <desy-toggle-onState ...></desy-toggle-onState>
  <desy-toggle-offState ...></desy-toggle-offState>
</desy-toggle>
...
 
Permite representar un botón de tipo toggle
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
isSwitch
boolean
Indica si es botón es switch
 
pressed
boolean
Indica si el botón esta pulsado
 
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
 
isExpandible
boolean
Indica si el botón es expandible (atributos “aria”)
 
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
Implementacion con iconos
Image RemovedImage Added
 Code Block
languagehtml
<desy-toggle [id]="'id2'" [isSwitch]="isSwitch" [pressed]="pressed" [classes]="classes" (clickEvent)="toggle($event)">
  <desy-toggle-on-state><span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><g transform="scale(3.42857)"><circle cx="7" cy="7" r="2" fill="currentColor" /><path d="m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z" fill="currentColor"/></g></svg>Mostrar</span></desy-toggle-on-state>
  <desy-toggle-off-state><span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z" fill="currentColor" transform="scale(3.42857)"/></svg><span aria-hidden="true">Ocultar</span><span class="sr-only">Mostrar</span></span></desy-toggle-off-state>
</desy-toggle>
 
 Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoToggleComponent {
	...
	toggle(event: any): void {
	   ...
	}
	...
}


 
Implementacion switch
Image RemovedImage Added
 Code Block
 
language
code
html
<desy-toggle [id]="'id3'" [isSwitch]="'true'" [pressed]="pressed" [classes]="classes" (clickEvent)="toggle($event)">
  <desy-toggle-on-state><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">on</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" ></span></span></desy-toggle-on-state>
  <desy-toggle-off-state><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">off</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" ></span></span></desy-toggle-off-state>
</desy-toggle>
 
 Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoToggleComponent {
	...
	toggle(event: any): void {
	   ...
	}
	...
}


 
Accesibilidad
...
En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.
Parámetro
Atributo de accesibilidad equivalente
role
role
ariaLabel
aria-label
ariaDescribedBy
aria-describedby
ariaLabelledBy
aria-labelledby
ariaHidden
aria-hidden
ariaDisabled
aria-disabled
ariaControls
aria-controls
ariaCurrent
aria-current
ariaLive
aria-live
ariaExpanded
aria-expanded
ariaErrorMessage
aria-errormessage
ariaHasPopup
aria-haspopup
ariaModal
aria-modal
tabindex
tabindex
...