DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Barra de búsqueda

Navegación

Consiste en una caja que permite introducir texto. Este componente se emplea para que el usuario pueda realizar búsquedas de contenido en el sitio web o en una vista.

Searchbar

Parámetros Nunjucks del componente: "Searchbar". 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: id\n  type: string\n  required: true\n  description: The id of the input\n- name: value\n  type: string\n  required: false\n  description: Optional initial value of the input.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\n- name: label\n  type: object\n  required: true\n  description: Options for the label component.\n  isComponent: true\n- name: errorMessage\n  type: object\n  required: false\n  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.\n  isComponent: true\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the input.\n- name: buttonClasses\n  type: string\n  required: false\n  description: Classes to add to the search icon.\n- name: button\n  type: component\n  required: false\n  description: button component parameters. If there are any, the searchbar will show a button after the input instead of the lens icon.\n- name: placeholder\n  type: string\n  required: false\n  description: Placeholder text\n- name: disabled\n  type: boolean\n  required: false\n  description: If true, input will be disabled.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the anchor tag.","length":1469}

Por defecto

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

<!-- searchbar -->
<!-- label -->
<label class="block sr-only not-sr-only mb-sm" for="searchbar-1">Buscar</label>
<!-- /label -->
<div class="relative">
  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full" id="searchbar-1" name="searchbar-1" type="search">
  <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
    <span class="sr-only">Buscar</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
      <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
    </svg>
  </button>
</div>
<!-- /searchbar -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Searchbar", 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/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-1",
  "label": {
    "text": "Buscar",
    "classes": "not-sr-only mb-sm"
  }
}) }}
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-1",
  "label": {
    "text": "Buscar",
    "classes": "not-sr-only mb-sm"
  }
}) }}

Con placeholder

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

<!-- searchbar -->
<!-- label -->
<label class="block sr-only undefined" for="searchbar-2">Buscar</label>
<!-- /label -->
<div class="relative">
  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full" id="searchbar-2" name="searchbar-2" type="search" placeholder="Buscar en este sitio">
  <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
    <span class="sr-only">Buscar</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
      <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
    </svg>
  </button>
</div>
<!-- /searchbar -->

Ejemplo: "Con placeholder", de código Nunjucks, para maquetar el componente: "Searchbar", 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/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-2",
  "label": {
    "text": "Buscar"
  },
  "placeholder": "Buscar en este sitio"
}) }}
Mostrar códigodel ejemplo: Con placeholder

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-2",
  "label": {
    "text": "Buscar"
  },
  "placeholder": "Buscar en este sitio"
}) }}

Deshabilitado

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

<!-- searchbar -->
<!-- label -->
<label class="block sr-only undefined" for="searchbar-3">Buscar</label>
<!-- /label -->
<div class="relative">
  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full" id="searchbar-3" name="searchbar-3" type="search" disabled>
  <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" disabled="disabled" aria-disabled="true">
    <span class="sr-only">Buscar</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
      <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
    </svg>
  </button>
</div>
<!-- /searchbar -->

Ejemplo: "Deshabilitado", de código Nunjucks, para maquetar el componente: "Searchbar", 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/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-3",
  "label": {
    "text": "Buscar"
  },
  "disabled": true
}) }}
Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-3",
  "label": {
    "text": "Buscar"
  },
  "disabled": true
}) }}

Con mensaje de error

Ejemplo: "Con mensaje de error", de código HTML, para maquetar el componente: "Searchbar", 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>.

<!-- searchbar -->
<!-- label -->
<label class="block sr-only undefined" for="searchbar-4">Buscar</label>
<!-- /label -->
<div class="relative">
  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full border-alert-base ring-2 ring-alert-base " id="searchbar-4" name="searchbar-4" type="search" aria-describedby="searchbar-4-error" aria-errormessage="searchbar-4-error" aria-invalid="true">
  <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
    <span class="sr-only">Buscar</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
      <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
    </svg>
  </button>
  <!-- error-message -->
  <p id="searchbar-4-error" class="block font-semibold text-alert-base mt-xs">
    <span class="sr-only">Error:</span>Error: Esto es un mensaje de error
  </p>
  <!-- /error-message -->
</div>
<!-- /searchbar -->

Ejemplo: "Con mensaje de error", de código Nunjucks, para maquetar el componente: "Searchbar", 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/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-4",
  "label": {
    "text": "Buscar"
  },
  "errorMessage": {
    "text": "Error: Esto es un mensaje de error",
    "classes": "mt-xs"
  }
}) }}

Error:Error: Esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-4",
  "label": {
    "text": "Buscar"
  },
  "errorMessage": {
    "text": "Error: Esto es un mensaje de error",
    "classes": "mt-xs"
  }
}) }}

Con label visible

Ejemplo: "Con label visible", de código HTML, para maquetar el componente: "Searchbar", 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>.

<!-- searchbar -->
<!-- label -->
<label class="block sr-only not-sr-only mb-sm" for="searchbar-label-visible">Buscar items recientes</label>
<!-- /label -->
<div class="relative">
  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full" id="searchbar-label-visible" name="searchbar-label-visible" type="search">
  <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
    <span class="sr-only">Buscar</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
      <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
    </svg>
  </button>
</div>
<!-- /searchbar -->

Ejemplo: "Con label visible", de código Nunjucks, para maquetar el componente: "Searchbar", 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/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-label-visible",
  "label": {
    "text": "Buscar items recientes",
    "classes": "not-sr-only mb-sm"
  }
}) }}
Mostrar códigodel ejemplo: Con label visible

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-label-visible",
  "label": {
    "text": "Buscar items recientes",
    "classes": "not-sr-only mb-sm"
  }
}) }}

Peque

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

<!-- searchbar -->
<!-- label -->
<label class="block sr-only undefined" for="searchbar-5">Buscar</label>
<!-- /label -->
<div class="relative">
  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="searchbar-5" name="searchbar-5" type="search">
  <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
    <span class="sr-only">Buscar</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
      <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
    </svg>
  </button>
</div>
<!-- /searchbar -->

Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Searchbar", 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/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-5",
  "label": {
    "text": "Buscar"
  },
  "classes": "c-input--sm",
  "buttonClasses": "m-xs p-0.5 text-xs"
}) }}
Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-5",
  "label": {
    "text": "Buscar"
  },
  "classes": "c-input--sm",
  "buttonClasses": "m-xs p-0.5 text-xs"
}) }}

Botón personalizado

Añade parámetros del componente Botón para sustituir el icono de la lupa con un botón junto al input.

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

<!-- searchbar -->
<!-- label -->
<label class="block sr-only undefined" for="searchbar-6">Buscar en esta página</label>
<!-- /label -->
<div class="relative flex flex-wrap items-end gap-sm">
  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base flex-1" id="searchbar-6" name="searchbar-6" type="search">
  <!-- button -->
  <button type="submit" class="c-button c-button--primary">
    Buscar
  </button>
  <!-- /button -->
</div>
<!-- /searchbar -->

Ejemplo: "Botón personalizado", de código Nunjucks, para maquetar el componente: "Searchbar", 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/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-6",
  "label": {
    "text": "Buscar en esta página"
  },
  "button": {
    "text": "Buscar",
    "type": "submit",
    "classes": "c-button--primary"
  },
  "classes": "flex-1"
}) }}
Mostrar códigodel ejemplo: Botón personalizado

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-6",
  "label": {
    "text": "Buscar en esta página"
  },
  "button": {
    "text": "Buscar",
    "type": "submit",
    "classes": "c-button--primary"
  },
  "classes": "flex-1"
}) }}

Botón personalizado pequeño

Usamos los parámetros del componente Botón para personalizarlo, en este ejemplo botón peque.

Ejemplo: "Botón personalizado pequeño", de código HTML, para maquetar el componente: "Searchbar", 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>.

<!-- searchbar -->
<!-- label -->
<label class="block sr-only undefined" for="searchbar-7">Buscar en esta página</label>
<!-- /label -->
<div class="relative flex flex-wrap items-end gap-sm">
  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base flex-1 c-input--sm" id="searchbar-7" name="searchbar-7" type="search">
  <!-- button -->
  <button type="submit" class="c-button c-button--sm">
    Buscar
  </button>
  <!-- /button -->
</div>
<!-- /searchbar -->

Ejemplo: "Botón personalizado pequeño", de código Nunjucks, para maquetar el componente: "Searchbar", 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/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-7",
  "label": {
    "text": "Buscar en esta página"
  },
  "button": {
    "text": "Buscar",
    "type": "submit",
    "classes": "c-button--sm"
  },
  "classes": "flex-1 c-input--sm"
}) }}
Mostrar códigodel ejemplo: Botón personalizado pequeño

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

{{ componentSearchbar({
  "id": "searchbar-7",
  "label": {
    "text": "Buscar en esta página"
  },
  "button": {
    "text": "Buscar",
    "type": "submit",
    "classes": "c-button--sm"
  },
  "classes": "flex-1 c-input--sm"
}) }}