Change language
Python.Engineering Wiki Guias JavaScript

Guias JavaScript

__main__ Python module | absolute | Bootstrap JavaScript library | code Python module | COM PHP module | Ctype PHP module | dis Python module | Ev PHP module | html Python module | iat | io Python module | JavaScript | jQuery JavaScript library | os Python module | parallel PHP module | pty Python module | Python Development | Python functions | Radius PHP module | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module
Michael Zippo Michael Zippo

As guias CSS são realmente ótimas para exibir informações relacionadas em um local fácil de navegar. Eles basicamente se parecem com divisores com guias que você veria em uma caixa de receita ou fichário. Exemplos de sites que usam as guias de navegação:

Ao examinar esses dois sites, pense nos benefícios do uso de tal componente da interface do usuário nos sites. Quais problemas precisam ser resolvidos? Que tipo de informação seriam as abas de navegação é um bom trabalho de desenvolvimento?

Quando você precisa alcançar uma árvore da interface do usuário que organiza o texto ou a informação em componentes significativos e os exibe na tela sem ocupando muito espaço, as guias de navegação são uma escolha sábia. Falaremos sobre as abas de navegação com mais profundidade à medida que começarmos a usar JavaScript, jQuery e/ou Bootstrap, mas também há um trabalho formal que poderíamos usar que requer apenas HTML e CSS puros. Vamos dar uma olhada na configuração:

Configure seu código HTML:

Vá em frente e configure seu HTML padrão com um contêiner dentro do corpo que atuará como o contêiner principal do projeto . Você pode nomeá-lo como quiser no atributo class, mas eu o chamarei de class = "tabs". Até agora, seu código HTML deve ficar assim:


No " tabs" e chamar cada um com uma classe tab. Isso representa cada uma das quatro cartas que escreveremos hoje. Ele conterá nossa entrada, rótulos de guias e conteúdo de guias. Vamos criar contêineres vazios para todos eles:

< /html>

Dentro do nome da classe de conteúdo estará nosso conteúdo. Você pode usar qualquer conteúdo que desejar, mas é uma prática comum usar o conteúdo associado em uma guia

Hora de iniciar o CSS:

Quando se trata de escrever CSS, comece com o maior contêiner e vá até o menor contêiner aqui é o mínimo que precisamos fazer para fazê-lo. trabalho:

  1. Defina um seletor genérico em uma caixa de calibração . border-box
  2. No container principal, você deve ter a propriedade display definida como flex e position definida como relativa. Exibição: flex permite que os cartões sejam colocados um ao lado do outro em uma linha, e a posição relativa, portanto, atua como um limite ou cerca que mantém o conteúdo do mapa.

Neste ponto, você verá o que parece ser quatro blocos de texto com um botão de rádio e algum conteúdo, então precisamos encontrar uma maneira de mostrar o bloco selecionado e ocultar os outros blocos.


  1. No .tab container , vamos corrigir o estilo do rótulo:.
    1. 1px de borda sólida na cor desejada
    2. Preenchimento: 5px, 10px - adicionará espaço ao redor do texto do rótulo
    3. 10px border-radius , 10px, 0px, 0px - isso fará com que o rótulo pareça mais com um cartão tradicional.

Se você verificar seu trabalho agora, verá que os rótulos têm os botões circulares à sua esquerda. Portanto, parece mais uma guia tradicional, mas para ainda manter o atributo selecionado do botão, precisamos ocultar a parte circular do botão de opção.

  1. Para realmente selecionar o botão, devemos use .tab [tipo = `rádio`]. Para escondê-lo, colocamos em exibição inigualável.

Então, temos que abordar o conteúdo real para que ele mostre apenas uma guia por vez.

  1. Selecione o conteúdo div e defina a posição absoluta para. Quando a posição absoluta é definida, o div pode ser definido no pai relativo. Usando para cima, para a direita, para a esquerda e para baixo, você pode definir o conteúdo em qualquer lugar que desejar no div pai. Nesse caso, defina as propriedades left e right como 0. Também queremos criar uma borda e definir uma cor de fundo para uma cor não transparente.
  1. Ajustando o z- índice da guia selecionada trará o painel dessa guia para a frente. Para fazer isso, selecione o botão selecionado e seu conteúdo. Para fazer isso, use-nos [type = `radio`]: check ~ label ~ .content. O "~" entre elementos em CSS nos diz que queremos a classe de conteúdo que ocorre após um elemento de rótulo que ocorre após um botão de opção selecionado.
    1. Para exibir a guia ativa, set [type = `radio`]: marcado ~ label para uma cor de fundo diferente.

      2. Agora, quando o usuário clicar em cada uma das guias, ele poderá alternar entre elas sem ver o conteúdo dos outros painéis . Este é o mínimo necessário para as abas de navegação no trabalho Tente brincar com CSS para mudar o estilo! Um trabalho de comissionamento de trabalho é codificado acima - abaixo: