Cómo añadir una sección de búsqueda

Búsqueda

Una sección Search permite a los usuarios de tu app encontrar cualquier artículo, vídeo, foto, podcast, evento o lugar escribiendo una palabra. Los resultados se ordenan en una pestaña por tipo de contenido, y una barra de búsqueda en el inicio lo deja todo a un toque.

Añadir una sección de búsqueda

La añades desde «My App», Structure, con «Add a section»… luego busca search para encontrar la tarjeta Search.

Una app puede tener varias secciones Search: River Daily ya tiene una, así que esta nueva lleva un título propio. Haz clic en Add.

Ponle nombre a la sección. Después, haz clic en Add.

La sección se añade al final de tu menú, y la vista previa muestra su página: un campo de búsqueda sobre una pestaña por tipo.

Buscar en la vista previa

Los usuarios escriben una palabra y pulsan Enter. Busquemos fog.

La búsqueda lee el texto de tu contenido, no solo los títulos, y ordena lo que encuentra por tipo: dos artículos… dos fotos… y un podcast.

Un toque abre un elemento en su propia página… con la barra de herramientas de la sección. Aquí, fog estaba en el texto, no en el título.

Una pestaña sin coincidencias lo indica y sugiere otra búsqueda.

Elegir qué se busca

Para elegir qué busca la sección, ábrela y haz clic en el engranaje.

El lápiz de cada tipo cambia el nombre de su pestaña: Sound pasa a ser Podcasts… y Enter lo guarda. La pestaña de la vista previa cambia al instante.

Arrastra un tipo por sus flechas para reordenar las pestañas: Photos sube, justo después de Articles.

Desmarca los tipos que prefieras dejar fuera. Aquí, Map y Calendar.

Abre un tipo para elegir sus secciones: al desmarcar Sports, sus noticias quedan fuera de los resultados… y luego haz clic en Save.

En la app, el campo de búsqueda guarda las búsquedas recientes. Un toque vuelve a lanzar fog… ahora con cuatro pestañas en el nuevo orden, y sin la noticia de Sports.

Diseño

De vuelta en la sección, «Edit the design» de la tarjeta Search define el aspecto de pestañas y resultados.

Elige un estilo de pestaña: Block o «Material Design»… que subraya la pestaña seleccionada.

En «No results», «Icon color» define el color de la lupa que aparece cuando una pestaña no encuentra nada… aquí, naranja.

Barra de herramientas

Su tarjeta Toolbar define las acciones que se muestran arriba de un elemento abierto desde los resultados.

Marca Comments… y un botón de comentarios se suma a Share, Favorites y los botones de tamaño de fuente del elemento.

Una barra de búsqueda en el inicio

Al añadir la sección, su barra de búsqueda se colocó también al final de tu inicio, como explica la nota.

Haz clic en Reorder y súbela con su flecha… hasta lo alto de la lista, y haz clic en Done: la barra de búsqueda queda arriba de tu inicio.

Los usuarios escriben una palabra ahí mismo… y llegan a los resultados de «Search the news».

Tus cambios llegan a los usuarios de tu app cuando los publicas, con «Publish my project».