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