Содержимое меню Semantic-UI

Semantic UI — это современная структура, используемая для разработки цельного дизайна для веб-сайта. Она дает пользователю легкий опыт работы с ее компонентами. Он использует предопределенные CSS и jQuery для включения различных фреймворков.

Меню — это компонент, который отображает группу элементов, служащих для навигации между одним разделом веб-сайта и другим. Это важный компонент, который всегда присутствует на любом веб-сайте, чтобы упростить навигацию для пользователя.

Семантическое меню пользовательского интерфейса предлагает нам так много контента, как заголовок, текст, ввод, кнопка, элемент ссылки, элемент раскрывающегося списка, меню, подменю. В этой статье мы кратко узнаем о них все.

Содержание меню семантического пользовательского интерфейса:

• Заголовок: Содержимое заголовка меню семантического пользовательского интерфейса используется для отображения фирменного наименования веб-сайта. Содержимое заголовка отличается от остальных элементов форматированием.
• Текст: Текстовое содержимое меню семантического пользовательского интерфейса используется для форматирования содержимого меню в виде простого текста. Границы вокруг меню удаляются.
• Вход: Semantic UI Menu Input Content используется для размещения элементов ввода внутри меню. Элемент ввода можно использовать для поиска статей, блогов или контента на вашем сайте.
• Кнопка: Кнопка меню — это класс содержимого меню, в котором меню содержит кнопку. Этот класс полезен, когда мы хотим создать меню, содержащее одну или несколько кнопок, на которые может нажимать пользователь.
• Элемент ссылки: Он используется для создания элемента меню, который может содержать элементы ссылки или элементы, отформатированные как ссылка. Мы можем создавать элементы ссылок, используя тег привязки или класс ссылок.
• Выпадающий элемент: Это используется, чтобы пункт меню мог содержать вложенное меню в раскрывающемся списке.
• Меню: используется для того, чтобы меню содержало другую группу меню на том же уровне, что и пункты меню.
• Подменю : используется для того, чтобы элемент меню мог содержать другое меню, вложенное внутрь, которое действует как сгруппированное подменю.

Синтаксис:

<div class="ui Menu-Content">
    <div class="Menu-Content item">
        ...
    </div>
    ...
</div>

В приведенном ниже примере показано содержимое меню Semantic UI:

Пример 1: В этом примере мы будем использовать 4 элемента меню.

Выход:

Пример 2: В этом примере мы будем использовать остальную часть содержимого меню.

Выход:

Ссылка: https://react.semantic-ui.com/collections/menu/