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

Por defecto

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

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

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

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de 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": "Esto es un mensaje de error",
    "classes": "mt-xs"
  }
}) }}

Con label visible

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

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.

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.

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"
}) }}