Аккордеон кухонной мойки Foundation CSS

Опубликовано: 12 Августа, 2022

Foundation CSS — это адаптивная интерфейсная среда с открытым исходным кодом, созданная фондом ZURB в сентябре 2011 года и позволяющая легко создавать красивые адаптивные веб-сайты, приложения и электронные письма, которые выглядят потрясающе и могут быть доступны на любом устройстве. Фреймворк построен на Saas-подобном бутстрапе. Он более сложный, гибкий и легко настраиваемый. Он также поставляется с интерфейсом командной строки, поэтому его легко использовать с сборщиками модулей. Он предлагает инструмент Fastclick.js для более быстрого рендеринга на мобильных устройствах. Его используют многие компании, такие как Facebook, eBay, Mozilla, Adobe и даже Disney.

Кухонная раковина имеет базовые элементы, которые хорошо работают на наших веб-сайтах и в приложениях. Элемент « Гармошка » — это компонент, который помогает отображать большой объем данных в ограниченном пространстве, а затем отображать и скрывать их по мере необходимости. Их можно использовать для хранения произвольных типов контента, таких как изображения, тексты, ссылки, обзоры, часто задаваемые вопросы и т. д.

Аккордеон для кухонной мойки Foundation CSS:

  • аккордеон: этот класс используется для создания аккордеона и связан с атрибутом data-accordion .
  • элемент-аккордеона: этот класс используется для создания различных панелей внутри аккордеона и связан с атрибутом элемента данных-аккордеона. Любую панель или элемент-аккордеон можно сделать активным с помощью класса is-active вместе с классом элемента-аккордеона, т.е. [элемент-аккордеона является активным].
  • аккордеон-название: этот класс используется для создания аккордеонного заголовка. Он используется вместе с тегом <a> с именем класса аккордеон-название.
  • аккордеон-контент: этот класс используется для отображения всего контента внутри каждой вкладки аккордеона и связан с атрибутом data-tab-content .

Синтаксис :

<div class="accordion" data-accordion>
   <div class="accordion-item" data-accordion-item>
     <a href="#" class="accordion-title"></a>
     <div class="accordion-content" data-tab-content>
       <p>Content </p>
     </div>
   </div>
</div>

Пример : это базовый пример для аккордеона кухонной раковины в Foundation CSS.

Выход :

Аккордеон кухонной мойки Foundation CSS Дополнительные параметры:

Foundation CSS предоставляет пользователям некоторые дополнительные параметры, а также повышает доступность. Их можно использовать вместе с атрибутом data-accordion .

  • all-closed : по умолчанию один элемент Accordion всегда остается активным. Это можно изменить, установив для параметра allowAllClosed значение «true» . Следовательно, элемент div будет иметь атрибут data-accordion data-allow-all-closed="true" .
  • multi-expand: По умолчанию только один элемент Accordion может оставаться активным. Но это можно изменить, добавив параметр Multi-expand и переключив его значение на «true» . Следовательно, атрибут div должен быть data-accordion data-multi-expand="true" .
  • disabled: Disabled — это уникальное свойство, с помощью которого навигация в Accordion может быть отключена. Следовательно, у div будет атрибут data-accordion disabled .

Синтаксис :

<div class="accordion" attribute-name></div>

Пример . Следующий код демонстрирует класс Аккордеон кухонной раковины вместе с полностью закрытым вариантом.

Выход:

Пример . Следующий код демонстрирует класс Аккордеон кухонной раковины вместе с вариантом с множественным развертыванием.

Выход :

Пример : Следующий код демонстрирует класс Аккордеон кухонной раковины вместе с отключенным вариантом.

Выход :

Ссылка: https://get.foundation/sites/docs/kitchen-sink.html#accordion