Foundation - классы видимости
Описание
Foundation использует классы видимости для отображения или скрытия элементов в зависимости от ориентации устройства (книжная и альбомная) или размера экрана (маленький, средний, большой или большой экран).
Это позволяет пользователю использовать элементы в зависимости от среды просмотра.
В следующей таблице перечислены классы видимости Foundation, которые управляют элементами в зависимости от их среды просмотра.
| Sr. No. | Класс видимости и описание |
|---|---|
| 1 | Показать по размеру экрана Он показывает элементы на основе устройства с использованием класса .show . |
| 2 | Скрыть по размеру экрана Он скрывает элементы в зависимости от устройства с помощью класса .hide . |
Foundation поддерживает некоторые классы, в которых вы можете скрыть контент, используя классы .hide и .invisible, и ничего не отображает на странице.
Обнаружение ориентации
Устройства могут определять различную ориентацию, используя функции альбомной и портретной ориентации . Ручные устройства, такие как мобильные телефоны, определяют различную ориентацию при их повороте. Для настольных компьютеров ориентация всегда будет альбомной.
Доступность
В следующей таблице перечислены методы обеспечения доступности для программ чтения с экрана, которые скрывают контент, делая его доступным для чтения с помощью программ чтения с экрана.
| Sr. No. | Класс доступности и описание |
|---|---|
| 1 | Шоу для читателей с экрана Он использует класс show-for-sr, чтобы скрыть контент, не позволяя программам чтения с экрана читать его. |
| 2 | Скрыть для программ чтения с экрана Он использует атрибут aria-hidden, который делает текст видимым, но не может быть прочитан программой чтения с экрана. |
| 3 | Создание пропускаемых ссылок Программа чтения с экрана создаст ссылку для пропуска, чтобы перейти к содержанию вашего сайта. |
Справочник по Sass
Foundation использует следующие миксины для отображения вывода CSS, что позволяет создавать собственную структуру классов для ваших компонентов:
| Sr. No. | Миксин и описание | Параметр | Тип |
|---|---|---|---|
| 1 | show-for По умолчанию он скрывает элемент и отображает его выше определенного размера экрана. |
размер $ | Ключевое слово |
| 2 | show-for-only По умолчанию он скрывает элемент и отображает его в точке останова. |
размер $ | Ключевое слово |
| 3 | hide-for По умолчанию он показывает элемент и скрывает его выше определенного размера экрана. |
размер $ | Ключевое слово |
| 4 | hide-for-only По умолчанию он показывает элемент и скрывает его выше определенного размера экрана. |
размер $ | Ключевое слово |
По умолчанию для всех этих примесей будет установлено значение none .