Podstawa - Klasy widoczności

Opis

  • Foundation używa klas widoczności do pokazywania lub ukrywania elementów na podstawie orientacji urządzenia (pionowa i pozioma) lub rozmiaru ekranu (mały, średni, duży lub duży ekran).

  • Pozwala użytkownikowi na korzystanie z elementów opartych na środowisku przeglądania.

W poniższej tabeli wymieniono klasy widoczności Foundation, które kontrolują elementy na podstawie ich środowiska przeglądania -

Sr.No. Klasa widoczności i opis
1 Pokaż według rozmiaru ekranu

Pokazuje elementy oparte na urządzeniu za pomocą klasy .show .

2 Ukryj według rozmiaru ekranu

Ukrywa elementy oparte na urządzeniu za pomocą klasy .hide .

Foundation obsługuje niektóre klasy, w których można ukryć zawartość za pomocą klas .hide i .invisible i nic nie wyświetla na stronie.

Wykrywanie orientacji

Urządzenia mogą określać różne orientacje za pomocą funkcji poziomej i pionowej . Urządzenia ręczne, takie jak telefony komórkowe, określają różne orientacje podczas ich obracania. W przypadku komputerów stacjonarnych orientacja będzie zawsze pozioma.

Dostępność

Poniższa tabela zawiera listę technik ułatwień dostępu dla czytników ekranu, które ukrywają zawartość, a jednocześnie sprawiają, że jest ona czytelna dla czytników ekranu -

Sr.No. Klasa dostępności i opis
1 Pokaż dla czytników ekranu

Używa klasy show-for-sr, aby ukryć zawartość, jednocześnie uniemożliwiając czytnikowi ekranu jej odczyt.

2 Ukryj dla czytników ekranu

Używa atrybutu aria-hidden, który sprawia, że ​​tekst jest widoczny, ale nie może być odczytany przez czytnik ekranu.

3 Tworzenie linków pomijanych

Czytnik ekranu utworzy link pomijania, aby uzyskać nawigację do treści Twojej witryny.

Sass Reference

Foundation używa następujących mikserów do wyświetlania danych wyjściowych CSS, co pozwala budować własną strukturę klas dla twoich komponentów -

Sr.No. Mieszanie i opis Parametr Rodzaj
1

show-for

Domyślnie ukrywa element i wyświetla go powyżej określonego rozmiaru ekranu.

Rozmiar $ Słowo kluczowe
2

show-for-only

Domyślnie ukrywa element i wyświetla go w punkcie przerwania.

Rozmiar $ Słowo kluczowe
3

hide-for

Domyślnie pokazuje element i ukrywa go powyżej określonego rozmiaru ekranu.

Rozmiar $ Słowo kluczowe
4

hide-for-only

Domyślnie pokazuje element i ukrywa go powyżej określonego rozmiaru ekranu.

Rozmiar $ Słowo kluczowe

Domyślna wartość wszystkich tych mikserów będzie ustawiona na none .