Qlik Sense 3.0: Введение в Leonardo UI

Коллеги, сегодня хочу продолжить тему нововведений в Qlik Sense 3.0. Как известно, изменения коснулись многих аспектов работы системы, в том числе дизайна, который двигается в сторону удобства разработчика. Знаете, что такое фреймворк Leonardo и чем он полезен вам как дизайнеру приложений? Сегодня расскажу о нем и поделюсь некоторыми примерами реализации задач с этим фреймворком.

Что такое Leonardo UI и чем полезен

Итак, впервые Leonardo UI (или просто Leo) появился в Qlik Sense 3.0. как дополнение к другим фреймворкам. В нем нет глобальных стилей, но он использует настройки вашей страницы, установленные по умолчанию. Вы также можете его использовать внутри вашего CSS.

НА ЗАМЕТКУ! Для работы с Leonardo вам не нужно использовать другие сторонние библиотеки, но если у вас есть такое желание, то интеграция достаточно простая.

Leonardo UI очень полезен при работе с мэшапами Qlik Sense, расширения и виджетами Qlik Sense 3.0.

Leonardo UI в примерах

Ниже для вас представлены некоторые идеи по работе с Leonardo UI. Смотрите и вдохновляйтесь новыми быстрыми и красивыми дизайнерскими решениями, которые вы можете использовать в своих расширениях или мэшапах:

Название	Код	Пример
LUI кнопка	<lui-button>Default</lui-button>
LUI кнопка (Успешно)	<lui-button x-variant=»success»>Success</lui-button>
LUI кнопка (Внимание)	<lui-button x-variant=»warning»>Warning</lui-button>
LUI кнопка (Ошибка)	<lui-button x-variant=»error»>Error</lui-button>
LUI кнопка группы	<div class=»lui-buttongroup»> <button class=»lui-button»> First button </button> <button class=»lui-button»> Second button </button> <button class=»lui-button»> Third button </button> </div>
LUI чек-бокс	<label class=»lui-checkbox»> <input class=»lui-checkbox__input» type=»checkbox» /> <div class=»lui-checkbox__check-wrap»> <span class=»lui-checkbox__check»></span> <span class=»lui-checkbox__check-text»>Label</span> </div> </label>
LUI поле ввода	<input class=»lui-input»/>
LUI ввод группы	<div class=»lui-input-group»> <button class=»lui-input-group__item lui-input-group__button lui-button»> <span class=»lui-button__icon lui-icon lui-icon—expression»></span> </button> <input class=»lui-input-group__item lui-input-group__input lui-input»/> <button class=»lui-input-group__item lui-input-group__button lui-button»> <span class=»lui-button__icon lui-icon lui-icon—expression»></span> </button> </div>
LUI кнопка	<label class=»lui-radiobutton»> <input class=»lui-radiobutton__input» type=»radio» name=»myradio» value=»1″ checked> <div class=»lui-radiobutton__radio-wrap»> <span class=»lui-radiobutton__radio»></span> <span class=»lui-radiobutton__radio-text»>First button</span> </div> </label>
LUI Выбор	<lui-select x-model=»value»> <option value=»1″>First</option> <option value=»2″>Second</option> <option value=»3″>Third</option> </lui-select>
LUI Переключатель	<div class=»lui-switch»> <label class=»lui-switch__label» > <input type=»checkbox» class=»lui-switch__checkbox»> <span class=»lui-switch__span»> <div class=»lui-switch__inner»></div> <div class=»lui-switch__switch» ></div> </span> </label> </div>

Leonardo UI: Иконки

Также благодаря Leonardo вы можете легко встроить иконки, для этого нужно всего лишь написать нужный кусок кода. Предлагаю вам посмотреть список некоторых иконок ниже, а также скачать полное руководство по иконкам!