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 .