desy-html

Skip-link

Parámetros Nunjucks del componente: "Skip-link". Versión: 12.1.0

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

        {"val":"params:\r\n- name: text\r\n  type: string\r\n  required: true\r\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.\r\n- name: html\r\n  type: string\r\n  required: true\r\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.\r\n- name: href\r\n  type: string\r\n  required: false\r\n  description: The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value.\r\n- name: classes\r\n  type: string\r\n  required: false\r\n  description: Classes to add to the skip link.\r\n- name: attributes\r\n  type: object\r\n  required: false\r\n  description: HTML attributes (for example data attributes) to add to the skip link.","length":832}

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.1.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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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.1.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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
}) }}