DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Item de estado

Datos

Bloque con listas de descripción o etiquetas, además de información del estado de las aportaciones realizadas. Generalmente utilizado en formularios.

Status

Parámetros Nunjucks del componente: "Status". 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: Text for the status.\n- name: icon\n  type: object\n  required: true\n  description: This is the icon at right\n  - name: html\n    type: string\n    required: false\n    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.\n  - name: type\n    type: string\n    required: false\n    description: Predefined icon types are `success`, `alert`,`loading` and `error`. Defaults to `success`.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the status component.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the status component.","length":741}

Éxito

Ejemplo: "Éxito", de código HTML, para maquetar el componente: "Status", 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>.

<!-- status -->
<div>
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Completo
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
        <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
      </svg>
    </span>
  </p>
</div>
<!-- /status -->

Ejemplo: "Éxito", de código Nunjucks, para maquetar el componente: "Status", 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/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Completo",
  "icon": {
    "type": "success"
  }
}) }}

Completo

Mostrar códigodel ejemplo: Éxito

Contenido

Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Completo",
  "icon": {
    "type": "success"
  }
}) }}

Alerta

Ejemplo: "Alerta", de código HTML, para maquetar el componente: "Status", 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>.

<!-- status -->
<div class="text-alert-base">
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Incompleto
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
        <path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor" />
      </svg>
    </span>
  </p>
</div>
<!-- /status -->

Ejemplo: "Alerta", de código Nunjucks, para maquetar el componente: "Status", 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/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Incompleto",
  "icon": {
    "type": "alert"
  },
  "classes": "text-alert-base"
}) }}

Incompleto

Mostrar códigodel ejemplo: Alerta

Contenido

Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Incompleto",
  "icon": {
    "type": "alert"
  },
  "classes": "text-alert-base"
}) }}

Cargando

Ejemplo: "Cargando", de código HTML, para maquetar el componente: "Status", 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>.

<!-- status -->
<div>
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Subiendo (20%)
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" focusable="false">
        <path d="M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z" fill="currentColor" />
        <path d="M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z" fill="currentColor" />
      </svg>
    </span>
  </p>
</div>
<!-- /status -->

Ejemplo: "Cargando", de código Nunjucks, para maquetar el componente: "Status", 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/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Subiendo (20%)",
  "icon": {
    "type": "loading"
  }
}) }}

Subiendo (20%)

Mostrar códigodel ejemplo: Cargando

Contenido

Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Subiendo (20%)",
  "icon": {
    "type": "loading"
  }
}) }}

Error

Ejemplo: "Error", de código HTML, para maquetar el componente: "Status", 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>.

<!-- status -->
<div class="text-alert-base">
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Error
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
        <path d="M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z" fill="currentColor" />
        <path d="M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z" fill="currentColor" />
      </svg>
    </span>
  </p>
</div>
<!-- /status -->

Ejemplo: "Error", de código Nunjucks, para maquetar el componente: "Status", 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/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Error",
  "icon": {
    "type": "error"
  },
  "classes": "text-alert-base"
}) }}

Error

Mostrar códigodel ejemplo: Error

Contenido

Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Error",
  "icon": {
    "type": "error"
  },
  "classes": "text-alert-base"
}) }}

Icono personalizado

Ejemplo: "Icono personalizado", de código HTML, para maquetar el componente: "Status", 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>.

<!-- status -->
<div>
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Atención
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" aria-hidden="true" focusable="false">
        <path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor" />
      </svg>
    </span>
  </p>
</div>
<!-- /status -->

Ejemplo: "Icono personalizado", de código Nunjucks, para maquetar el componente: "Status", 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/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Atención",
  "icon": {
    "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
  }
}) }}

Atención

Mostrar códigodel ejemplo: Icono personalizado

Contenido

Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}

{{ componentStatus({
  "text": "Atención",
  "icon": {
    "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
  }
}) }}