desy-html

Skip-link

Parámetros Nunjucks del componente: "Skip-link". 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: true\n  description: If `html` is set, this is not required. Text to use within the skip link component. If `html` is provided, the `text` argument will be ignored.\n- name: html\n  type: string\n  required: true\n  description: If `text` is set, this is not required. HTML to use within the skip link component. If `html` is provided, the `text` argument will be ignored.\n- name: href\n  type: string\n  required: false\n  description: The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the skip link.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the skip link.","length":812}

Por defecto

Para ver el componente Skip link, dale al tabulador en este ejemplo, o haz click dentro del ejemplo y presiona el tabulador.

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Skip Link", 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>.

<!-- skip-link -->
<a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline">Saltar al contenido principal</a>
<!-- /skip-link -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Skip Link", 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/skip-link/_macro.skip-link.njk" import componentSkipLink %}

{{ componentSkipLink({
  "text": "Saltar al contenido principal",
  "href": "#content"
}) }}
Saltar al contenido principal
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}

{{ componentSkipLink({
  "text": "Saltar al contenido principal",
  "href": "#content"
}) }}

Con estado focus

Simula activar la pseudoclase de CSS :focus

Ejemplo: "Con estado focus", de código HTML, para maquetar el componente: "Skip Link", 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>.

<!-- skip-link -->
<a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline ds-focus">Saltar al contenido principal</a>
<!-- /skip-link -->

Ejemplo: "Con estado focus", de código Nunjucks, para maquetar el componente: "Skip Link", 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/skip-link/_macro.skip-link.njk" import componentSkipLink %}

{{ componentSkipLink({
  "classes": "ds-focus",
  "text": "Saltar al contenido principal",
  "href": "#content"
}) }}
Saltar al contenido principal
Mostrar códigodel ejemplo: Con estado focus

Contenido

Nunjucks macro
{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}

{{ componentSkipLink({
  "classes": "ds-focus",
  "text": "Saltar al contenido principal",
  "href": "#content"
}) }}