desy-html

Spinner

Parámetros Nunjucks del componente: "Spinner". Versión: 12.0.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: text\n  type: string\n  required: false\n  description: Text for screenreaders.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the spinner component.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the spinner component.","length":343}

Default

Ejemplo: "Default", de código HTML, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
</span>
<!-- /spinner -->

Ejemplo: "Default", de código Nunjucks, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner(undefined) }}
Mostrar códigodel ejemplo: Default

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner(undefined) }}

Con texto para lector de pantalla

Usa un texto personalizado para lectores de pantalla en vez del texto por defecto.

Ejemplo: "Con texto para lector de pantalla", de código HTML, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- spinner -->
<span class="c-spinner text-neutral-base" data-module="c-spinner">
  <span class="sr-only" role="alert" aria-live="assertive">
    Espere por favor
  </span>
</span>
<!-- /spinner -->

Ejemplo: "Con texto para lector de pantalla", de código Nunjucks, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "text": "Espere por favor",
  "classes": "text-neutral-base"
}) }}
Mostrar códigodel ejemplo: Con texto para lector de pantalla

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "text": "Espere por favor",
  "classes": "text-neutral-base"
}) }}

Tamaño xs

Usa las clases de tamaño de texto para dar tamaño al Spinner.

Ejemplo: "Tamaño xs", de código HTML, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- spinner -->
<span class="c-spinner text-xs" data-module="c-spinner">
</span>
<!-- /spinner -->

Ejemplo: "Tamaño xs", de código Nunjucks, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-xs"
}) }}
Mostrar códigodel ejemplo: Tamaño xs

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-xs"
}) }}

Tamaño lg

Ejemplo: "Tamaño lg", de código HTML, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- spinner -->
<span class="c-spinner text-lg" data-module="c-spinner">
</span>
<!-- /spinner -->

Ejemplo: "Tamaño lg", de código Nunjucks, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-lg"
}) }}
Mostrar códigodel ejemplo: Tamaño lg

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-lg"
}) }}

Tamaño 6xl

Ejemplo: "Tamaño 6xl", de código HTML, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- spinner -->
<span class="c-spinner text-6xl" data-module="c-spinner">
</span>
<!-- /spinner -->

Ejemplo: "Tamaño 6xl", de código Nunjucks, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-6xl"
}) }}
Mostrar códigodel ejemplo: Tamaño 6xl

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-6xl"
}) }}

Color neutral color base

Usa las clases de color de texto para dar color al Spinner.

Ejemplo: "Color neutral color base", de código HTML, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- spinner -->
<span class="c-spinner text-neutral-base" data-module="c-spinner">
</span>
<!-- /spinner -->

Ejemplo: "Color neutral color base", de código Nunjucks, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-neutral-base"
}) }}
Mostrar códigodel ejemplo: Color neutral color base

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-neutral-base"
}) }}

Color primario

Ejemplo: "Color primario", de código HTML, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- spinner -->
<span class="c-spinner text-primary-base" data-module="c-spinner">
</span>
<!-- /spinner -->

Ejemplo: "Color primario", de código Nunjucks, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-primary-base"
}) }}
Mostrar códigodel ejemplo: Color primario

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "text-primary-base"
}) }}

Establecida la anchura y altura del contenedor con clases

Usa las clases de tamaño para cambiar las dimensiones del contenedor.

Ejemplo: "Establecida la anchura y altura del contenedor con clases", de código HTML, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- spinner -->
<span class="c-spinner border border-neutral-light w-60 h-60" data-module="c-spinner">
</span>
<!-- /spinner -->

Ejemplo: "Establecida la anchura y altura del contenedor con clases", de código Nunjucks, para maquetar el componente: "Spinner", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "border border-neutral-light w-60 h-60"
}) }}
Mostrar códigodel ejemplo: Establecida la anchura y altura del contenedor con clases

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}

{{ componentSpinner({
  "classes": "border border-neutral-light w-60 h-60"
}) }}