Como adicionar uma seção de pesquisa

Pesquisa

Uma seção Search permite que os usuários do seu app encontrem qualquer artigo, vídeo, foto, podcast, evento ou lugar digitando uma palavra. Os resultados são separados em uma aba por tipo de conteúdo, e uma barra de pesquisa na Home deixa tudo a um toque.

Adicionar uma seção de pesquisa

Você a adiciona em "My App", Structure, com "Add a section"… digite "search" para encontrar o bloco dela. Um app pode ter várias seções Search: o River Daily já tem uma, então esta nova ganha um título próprio.

Dê um nome a ela com até 32 caracteres. Aqui, "Search the news".

Em "Search engine tabs", todos os tipos de conteúdo do seu app vêm marcados, e cada um vira uma aba de resultados. Clique em Add.

A seção entra no final do seu menu, e a pré-visualização mostra a página dela: um campo de pesquisa e, abaixo, uma aba por tipo.

Pesquisar na pré-visualização

Os usuários digitam uma palavra e apertam Enter. Vamos pesquisar "fog".

A pesquisa lê o texto do seu conteúdo, não só os títulos, e separa o que encontra por tipo: dois artigos… duas fotos… e um podcast.

Um toque abre um item em uma página própria… com a barra de ferramentas da seção. Aqui, "fog" estava no texto, não no título.

Uma aba sem resultados avisa isso e sugere outra pesquisa.

Escolher o que é pesquisado

Para escolher o que a seção pesquisa, abra-a e clique na engrenagem.

O lápis de cada tipo renomeia a aba: Sound vira Podcasts… e Enter salva. A aba da pré-visualização muda na hora.

Arraste um tipo pelas setas para reordenar as abas: Photos sobe, logo depois de Articles.

Desmarque os tipos que prefere deixar de fora. Aqui, Map e Calendar.

Abra um tipo para escolher as seções dele: desmarcar Sports tira as matérias dessa seção dos resultados… e clique em Save.

No app, o campo de pesquisa guarda as pesquisas recentes. Um toque refaz a pesquisa por "fog"… agora com quatro abas na nova ordem, e sem a matéria de Sports.

Design

De volta à seção, o "Edit the design" do card Search define o visual das abas e dos resultados.

Escolha um estilo de aba: Block ou "Material Design"… que sublinha a aba selecionada.

Em "No results", "Icon color" define a cor da lupa exibida quando uma aba não encontra nada… aqui, laranja.

Barra de ferramentas

O card Toolbar define as ações exibidas no topo de um item aberto a partir dos resultados.

Marque Comments… e um botão de comentários se junta a Share, Favorites e aos de tamanho da fonte na página do item.

Uma barra de pesquisa na Home

Adicionar a seção também colocou a barra de pesquisa dela no final da sua Home, como explica a nota abaixo.

Clique em Reorder e depois suba-a com a seta dela… até o topo da lista e clique em Done: a barra de pesquisa agora fica no topo da sua Home.

Os usuários digitam uma palavra ali mesmo… e chegam aos resultados de "Search the news".

Suas mudanças chegam aos usuários do seu app quando você publicar, com "Publish my project".