CSS-компоненты пользовательского интерфейса панели инструментов Onsen

Onsen UI — это бесплатный инструмент с открытым исходным кодом для создания отличительных и функциональных пользовательских интерфейсов. Кроме того, это ускоряет создание пользовательского интерфейса, позволяя разработчикам приложений сосредоточиться на функциональности программного обеспечения. Пользовательский интерфейс Onsen — это большая коллекция мощных элементов пользовательского интерфейса, созданных специально для мобильных приложений. Он полон функций, которые готовы к использованию и соответствуют собственным стандартам дизайна iOS и Android. AngularJS был источником вдохновения для создания пользовательского интерфейса Onsen, однако его также можно использовать с jQuery или любым другим фреймворком. JavaScript-фреймворк пользовательского интерфейса Onsen построен на PhoneGap и Cordova.

Предварительно созданные компоненты CSS, называемые компонентами CSS пользовательского интерфейса Onsen, можно использовать для быстрого создания гибких и привлекательных макетов пользовательского интерфейса. Все визуальные элементы CSS-компонентов пользовательского интерфейса Onsen реализованы с использованием только CSS (cssnext). Для мобильных разработчиков Onsen CSS Components — это веб-тематический ролик Topcoat, который упрощает разработку великолепных пользовательских интерфейсов.

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

CSS-компоненты пользовательского интерфейса панели инструментов Onsen:

• Панель инструментов: этот компонент используется для создания панели инструментов.
• Элемент панели инструментов : этот элемент используется для создания панели инструментов с некоторыми элементами панели инструментов.
• Панель инструментов с кнопкой контура : используется для создания основных кнопок панели инструментов.
• Панель инструментов с нижней панелью: используется для создания нижней панели внутри панели инструментов.
• Панель инструментов с сегментом : используется для создания сегмента внутри панели инструментов с некоторыми элементами сегмента.
• Панель инструментов материала : панель инструментов представляет собой горизонтальную полосу с некоторыми элементами панели инструментов и значками. Он используется для создания панели инструментов материала.
• No Shadow Toolbar : No Shadow Toolbar используется для создания панели инструментов без тени с помощью класса toolbar-noshadow .
• Панель инструментов материала с иконками : используется для создания панели инструментов материала с иконками.
• Прозрачная панель инструментов : используется для создания прозрачной панели инструментов с некоторыми элементами с использованием класса панели инструментов — прозрачность .

Синтаксис:

<div class="toolbar">
      <div class="toolbar__left">
        <span class="toolbar-button">
               ....
        </span>
      </div>
    ...
</div>

Пример 1. В приведенном ниже коде показано, как создать материальную панель инструментов со значками.

Выход:

Пример 2. В приведенном ниже коде показано, как создать панель инструментов с прозрачным материалом.

Выход:

Пример 3: Код ниже демонстрирует создание панели инструментов с сегментами.

Выход:

Ссылка: https://onsen.io/v2/api/css.html#toolbar-category