yb-elastic-popup

ElasticPopup

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

Зависимости

• yb-callback

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

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

import ElasticPopup from "yb-elastic-popup";

• Пример jsx

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

Пропсы

• String className, default=undefined

Стили для тела окна
- String classOverlay, default=undefined
Стили для overlay (если хотим изменить, например, затенение)
- String headtext, default=undefined
Текст в шапку
- 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;
  }
}