desy-html

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