Se essa é sua primeira vez de ouvir sobre o termo “breadcrumb” utilizado em web design, deixe-me mostrar-lhe o que parece:
eu tenho certeza que você já encontrou ela em sites que você visitou. Agora, vamos adicionar um no seu website.To adicione o elemento de uma migalha, simplesmente procure por “migalha” no painel de elementos e arraste o elemento de uma migalha para a área de conteúdo.
você será capaz de ver algo como isto:
Agora, o texto que você está vendo no construtor ou na Pedra Angular não é o texto real que irá aparecer no final do seu site. É apenas um substituto. No front-end, você vai ver a hierarquia das páginas da web começando com o link para a casa na parte esquerda-A maior parte, em seguida, movendo uma criança mais à direita.
neste caso, desde que a página que estamos a criar é o Perfil da Empresa, que neste exemplo é um filho da página Sobre Nós, a estrutura está em: Home > Sobre Nós > Perfil da Empresa.
no grupo do campo de configuração, irá ver os seguintes campos:
Home Label Type
pode escolher se deve usar um texto simples (por exemplo, Home) para a página inicial ou usar um ícone em vez disso.
Home Label
se seleccionou texto no campo do tipo Home Label acima, pode alterar o texto de dizer” Home ” para outra coisa (por exemplo, Blog, News).
Se escolher o ícone, ser-lhe-á dada a opção de escolher o ícone a usar.
largura & Largura máxima
pode definir a largura predefinida do elemento de pão. Você também pode definir sua largura máxima para que não possa ir além dessa largura.
Justification & Direction
Isto permite alterar o conjunto das propriedades Flex CSS do elemento Breadcrumb. Se você não está familiarizado com Flexbox, há uma introdução útil aqui.
fundo
pode adicionar uma cor de fundo ao elemento.
pode definir os tipos de letra, margens, paddings, box-shadows, contornos e raio de contorno do elemento breadcrumb. Verá estas propriedades no painel de controlo.:
note, que estas propriedades mencionadas, quando configuradas, são para todo o elemento pão e não para ligações individuais dentro do referido elemento. Isso significa que, se você definir as Paddings, ele se aplicará a todo o elemento.
Mais tarde discutiremos como configurar ligações individuais dentro da migalha.em migalhas de pão, os “delimitadores” são os separadores de cada ligação.
o delimitador padrão é uma seta, mas podemos mudar isso e até mesmo remover isso por completo. As configurações podem ser encontradas no grupo de campo de configuração do Delímetro.
Agora vamos discutir as configurações individuais.
activar
por omissão, os delimitadores estão ligados, mas você pode desligá-lo, removendo assim qualquer delimitador.
tipo de delimitador
tal como no tipo de legenda pessoal no grupo de campo de configuração discutido anteriormente, poderá escolher se deseja usar o texto ou o ícone para o tipo de delimitador. Quando dizemos “texto”, não significa necessariamente palavras, embora as palavras sejam permitidas. O que é geralmente utilizado são os códigos ASCII. O delimitador padrão, → é um código ASCII que gera a seta.
Se escolher o ícone como tipo de delimitador, ser-lhe-á mostrado o campo selector de ícones para escolher os ícones que deseja usar.
LTR& delimitador RTL
LTR significa “Da esquerda para a direita”, enquanto RTL significa “da direita para a esquerda”. Estes basicamente significam a direção na forma como lemos as cartas. Por exemplo, você está lendo este artigo começando da esquerda para a direita, assim, este é o LTR. Línguas como o árabe e o hebraico lêem os seus caracteres e palavras a partir da direita para a esquerda.
alguns sites suportam vários idiomas onde tanto LTR e RTL são suportados. Esta configuração prepara o seu delimitador de migalhas de pão, permitindo-lhe definir não só o delimitador LTR, mas também o que usar quando o RTL estiver activo.
espaçamento
o valor que colocar aqui será definido como a distância tanto do lado esquerdo como do lado direito do separador. Então, se você definir 10px como o valor, cada delimitador terá um espaço de 10px à sua esquerda e outro 10px à sua direita.
As configurações de Links são virtualmente as mesmas que as configurações de configuração e Design combinadas. A principal diferença é que as configurações de Links são específicas para os links individuais, enquanto os dois primeiros são aplicados ao próprio elemento de pão.
a configuração das ligações permite-lhe também definir a cor de texto e a cor de fundo de todas as ligações dentro da migalha que o rato está a pairar sobre uma ligação.
Personalize
a secção personalizar consiste em controlos para personalizar o elemento se estiver em HTML, CSS e Javascript.
- ID – Use esta opção para definir um ID HTML para o elemento. O ID deve ser único na página.
- Class-Use esta opção para definir uma classe HTML para o elemento. Você pode usar a classe para o seu código CSS personalizado.
- elemento CSS-Use esta opção para ter um melhor controlo sobre o elemento para aceder às marcas internas do elemento usando
$elcomo selecção CSS. Clique aqui para obter informações mais detalhadas. - esconder durante o ponto de paragem – Use esta opção para esconder o elemento em diferentes tamanhos de dispositivos. Clique aqui para mais informações.atributos personalizados
- – Use esta opção para adicionar atributos personalizados à marca de HTML do elemento. Tal como
data-info=123. Você pode usar a opção para injectar informações personalizadas no elemento a usar em seu código de personalização.
Demo
para ver uma demonstração ao vivo do elemento Breadcrumbs Clique aqui.
resumo
em apenas alguns minutos, você aprendeu a adicionar e configurar migalhas de pão para o Construtor de pedra angular / conteúdo. Você aprendeu a projetar o elemento da migalha, bem como seus links individuais. Finalmente você também aprendeu a configurar o delimitador a seu gosto.Vês alguma coisa imprecisa? Deixe-nos saber