DESY

Sistema de Diseño del Gobierno de Aragón.

Índice de apartados de esta página

Barra de búsqueda

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

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: The id of the input
- name: value
  type: string
  required: false
  description: Optional initial value of the input.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  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`.
  isComponent: true
- name: classes
  type: string
  required: false
  description: Classes to add to the input.
- name: buttonClasses
  type: string
  required: false
  description: Classes to add to the search icon.
- name: button
  type: component
  required: false
  description: button component parameters. If there are any, the searchbar will show a button after the input instead of the lens icon.
- name: placeholder
  type: string
  required: false
  description: Placeholder text
- name: disabled
  type: boolean
  required: false
  description: If true, input will be disabled.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the anchor tag.

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

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

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