Change language
Python.Engineering Wiki Guias JavaScript

Guias JavaScript

absolute | around | find | iat | JavaScript | mean | sin
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:

      Shop

      Learn programming in R: courses

      $

      Best Python online courses for 2022

      $

      Best laptop for Fortnite

      $

      Best laptop for Excel

      $

      Best laptop for Solidworks

      $

      Best laptop for Roblox

      $

      Best computer for crypto mining

      $

      Best laptop for Sims 4

      $

      Latest questions

      NUMPYNUMPY

      psycopg2: insert multiple rows with one query

      12 answers

      NUMPYNUMPY

      How to convert Nonetype to int or string?

      12 answers

      NUMPYNUMPY

      How to specify multiple return types using type-hints

      12 answers

      NUMPYNUMPY

      Javascript Error: IPython is not defined in JupyterLab

      12 answers

      All questions

      News

      18/08/2022 TikTok to ban bloggers from posting paid political ads 18/08/2022 WhatsApp is testing a feature to recover deleted messages 18/08/2022 Logitech Announces Headphones for Quest 2 VR Headset

      Wiki

      __del__

      Python OpenCV | cv2.putText () method

      __del__

      numpy.arctan2 () in Python

      __del__

      Python | os.path.realpath () method

      around

      Python OpenCV | cv2.circle () method

      cvtcolor

      Python OpenCV cv2.cvtColor () method

      Python functions

      Python - Move item to the end of the list

      Counters

      time.perf_counter () function in Python

      __dict__

      Check if one list is a subset of another in Python

      __del__

      Python os.path.join () method