DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Buscar

Ayudar a navegar y encontrar

En aplicaciones web o portales.

Casos de uso

En aplicaciones web

Buscador

Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-buscar-en-el-sitio.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-buscar-en-el-sitio.njk

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

<div class="lg:w-1/2">
  <h2 class="c-h3 lg:c-h2">Buscador</h2>
  <form action="#">
    {{ componentSearchbar({
      "id": "searchbar-home",
      "label": {
        "text": "Buscar"
      },
      "placeholder": "Introduce un término de búsqueda",
      "button": {
        "text": "Buscar",
        "type": "submit",
        "classes": "c-button--primary"
      },
      "classes": "flex-1"
    }) }}
  </form>
</div>

Cuándo lo utilizamos

Qué componentes utilizamos

En portales

Es posible configurar tu propio Programmable Search Engine de Google como barra de búsqueda de tu sitio web.

Mostrar código del ejemplo: includes/_pattern.google-searchbar.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.google-searchbar.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
{% from "components/nav/_macro.nav.njk" import componentNav %}
{% from "components/details/_macro.details.njk" import componentDetails %}

{% set buscador %}
  <div class="-mb-xs lg:mb-0">
    <script async src="https://cse.google.com/cse.js?cx=5513ad10548fa470b"></script>
    <div class="gcse-searchbox-only"></div>
  </div>
{% endset %}

{% call componentHeaderAdvanced({
"skipLink": {
  "href": skipLinkHref if skipLinkHref else "#content"
},
"sub": {
  "customNavigationHtml": '<div class="hidden lg:grid grid-cols-2 lg:grid-cols-6 gap-xl h-full"><div class="col-start-1 col-end-2 lg:col-span-2 lg:col-end-7 place-self-end flex items-center justify-end w-full"><div class="flex-1">'+ buscador | safe +'</div></div></div>',
  "classes": "hidden lg:block relative -top-32 h-0"
},
"title": {
    "homepageUrl": "index.html",
    "text": "Título del portal"
  },
  "navigation": {
    "items": [
      {
        "href": "#1",
        "text": "Inicio"
      },
      {
        "href": "#2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#3",
        "text": "Navigation item 3"
      },
      {
        "href": "#4",
        "text": "Navigation item 4"
      }
    ]
  },
  "offcanvas": {
    "text": "Menú",
    "textClose": "Cerrar menú"
  },
  "classes": "relative z-40"
}) %}
  <nav class="w-full p-2" aria-labelledby="menu-patron-movil-title">
    <h2 id="menu-patron-movil-title" class="sr-only">Menú principal</h2>
    <div class="-mx-sm p-base bg-primary-light">
      <h3 class="mb-sm text-base font-bold">Buscar</h3>
      <script async src="https://cse.google.com/cse.js?cx=5513ad10548fa470b"></script>
      <div class="gcse-searchbox-only"></div>
    </div>
    <h3 class="p-base text-base font-bold">Título del portal</h3>
    {{ componentNav({
      "idPrefix": "nav-patron-mobile-pages",
      "hasNav": false,
      "items": [
        {
        "href": "#1",
        "text": "Inicio"
      },
      {
        "href": "#2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#3",
        "text": "Navigation item 3"
      },
      {
        "href": "#4",
        "text": "Navigation item 4"
      }
    ]
    })  }}
  </nav>
{% endcall %}

Ubicación

Cómo funciona

  • Utiliza la herramienta Programmable Search Engine de Google para configurar la barra de búsqueda de tu portal. Tienes control sobre algunos filtros, etiquetas y apariencia. También necesitarás configurar una página donde se muestran los resultados de la búsqueda.
  • Coloca el código que genera la herramienta como en el ejemplo del patrón.
  • Utiliza una hoja de estilos CSS para personalizar la apariencia del componente y la página de resultados. Puedes basarte en los estilos desy para la barra de búsqueda de Google utilizados en este portal.