yb-elastic-popup v1.1.3

ElasticPopup

Обертка для центрирования модального окна Посмотреть как работает

Зависимости

• yb-callback

Подключение и использование

• Импортируем

import ElasticPopup from "yb-elastic-popup";

• Пример jsx Примечание: для this.callbacks следует указывать пустой объект

<ElasticPopup
  className="ElasticPopupClear"
  callbacks={this.callbacks}
  isModal={true}
>
  <SomeContent ... />
</ElasticPopup>

Пропсы

• String className, default=undefined Стили для тела окна
• String classOverlay, default=undefined Стили для overlay (если хотим изменить, например, затенение)
• String headtext, default=undefined Текст в шапку
• <React.Component> headComponent, default=undefined Компонент в шапку
• Boolean isShow, default=false Отображается или скрыт при первом рендеринге
• Boolean isModal, default=false Является ли окно модальным (нужно ли условие при его закрытии)
• String hideClassInside, default=false ClassName для особых условий. Вешается на ту кнопку, по клику которой можно закрыть окно. (например, кнопка "Закрыть" - чтобы программа определяла ее как триггер на закрытие, вешаем на нее hideClassInside)
• Object callbacks Для внешних вызовов компонента

Внешние вызовы

• $show() Отобразить окно
• $hide() Скрыть окно. Применяется к модальному (isModal=true), т.к. его больше никак закрыть нельзя.
• $hideWithCheck() Скрыть окно. Условия:
  • клик по кнопке закрытия (по крестику)
  • клик по overlay
  • клик по кнопке, у которой есть заданный className=hideClassInside
• $toggle() Показать/скрыть окно. Чередует функционал из $show/$hide.

Пример своих стилей

.ElasticPopup {
  .el-modal.whiteButton {
    .close-button {
      height: 30px;
      width: 30px;
      position: absolute;
      right: -30px;
      top: -30px;
      background-image: url(../../img/close.svg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position-x: 4px;

      // отмена вращения при наведении
      // transition: none;
    }
  }
}

.ElasticPopup {
  .el-modal {
    margin: 50px 0;
  }
}