Skip to main content

Вспливаюче вікно (Popover)

Навігація

Вспливаюче вікно (Popover)

Компонент Popover використовується для керування представленням вмісту у спливаючому вікні. Ви використовуєте спливні елементи для тимчасового представлення інформації. Спливаюче вікно залишається видимим, доки користувач не торкнеться за межами спливаючого вікна або ви явно його не закриєте.
Зауважте, що не рекомендується використовувати Popover на маленьких екранах (iPhone). На маленьких екранах замість цього слід використовувати Аркуш дій .

Макет Спливаючого вікна

Перш за все, давайте розглянемо макет Popover, він досить простий:
<body>
    ...
    <div class="popover">
        <!-- Popover's arrow -->
        <div class="popover-arrow"></div>

        <!-- Popover content -->
        <div class="popover-inner">
            <!-- Any HTML content here -->
        </div>
    </div>
</body>
Popover — це елемент, який можна налаштувати, і ви можете помістити всередину що завгодно, навіть інший перегляд із навігацією.

Методи застосунку Popover

Давайте розглянемо пов’язані методи роботи з застосунком Popover:
МетодОписТип
app.popover.create(parameters)
створити екземпляр Popover
  • parameters - object. — Об'єкт з параметрами popover
object
app.popover.destroy(el)
знищити екземпляр Popover
  • el - HTMLElement or string — (with CSS Selector) or object. Елемент Popover або екземпляр Popover для знищення
HTMLElement
app.popover.get(el)
отримати екземпляр Popover за елементом HTML
  • el - HTMLElement or string — (with CSS Selector). Popover елемент.
HTMLElement
app.popover.open(el, targetEl, animate)
відкрити Popover
  • el - HTMLElement or string — (with CSS Selector) Popover елемент для відкриття.
  • targetEl - HTMLElement or string — (with CSS Selector) ). Цільовий елемент для встановлення позиції спливаючого вікна навколо цього елемента
HTMLElement
app.popover.close(el, animate)
закриває Popover
  • el - HTMLElement or string — (with CSS Selector) Popover елемент для закриття.
  • animate - boolean — . Закривати з анімацією чи ні
HTMLElement

Параметри Popover

Тепер давайте розглянемо список доступних параметрів, необхідних для створення Popover:
ПараметрЗа замовчуваннямОписТип
el
Popover елемент. Може бути корисним, якщо у вас уже є елемент Popover у вашому HTML і ви хочете створити новий екземпляр за допомогою цього елемента
string
arrow
true
Вмикає стрілку/куточок Popover
boolean
content
Повний рядок макета HTML Popover. Може бути корисним, якщо ви хочете створити елемент Popover динамічно
string
verticalPosition
auto
Примусове вертикальне положення Popover, може бути auto або top чиbottom)
number
backdrop
true
Вмикає фон Popover (темний напівпрозорий шар ззаду)
boolean
backdropUnique
false
Якщо ввімкнено, він створює унікальний елемент фону виключно для цього модалу
boolean
backdropEl
HTML-елемент або рядковий CSS-селектор спеціального елемента фону
string
closeByBackdropClick
true
Якщо ввімкнено, спливаюче вікно закриватиметься після натискання на фоні
boolean
closeByOutsideClick
true
Якщо ввімкнено, спливаюче вікно закриватиметься, коли клацніть поза ним
boolean
closeOnEscape
false
Якщо ввімкнено, спливаюче вікно закриватиметься після натискання клавіші ESC
boolean
animate
true
Чи відкривати/закривати Popover з анімацією чи ні. Можна перезаписати в методи .open()і .close()
boolean
targetEl
HTML-елемент або рядковий CSS-селектор цільового елемента
string
targetX
Горизонтальне зміщення віртуального цільового елемента від лівої сторони екрана. Необхідно без використання реального цільового елемента ( targetEl)
number
targetY
Вертикальне зміщення віртуального цільового елемента від верхньої частини екрана. Необхідно без використання реального цільового елемента ( targetEl)
number
targetWidth
0
Ширина віртуального цільового елемента (у пікселях). Необхідно без використання реального цільового елемента ( targetEl)
number
targetHeight
0
Висота віртуального цільового елемента (у пікселях). Необхідно без використання реального цільового елемента (targetEl)
number
containerEl
Елемент для модального монтування (за замовчуванням кореневий елемент застосунку)
string
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
 
var popover = app.popover.create({
  content: '<div class="popover">...</div>',
  on: {
    opened: function () {
      console.log('Popover opened')
    }
  }
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах застосунку у popover властивості, щоб установити значення за замовчуванням для всіх поповерів. Наприклад:
var app = new Techno4({
  popover: {
    closeByBackdropClick: false,
  }
});
Якщо ви використовуєте автоматично ініціалізовані спливаючі вікна (наприклад, ви не створюєте їх через app.popover.create), можна передати всі доступні параметри спливаючих вікон за допомогою data-атрибутів. Наприклад:
<!-- Pass parameters as kebab-case data attributes -->
<div class="popover" data-close-on-escape="true" data-backdrop="false">
  ...
</div>

Методи та властивості Popover

Отже, щоб створити Popover, ми повинні викликати:
var popover = app.popover.create({ /* parameters */ })
Після цього у нас є його ініціалізований екземпляр (як popover змінна у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість ОписТип
popover.app
Посилання на глобальний екземпляр застосунку
object
popover.el
Popover HTML елемент
HTMLElement
popover.$el
Екземпляр Dom64 зі спливаючим елементом HTML
HTMLElement
popover.backdropEl
Елемент HTML фону
HTMLElement
popover.$backdropEl
Екземпляр Dom64 із фоновим елементом HTML
HTMLElement
popover.targetEl
Спливаючий цільовий елемент HTML
HTMLElement
popover.$targetEl
Екземпляр Dom64 із спливаючим цільовим елементом HTML
HTMLElement
popover.params
Параметри Popover
object
popover.opened
Логічна властивість, яка вказує, відкрито спливне вікно чи ні
function
Методи
МетодОписТип
popover.open(targetEl, animate)
Відкрити спливаюче вікно навколо цільового елемента, Де
  • targetEl - HTMLElement or string — цільовий елемент для встановлення позиції спливаючого вікна навколо цього елемента
  • animate - boolean — (за замовчуванням true) - визначає, чи відкривати його з анімацією чи ні
HTMLElement
popover.open(animate)
Відкрити спливаюче вікно навколо цільового елемента, переданого під час створення спливного вікна. Де
  • animate - boolean — (за замовчуванням true) - визначає, чи слід відкривати його з анімацією
function
popover.close(animate)
Закрити спливаюче вікно. Де
  • animate - boolean — (за замовчуванням true) - визначає, чи потрібно закривати його анімацією
function
popover.destroy()
Знищити поповер
function
popover.on(event, handler)
Додати обробник подій
Event
popover.once(event, handler)
Додати обробник подій, який буде видалено після запуску
Event
popover.off(event, handler)
Видалити обробник подій
Event
popover.off(event)
Видалити всі обробники для вказаної події
Event
popover.emit(event, ...args)
Запустити подію на єкзепмлярі
Event

Керування спливаючим вікном за допомогою посилань

Відкривати та закривати потрібні спливаючі повідомлення (якщо вони є в DOM) можна за допомогою спеціальних класів і атрибутів даних у посиланнях:

— Щоб відкрити спливаюче вікно, нам потрібно додати клас « popover-open » до будь-якого елемента HTML (бажано для посилання)

— Щоб закрити спливаюче вікно, нам потрібно додати клас « popover-close » до будь-якого елемента HTML (бажано для посилання)

— Якщо у вас є більше ніж одне спливаюче вікно в DOM, вам потрібно вказати відповідне спливаюче вікно за допомогою додаткового атрибута data-popover=".my-popover" у цьому елементі HTML

Відповідно до примітки вище:
<!-- В атрибуті data-popover ми вказуємо CSS-селектор спливаючого повідомлення, яке потрібно відкрити -->
<p><a href="#" data-popover=".my-popover" class="popover-open">Open Popover</a></p>

<!-- А також в DOM -->
<div class="popover my-popover">
  <div class="popover-inner">
    <!-- посилання щоб закрити popover -->
    <a class="link popover-close">Close Popover</a>
  </div>
</div>

Події Popover

Popover запускатиме наступні події DOM на елементі popover і події в застосунку та екземплярі popover:

Події DOM

ПодіяОб'єктОписТип
popover:open
Елемент Popover

<div class="popover">

Подія буде ініційована, коли Popover запустить початкову анімацію
function
popover:opened
Елемент Popover

<div class="popover">

Подію буде запущено після того, як Popover завершить свою початкову анімацію
function
popover:close
Елемент Popover

<div class="popover">

Подія буде ініційована, коли Popover почне завершувати анімацію
function
popover:closed
Елемент Popover

<div class="popover">

Подію буде запущено після завершення анімації Popover
function

Події екземплярів застосунку та Popover

Екземпляр Popover запускає події як у себе, так і в екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом popover.
ПодіяАргументОписТип
open
popover
Подія буде ініційована, коли Popover запустить початкову анімацію. В якості аргументу обробник події отримує екземпляр popover
undefined
popoverOpen
popover
Подія буде ініційована, коли Popover запустить початкову анімацію. В якості аргументу обробник події отримує екземпляр popover
undefined
opened
popover
Подію буде запущено після того, як Popover завершить свою початкову анімацію. В якості аргументу обробник події отримує екземпляр Popover
undefined
popoverOpened
popover
Подію буде запущено після того, як Popover завершить свою початкову анімацію. В якості аргументу обробник події отримує екземпляр Popover
undefined
close
popover
Подія буде ініційована, коли Popover почне завершувати анімацію. В якості аргументу обробник події отримує спливаючий екземпляр
undefined
popoverClose
popover
Подія буде ініційована, коли Popover почне завершувати анімацію. В якості аргументу обробник події отримує спливаючий екземпляр
undefined
closed
popover
Подію буде запущено після завершення анімації Popover. В якості аргументу обробник події отримує спливаючий екземпляр
undefined
popoverClosed
popover
Подію буде запущено після завершення анімації Popover. В якості аргументу обробник події отримує спливаючий екземпляр
undefined
beforeDestroy
popover
Подія буде запущена безпосередньо перед знищенням екземпляра Popover. В якості аргументу обробник події отримує спливаючий екземпляр
undefined
popoverBeforeDestroy
popover
Подія буде запущена безпосередньо перед знищенням екземпляра Popover. В якості аргументу обробник події отримує спливаючий екземпляр
undefined

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {
  --t4-popover-width: 260px;
}
.ios {
  --t4-popover-border-radius: 13px;
  --t4-popover-actions-icon-size: 28px;
  --t4-popover-transition-timing-function: initial;
  --t4-popover-bg-color: rgba(255, 255, 255, 0.95);
  --t4-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --t4-popover-bg-color: rgba(30, 30, 30, 0.95);
  --t4-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --t4-popover-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
  --t4-popover-border-radius: 28px;
  --t4-popover-actions-icon-size: 24px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-popover-bg-color: var(--t4-md-surface-3);
  --t4-popover-actions-label-text-color: var(--t4-md-on-surface-variant);
}

Приклади 

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Popover</div>
      <div class="right">
        <a class="link popover-open" data-popover=".popover-menu">Popover</a>
      </div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="" class="link popover-open" data-popover=".popover-menu">Dummy Link</a>
      <a href="" class="link popover-open" data-popover=".popover-menu">Open Popover</a>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p><a data-popover=".popover-menu" class="button button-fill popover-open">Open popover on me</a></p>
      <p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta
        turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec
        malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate
        egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras
        suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <a class="popover-open"
          data-popover=".popover-menu">popover</a> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis
        vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.</p>
      <p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta
        magna magna lacinia nunc. Curabitur <a class="popover-open" data-popover=".popover-menu">popover!</a> cursus
        laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat.
        Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis
        mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque
        elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.</p>
      <p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus
        tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum
        arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis
        semper ligula. Morbi ullamcorper <a class="popover-open" data-popover=".popover-menu">one more popover</a> massa
        at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi.
        Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida
        eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse
        viverra lectus sed risus aliquet, vel accumsan dolor feugiat.</p>
    </div>
  </div>
  <div class="popover popover-menu">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="list">
        <ul>
          <li><a href="/dialog/" class="list-button popover-close">Dialog</a></li>
          <li><a href="/tabs/" class="list-button popover-close">Tabs</a></li>
          <li><a href="/panel/" class="list-button popover-close">Side Panels</a></li>
          <li><a href="/list/" class="list-button popover-close">List View</a></li>
          <li><a href="/inputs/" class="list-button popover-close">Form Inputs</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>