desy-html

Searchbar

Parámetros Nunjucks del componente: "Searchbar". Versión: 12.0.1

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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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"
}) }}