DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Cabeceras

Componentes principales

Se trata de un elemento siempre disponible en la parte superior de la pantalla. Proporciona un acceso a funciones de todo el sistema y elementos de navegación local.

Skip-link

Parámetros Nunjucks del componente: "Skip-link". 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: 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: 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>.

<!-- 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: 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/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: 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>.

<!-- 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: 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/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"
}) }}