Spinner
Información visual
Objeto que indica que la sección o la página está cargando.
Spinner
Parámetros Nunjucks del componente: "Spinner". Versión: 4.0.0
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}
Mostrar parámetros
Parámetros Nunjucks del componente: "Spinner"
params:
- name: text
type: string
required: false
description: Text for screenreaders.
- name: classes
type: string
required: false
description: Classes to add to the spinner component.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the spinner component.
Default #
Ejemplo: "Default", de código HTML, para maquetar el componente: "Spinner", versión: 4.0.0, 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: 4.0.0, 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
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: 4.0.0, 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: 4.0.0, 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
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: 4.0.0, 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: 4.0.0, 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
Tamaño lg #
Ejemplo: "Tamaño lg", de código HTML, para maquetar el componente: "Spinner", versión: 4.0.0, 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: 4.0.0, 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
Tamaño 6xl #
Ejemplo: "Tamaño 6xl", de código HTML, para maquetar el componente: "Spinner", versión: 4.0.0, 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: 4.0.0, 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
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: 4.0.0, 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: 4.0.0, 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
Color primario #
Ejemplo: "Color primario", de código HTML, para maquetar el componente: "Spinner", versión: 4.0.0, 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: 4.0.0, 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
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: 4.0.0, 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: 4.0.0, 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