Наверное этот UI/UX инструмент вызывает достаточно противоречивые чувства: с одной стороны, как наследие доставшиеся от windows 8 это недостаточно удобно, а для кого-то может и ужасно, но с другой стороны это достаточно лаконичный дизайн (если его правильно использовать).
Первый раз я обратил внимание на плитки когда появился модуль e-mail маркетинга, но сейчас все больше страниц использует его: страница 1С, Контакт-центра, E-mail маркетинга, AI.
Я всегда стараюсь предоставлять пользователям коробки нативные возможности битрикс24, чтобы интерфейсы выглядели органично (но не аляписто, как обычно это бывает на коробке) и сейчас пришло время с ним разобраться.
За вывод этих красивых плиточек отвечает компонент bitrix:ui.tile.list, который имеет всего несколько параметров:
- ID - идентификатор обьекта плиток, он же составная часть id html тега
- SHOW_BUTTON_ADD - Y\N показывать кнопку добавления плитки или не показывать (по умолчанию N)
- BUTTON_ADD_CAPTION - Название кнопки (по-умолчанию берется из языкового файла: Добавить)
- LIST - список существующих плиток, о котором расскажу позднее
Для базового отображения воспользуется нашим компонентом и посмотрим результат
Давайте сейчас отвлечемся от механики создания и предзаполним наши плитки, уже созданными элементами. Все существующие плитки описывается как массивы и передаются в параметр LIST.
Для описания плитки используются свойства:
- id - идентификатор плитки (уникальный)
- name - отображаемое название
- data - данные обьекта плитки (рассмотрим позднее)
- iconClass - css-класс для ноды с изображением
- iconColor - css-код цвета заднего фона изображения
- selected - true/false обозначающий выделение иконки
- bgcolor - css-код цвета заднего фона плитки
- color - css-код цвета названия плитки
- comingSoon - флаг добавляющий шилдик "скоро появиться"
Хотелось бы отметить несколько особенностей:
- Встроенных изображений иконок нет, их потребуется добавлять своими css стилями
- При отмеченном выделении текст плитки становится белым
- bgcolor - любая строка, которая пройдет через htmlspecialcharsbx будет отображена в background-css свойстве
- Не обошлось и без косяков: если вы создаете цветные ноды, то параметр selected передавать обязательно.
- иконку лучше делать в svg с прозрачным фоном
Небольшой хинт: css-стиль который скроет галочку для отмеченных пунктов и вы сможете использовать плитки.
Добавляем интерактива
К сожалению UI-модуль в битриксе это только элементы дизайна и интерактивная логика в нем не предусматривается. К счастью, разработчики любезно предоставили JS-события и на их основе мы сможет сделать некоторый интерактив.
Для того чтобы нам самим было удобнее, будет работать с js-классом и добавим на страницу код его вызова и пропишем класс для подписки на события:
Результат последовательного нажатия на кнопку добавить и плитку
К сожалению ui.tile.list лишь визуальная часть и все красивые обновления / удаления придется реализовывать на своих событиях и кода будет очень много.