Adicionar um painel de separadores.
Use Tabs quando quiser vários blocos de conteúdo relacionado num lugar, com apenas um visível de cada vez. Fica com uma fila de rótulos de separadores; os visitantes clicam num rótulo para ver o seu conteúdo. O exemplo constrói uma página de agência com um separador por serviço. Para perguntas e respostas, um painel dobrável costuma ler-se melhor.
Adicionar um painel de separadores
- Paire o cursor sobre a coluna e clique em + na sua barra de controlos, ou no + no meio de uma coluna vazia, para abrir o seletor de elementos.
- No separador Layout, clique em Tabs. O elemento aparece com um separador, com o rótulo Title.
- Paire o cursor sobre o painel do separador e abra More > Settings. Escreva um nome em Tab title e clique em Save.
- Clique em + dentro do painel para adicionar conteúdo, como um elemento Text.
- Para adicionar um separador, paire o cursor sobre os rótulos e clique em Add tab na barra de controlos de Tabs. O separador novo fica primeiro, à frente dos outros. Dê-lhe nome e preencha-o da mesma forma.
O que vê
Uma fila de rótulos fica por cima do conteúdo do separador aberto. Em Preview e na página publicada, um clique num rótulo mostra o conteúdo desse separador e esconde o resto. Cada separador tem os seus próprios elementos, por isso um separador pode ter texto e outro um conjunto de cartões. Em ecrãs com menos de 768 píxeis, os separadores tornam-se cabeçalhos empilhados que abrem como um painel dobrável.
Configure os seus separadores
O elemento Tabs tem três definições. Abra-as em More > Settings na barra de controlos de Tabs, que aparece quando paira o cursor sobre os rótulos.
| Definição | O que faz | Predefinição |
|---|---|---|
| Tab direction | Onde ficam os rótulos: Default (por cima do conteúdo), Left ou Right | Default |
| Style | O aspeto dos rótulos: Default (uma linha por baixo dos rótulos), Modern (cartões arredondados) ou Accordion (cabeçalhos com linhas de separação) | Default |
| Mobile friendly | Mostra os separadores como cabeçalhos dobráveis em ecrãs com menos de 768 píxeis | On |
Cada separador tem as suas próprias definições em More > Settings no seu painel. Tab title é o texto do rótulo. Tab description é uma linha curta opcional por baixo do rótulo do separador aberto.
Gerir separadores
- Reorder: arraste um rótulo para um lugar novo entre os rótulos. O seu conteúdo vai com ele.
- Rename: paire o cursor sobre o painel do separador, abra More > Settings, mude o Tab title e clique em Save.
- Remove: paire o cursor sobre o painel do separador, abra More e escolha Delete. Tudo o que está dentro do separador é removido com ele.
Limite os rótulos a uma a três palavras e fique-se por cerca de cinco separadores, para os rótulos caberem numa linha.
Se não o vir
- O separador novo fica primeiro em vez de último. Add tab põe sempre o separador novo à frente. Arraste o seu rótulo para o lugar pretendido.
- As definições mostram apenas Tab title e Tab description. Abriu as definições de um separador. Paire o cursor sobre os rótulos para aparecer a barra de controlos de Tabs e abra aí More > Settings.
- Os telemóveis mostram cabeçalhos empilhados em vez de separadores. Mobile friendly está ligado, que é a predefinição. Desligue-o nas definições de Tabs para manter separadores em todas as larguras de ecrã.
- Falta Tabs no separador Layout do seletor. O seu perfil de utilizador do DXPR Builder exclui-o. Um administrador marca Tabs em Elements no seu perfil em
/admin/dxpr_studio/dxpr_builder/profile.
E a seguir?
- Adicionar um painel dobrável: empilhe perguntas e respostas que abrem uma de cada vez.
- Adicionar um esquema de carrossel: mostre o mesmo tipo de conteúdo um diapositivo de cada vez.
- Adicionar um esquema aninhado: ponha filas e colunas dentro de um separador para esquemas mais ricos.