Skip to content

Модальные окна. ui-modal

Модальные окна позволяют отображать произвольную информацию поверх основной, выделяя ее и не смещая текущую верстку. В темах используются обычно для форм, уведомлений в модальных окнах, а также уведомлениях о добавленном товаре в корзину/к сравнению.

Принимаемые параметры компонента: - caption - Заголовок модалки. Не обязательный параметр - name - Системное имя модального окна. Обязательный парметр, должен быть уникальным. - use-overlay - использовать ли затемнение остального сайта при открытой модалке. принимает значения true/false. - type - Тип модального окна. Может быть или modal или panel. Тип panel к примеру используется в мобильном меню. По-умолчанию тип modal. - position - Позиция модального окна на сайте. Если тип modal - то окно располагается по центру. Если panel - по-умолчанию слева. - animation - анимация появления модалки. Может принимать значения slideFromLeft или fadeInOut. По-умолчанию fadeInOut.

Пример реализации компонента ui-modal:

<ui-modal
    class="{{ widget_settings.palette }}"
    icon-close="fa fa-close"
    caption="{{ widget_settings.heading }}"
    name="top_menu"
    show-overlay
    type="panel"
    position="{{ widget_settings.panel_position }}"
    animation="slideFromLeft"
>
    Здесь могла бы быть ваша реклама...
</ui-modal>

Кнопка открытия модального окна ui-modal-toggle.

Чтобы открыть модальное окно нужно в нужное место в верстке разместить компонент ui-modal-toggle.

Он принимает 2 параметра:

  • modal-name - главный обязательный параметр. Принимает название модального окна, которое он будет вызывать при клике.
  • icon - иконка кнопки.

Пример компонента:

<ui-modal-toggle
    modal-name="article_comments"
>
    Добавить комментарий
</ui-modal-toggle>