Fundação - Classes de Visibilidade
Descrição
O Foundation usa classes de visibilidade para mostrar ou ocultar elementos com base na orientação do dispositivo (retrato e paisagem) ou tamanho da tela (tela pequena, média, grande ou muito grande).
Ele permite que um usuário use elementos baseados no ambiente de navegação.
A tabela a seguir lista as classes de visibilidade do Foundation, que controlam os elementos com base em seu ambiente de navegação -
| Sr. Não. | Classe de visibilidade e descrição |
|---|---|
| 1 | Mostrar por tamanho de tela
Mostra os elementos baseados no dispositivo usando a classe .show . |
| 2 | Ocultar por tamanho de tela
Ele oculta os elementos com base no dispositivo usando a classe .hide . |
Fundação apoia algumas classes onde você pode esconder o conteúdo usando os .hide e .invisible classes e exibe nada na página.
Detecção de orientação
Os dispositivos podem determinar diferentes orientações usando a funcionalidade paisagem e retrato . Os dispositivos portáteis, como telefones celulares, especificam as diferentes orientações quando você os gira. Para desktop, a orientação será sempre paisagem.
Acessibilidade
A tabela a seguir lista as técnicas de acessibilidade para leitores de tela que ocultam o conteúdo enquanto o torna legível por leitores de tela -
| Sr. Não. | Classe de acessibilidade e descrição |
|---|---|
| 1 | Mostrar para leitores de tela
Ele usa a classe show-for-sr para ocultar o conteúdo enquanto evita que os leitores de tela o leiam. |
| 2 | Esconder para leitores de tela
Ele usa o atributo aria-hidden que torna o texto visível, mas não pode ser lido por um leitor de tela. |
| 3 | Criação de links para pular
O leitor de tela criará um link de salto para obter a navegação para o conteúdo do seu site. |
Referência Sass
O Foundation usa os seguintes mixins para exibir a saída CSS, o que permite construir sua própria estrutura de classes para seus componentes -
| Sr. Não. | Mixin e descrição | Parâmetro | Tipo |
|---|---|---|---|
| 1 |
show-for Por padrão, ele oculta um elemento e o exibe acima de um determinado tamanho de tela. |
$ tamanho | Palavra-chave |
| 2 |
show-for-only Por padrão, ele oculta um elemento e o exibe dentro do ponto de interrupção. |
$ tamanho | Palavra-chave |
| 3 |
hide-for Por padrão, ele mostra um elemento e o oculta acima de um determinado tamanho de tela. |
$ tamanho | Palavra-chave |
| 4 |
hide-for-only Por padrão, ele mostra um elemento e o oculta acima de um determinado tamanho de tela. |
$ tamanho | Palavra-chave |
O valor padrão de todos esses mixins será definido como nenhum .