Skip to main content

Модальний аркуш

Навігація

Модальний аркуш

Модальний аркуш — це спеціальний тип накладення, подібний до накладання вибору/календаря. Такий режим дозволяє створювати налаштовані накладки з настроюваним вмістом

Макет модального аркуша

Розмітка аркуша досить проста:
<body>
  ...
  <!-- Контейнер модального аркуша -->
  <div class="sheet-modal">
    <!-- Панель інструментів модального аркуша, опціонально-->
    <div class="toolbar">
      <div class="toolbar-inner">
        <div class="left"></div>
        <div class="right">
          <a href="#" class="link sheet-close">Done</a>
        </div>
      </div>
    </div>
    <!-- Inner Модального аркуша-->
    <div class="sheet-modal-inner">
      <!-- Вміст Модального аркуша-->
      <div class="block">
        <p>Integer mollis nulla id nibh elementum finibus...</p>
      </div>
    </div>
  </div>

</body>

Макет модального аркуша в позиції “Top”

За замовчуванням режим аркуша відкривається з нижньої частини екрана. Його також можна відкрити з верхньої частини екрана. У цьому випадку нам потрібно додати клас sheet-modal-top до елемента аркуша. У цьому випадку також рекомендується використовувати нижню панель інструментів: 
<!-- Додатковий клас "sheet-modal-top" шоб відкрити його у верхній частині екрану-->
<div class="sheet-modal sheet-modal-top">
  <!-- Панель інструментів знизу для аркуша зверху-->
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <div class="left"></div>
      <div class="right">
        <a href="#" class="link sheet-close">Done</a>
      </div>
    </div>
  </div>
  <!-- Inner Модального аркуша -->
  <div class="sheet-modal-inner">
    <!-- Вміст модально аркуша  -->
    <div class="block">
      <p>Integer mollis nulla id nibh elementum finibus...</p>
    </div>
  </div>
</div>

Методи застосунку Модальний аркуш

Давайте розглянемо методи роботи пов’язані з Модальним аркушем:
МетодОпис
app.sheet.create(parameters)
створити екземпляр Модального аркуша
  • parameters - object. — Об'єкт з параметрами модельного аркуша
app.sheet.destroy(el)
знищити екземпляр Модального аркуша
  • el - HTMLElement or string — (with CSS Selector) or object. Елемент або екземпляр Модального аркуша.
app.sheet.get(el)
отримати екземпляр Модального аркуша за елементом HTML
  • el - HTMLElement or string — (with CSS Selector). Елемент Модального аркуша.
app.sheet.open(panel, animate)
Відкриває модальний аркуш
  • panel - HTMLElement or string — (with CSS Selector) Елемент модального аркуша для відкриття
  • animate - boolean. — Відкрити з анімацією
app.sheet.close(el, animate)
закириває модальний аркуш
  • el - HTMLElement or string — (with CSS Selector) .Елемент модального аркуша для закриття
  • animate - boolean — . Зарити з анімацією
app.sheet.stepOpen(el)
відкрити/розгорнути крок гортання аркуша
  • el - HTMLElement or string — (with CSS Selector) Елемент аркуша для відкриття кроку гортання.
app.sheet.stepClose(el)
закрити/згорнути крок аркуша
  • el - HTMLElement or string — (with CSS Selector) Елемент аркуша, щоб закрити крок гортання.
app.sheet.stepToggle(el)
перемикати (відкрити або закрити) крок гортання аркуша
  • el - HTMLElement or string — (with CSS Selector) Елемент аркуша для перемикання кроку гортання.
app.sheet.setBreakpoint(el, value)
встановити/відкрити модальний аркуш на певній точці зупину (параметра з масиву breakpoints) Також проходження 0 закриє аркуш, проходження 1 повністю відкриє його.

Метод повертає екземпляр Модального аркуша

Параметри Модального аркуша

Тепер давайте подивимося на список доступних параметрів, необхідних для створення аркуша:
ПараметрЗа замовчуваннямОписТип
el
Елемент Модального аркуша. Може бути корисним, якщо у вас уже є елемент Sheet у вашому HTML і ви хочете створити новий екземпляр за допомогою цього елемента
HTMLElement

string

content
Рядок макета HTML повного аркуша. Може бути корисним, якщо ви хочете динамічно створити елемент аркуша
string
backdrop
Вмикає фон аркуша (темний напівпрозорий шар позаду). За замовчуванням це trueдля теми MD і false для iOS теми
boolean
backdropEl
HTML-елемент або рядковий CSS-селектор спеціального елемента фону
HTMLElement

string

backdropUnique
false
Якщо ввімкнено, він створює унікальний елемент фону виключно для цього модалу
boolean
scrollToEl
Елемент HTML або рядок (із селектором CSS) елемента. Якщо вказано, аркуш намагатиметься прокрутити вміст сторінки до цього елемента під час відкриття
HTMLElement

string

closeByBackdropClick
true
Якщо ввімкнено, буде закрито після натискання фону
boolean
closeByOutsideClick
false
Якщо ввімкнено, буде закрито, якщо клікнути поза ним
boolean
closeOnEscape
false
Якщо ввімкнено, буде закрито після натискання клавіші ESC на клавіатурі
boolean
animate
true
Чи відкривати/закривати аркуш з анімацією чи ні. Можна перезаписати в методи .open() і .close()
boolean
swipeToClose
false
Чи можна закрити аркуш за допомогою свайпу
boolean
swipeToStep
false
Якщо ввімкнено, відкритий аркуш можна буде розділити на два стани: частково відкритий і повністю відкритий, яким можна керувати за допомогою свайпа
boolean
swipeHandler
Якщо не передано, можна закрити весь аркуш. Ви можете передати сюди HTML-елемент або рядок CSS-селектора спеціального елемента, який використовуватиметься як ціль гортання. (також має бути ввімкнено swipeToClose або swipeToStep)
HTMLElement

string

push
false
Якщо ввімкнути, він відкриватиме перегляд ззаду. Працює лише тоді, коли знаходиться верхня безпечна зона. Його також можна ввімкнути, додавши клас sheet-modal-push до елемента Sheet.
boolean
breakpoints
[]
Використовуйте замість swipeToStep, щоб увімкнути контрольні точки. Має бути масив чисел > 0 і < 1, де 0 повністю закрито, а 1 повністю відкрито, наприклад. [0,33, 0,66], [0,5] тощо.
number
backdropBreakpoint
0
Визначає точку зупинки, коли фон стає видимим. Число від 0 (в ідеалі від найнижчого (першого) значення масиву контрольних точок) до 1 (за замовчуванням 0)
number
pushBreakpoint
0
Визначає точку зупинки, коли потрібно відштовхнути огляд позаду (натискання має бути ввімкнено). Число від 0 (в ідеалі від найнижчого (першого) значення масиву контрольних точок) до 1 (за замовчуванням 0)
number
containerEl
Елемент для модального монтування (за замовчуванням кореневий елемент програми)
 HTMLElement

string
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
 
var sheet = app.sheet.create({
  content: '<div class="sheet-modal">...</div>',
  on: {
    opened: function () {
      console.log('Sheet opened')
    }
  }
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах програми у властивості sheet, щоб встановити значення за замовчуванням для всіх аркушів. Наприклад: 
var app = new Techno4({
  sheet: {
    closeByBackdropClick: false,
  }
});
Якщо ви використовуєте автоматично ініціалізовані модальні аркуші (наприклад, ви не створюєте їх через app.sheet.create), можна передати всі доступні параметри аркуша через data-атрибути. Наприклад: 
<!-- Передайте параметри як атрибути даних kebab-case -->
<div class="sheet-modal" data-close-on-escape="true" data-swipe-to-close="true">
  ...
</div>

Методи та властивості аркуша

Отже, щоб створити модальний аркуш, ми повинні викликати:
var sheet = app.sheet.create({ /* параметри */ })
Після цього у нас є його ініціалізований екземпляр (як змінна sheet у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість Опис
sheet.app
Посилання на глобальний екземпляр застосунку
sheet.el
HTML Елемент аркуша
sheet.$el
Екземпляр Dom64 з HTML елементом аркуша
sheet.backdropEl
Елемент HTML фону
sheet.$backdropEl
Екземпляр Dom64 із фоновим елементом HTML
sheet.params
Параметри аркуша
sheet.opened
Логічний реквізит, що вказує, відкрито аркуш чи ні
Методи
МетодОпис
sheet.open(animate)
Відкрити аркуш. Де
  • animate - boolean — (за замовчуванням true) - визначає, чи відкривати його з анімацією чи ні
sheet.close(animate)
Закрити панель, де
  • animate - boolean — (за замовчуванням true) - визначає, чи має він бути закритий з анімацією чи ні
sheet.stepOpen()
Крок відкриття/розгортання аркуша
sheet.stepClose()
Крок закриття/згортання аркуша
sheet.stepToggle()
Перемикати (відкривати або закривати) крок гортання аркуша
sheet.setSwipeStep()
Оновити позицію кроку. Потрібно викликати після того, як вміст аркуша було змінено вручну під час його відкриття
sheet.setBreakpoint(value)
Встановити/відкрити аркуш у певній точці зупину (з breakpoints параметра масиву). Також проходження 0 закриє аркуш , проходження 1 повністю відкриє його
sheet.destroy()
Знищити аркуш
sheet.on(event, handler)
Додати обробник подій
sheet.once(event, handler)
Додати обробник подій, який буде видалено після запуску
sheet.off(event, handler)
Видалити обробник подій
sheet.off(event)
Видалити всі обробники для вказаної події
sheet.emit(event, ...args)
Запуск події на прмірнику

Контрольний аркуш із посиланням

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

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

Щоб закрити аркуш, нам потрібно додати клас "sheet-close" до будь-якого елемента HTML (бажано для посилання)

Якщо у вас більше одного аркуша в DOM, вам потрібно вказати відповідний аркуш за допомогою додаткового атрибута data-sheet=".my-sheet"у цьому елементі HTML
Відповідно до примітки вище: 
<!-- В атрибуті data-sheet ми вказуємо CSS-селектор аркуша, який потрібно відкрити -->
<p><a href="#" data-sheet=".my-sheet" class="sheet-open">Open Sheet</a></p>

<!-- І десь у DOM -->
<div class="sheet-modal my-sheet">
  <div class="sheet-modal-inner">
    <!-- Посилання на закриття аркуша -->
    <a class="link sheet-close">Close</a>
  </div>
</div>

Крок свайпа

Якщо передати параметр swipeToStep , то аркуш буде відкритий частково, а за допомогою свайпа його можна буде розгорнути. Щоб це запрацювало, нам також потрібно визначити цей перший/початковий крок у HTML аркуша, щоб Techno4 Framework міг знати, на скільки аркушів слід відкрити.

Щоб це запрацювало, нам потрібно обернути початковий вміст аркуша елементом <div class="sheet-modal-swipe-step">і встановити height:auto для цього аркуша: 

<div class="sheet-modal" style="height: auto">
  <div class="sheet-modal-inner">
    <!-- початковий вміст модального аркуша -->
    <div class="sheet-modal-swipe-step">
      ...
    </div>
    <!-- решту вмісту, який відкриватиметься додатковим свайпом -->
    ...
  </div>
</div>
Для верхнього режиму аркуша цей крок свайпу має бути внизу: 
<div class="sheet-modal sheet-modal-top" style="height: auto">
  <div class="sheet-modal-inner">
    <!-- решту вмісту, який відкриватиметься додатковим свайпом -->
    ...
    <!-- початковий вміст модального аркуша -->
    <div class="sheet-modal-swipe-step">
      ...
    </div>
  </div>
</div>

Події модального аркуша

Модальний аркуш запускатиме такі події DOM для елемента аркуша та події для застосунку та екземпляра аркуша:

Події DOM

ПодіяОб'єктОпис
sheet:open
Елемент аркуша

<div class="sheet">

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

<div class="sheet">

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

<div class="sheet">

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

<div class="sheet">

Подію буде запущено після завершення анімації закриття Аркуша
sheet:stepopen
Елемент аркуша

<div class="sheet">

Подія буде ініційована під час відкриття/розгортання аркуша
sheet:stepclose
Елемент аркуша

<div class="sheet">

Подія буде ініційована під час закриття/згортання аркуша
sheet:stepprogress
Елемент аркуша

<div class="sheet">

Подія буде ініційована на етапі гортання аркуша між відкритим і закритим кроком. Коли event.detail він отримує номер прогресу відкриття кроку ( від 0 до 1)
sheet:breakpoint
Елемент аркуша

<div class="sheet">

Подія буде ініційована на етапі гортання аркуша між відкритим і закритим кроком. Коли event.detail він отримує номер прогресу відкриття кроку ( від 0 до 1)
sheet:beforedestroy
Елемент аркуша

<div class="sheet">

Подія буде ініційована при зміні точки зупину аркуша. Оскільки event.detail він отримує поточну точку зупину (від 0 до 1)

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

Екземпляр аркуша запускає події як у себе, так і в екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом popup.
ПодіяАргументОписОб'єкт
open
sheet
Подія буде ініційована, коли Аркуш запустить початкову анімацію. В якості аргументу обробник події отримує екземпляр аркуша
sheet
sheetOpen
sheet
Подія буде ініційована, коли Аркуш запустить початкову анімацію. В якості аргументу обробник події отримує екземпляр аркуша
app
opened
sheet
Подію буде ініційовано після того, як аркуш завершить свою початкову анімацію. В якості аргументу обробник події отримує екземпляр аркуша
sheet
sheetOpened
sheet
Подію буде ініційовано після того, як аркуш завершить свою початкову анімацію. В якості аргументу обробник події отримує екземпляр аркуша
app
close
sheet
Подія буде ініційована, коли аркуш розпочне свою анімацію закриття. В якості аргументу обробник події отримує екземпляр аркуша
sheet
sheetClose
sheet
Подія буде ініційована, коли аркуш розпочне свою анімацію закриття. В якості аргументу обробник події отримує екземпляр аркуша
app
closed
sheet
Подію буде запущено після завершення анімації закриття Аркуша. В якості аргументу обробник події отримує екземпляр аркуша
sheet
sheetClosed
sheet
Подію буде запущено після завершення анімації закриття Аркуша. В якості аргументу обробник події отримує екземпляр аркуша
app
beforeDestroy
sheet
Подія буде ініційована безпосередньо перед тим, як екземпляр аркуша буде знищено. В якості аргументу обробник події отримує екземпляр аркуша
sheet
sheetBeforeDestroy
sheet
Подія буде ініційована безпосередньо перед тим, як екземпляр аркуша буде знищено. В якості аргументу обробник події отримує екземпляр аркуша
app
stepOpen
sheet
Подія буде ініційована під час відкриття/розгортання аркуша
sheet
sheetStepOpen
sheet
Подія буде ініційована під час відкриття/розгортання аркуша
app
stepClose
sheet
Подія буде ініційована під час закриття/згортання аркуша
sheet
sheetStepClose
sheet
Подія буде ініційована під час закриття/згортання аркуша
app
stepProgress
sheet, progress
Подія буде ініційована на етапі гортання аркуша між відкритим і закритим кроком. В якості "progress" він отримує номер прогресу відкриття кроку ( від 0 до 1)
sheet
sheetStepProgress
sheet, progress
Подія буде ініційована на етапі гортання аркуша між відкритим і закритим кроком. В якості "progress" він отримує номер прогресу відкриття кроку ( від 0 до 1)
app
breakpoint
sheet, breakpoint
Подія буде ініційована при зміні точки зупину аркуша. Як другий аргумент він отримує поточну точку зупину (від 0 до 1)
sheet
sheetBreakpoint
sheet, breakpoint
Подія буде ініційована при зміні точки зупину аркуша. Як другий аргумент він отримує поточну точку зупину (від 0 до 1)
app

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {
  --t4-sheet-height: 260px;
  --t4-sheet-push-offset: var(--t4-safe-area-top);
}
.ios {
  --t4-sheet-border-radius: 0px;
  --t4-sheet-border-color: var(--t4-bars-border-color);
  --t4-sheet-transition-timing-function: initial;
  --t4-sheet-push-border-radius: 10px;
  --t4-sheet-transition-duration: 300ms;
  --t4-sheet-bg-color: #fff;
}
.ios .dark,
.ios.dark {
  --t4-sheet-bg-color: #202020;
}
.md {
  --t4-sheet-border-radius: 16px;
  --t4-sheet-push-border-radius: 16px;
  --t4-sheet-border-color: transparent;
  --t4-sheet-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
  --t4-sheet-transition-duration: 400ms;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-sheet-bg-color: var(--t4-md-surface);
}

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Sheet Modal</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Sheet Modals slide up from the bottom (or down from the top) of the screen to reveal more content. Such
          modals allow to create custom overlays with custom content.</p>
        <p class="grid grid-cols-2 grid-gap">
          <a class="button button-fill sheet-open" data-sheet=".demo-sheet">Open Sheet</a>
          <a class="button button-fill" @click=${createSheet}>Dynamic Sheet</a>
        </p>
        <p>
          <a class="button button-fill sheet-open" data-sheet=".demo-sheet-top">Top Sheet</a>
        </p>
      </div>

      <div class="block-title">Push View</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>Sheet can push view behind on open. By default it has effect only when <code>safe-area-inset-top</code> is
          more than
          zero (iOS fullscreen webapp or iOS cordova app)</p>
        <p>
          <a class="button button-fill sheet-open" data-sheet=".demo-sheet-push">Sheet Push</a>
        </p>
      </div>

      <div class="block-title">Swipeable Sheet</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>Sheet modal can be closed with swipe to top (for top Sheet) or bottom (for default Bottom sheet):</p>
        <p>
          <a class="button button-fill sheet-open" data-sheet=".demo-sheet-swipe-to-close">Swipe To Close</a>
        </p>
        <p>Also there is swipe-step that can be set on Sheet modal to expand it with swipe:</p>
        <p>
          <a class="button button-fill sheet-open" data-sheet=".demo-sheet-swipe-to-step">Swipe To Step</a>
        </p>

        <p>In addition to "swipe step" there is a support for position breakpoints (multiple steps):</p>
        <p>
          <a class="button button-fill sheet-open" data-sheet=".demo-sheet-breakpoints">Breakpoints</a>
        </p>
      </div>

    </div>


    <div class="sheet-modal demo-sheet">
      <div class="toolbar">
        <div class="toolbar-inner">
          <div class="left"></div>
          <div class="right">
            <a class="link sheet-close">Close</a>
          </div>
        </div>
      </div>
      <div class="sheet-modal-inner">
        <div class="page-content">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa aliquid accusamus
              perferendis laboriosam delectus numquam minima animi, libero illo in tempora harum sequi corporis alias ex
              adipisci.</p>
            <p>Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui sed, similique quis
              facere tempora, laudantium quae expedita ea, aperiam dolores. Aut deserunt soluta alias magnam.
              Consequatur, nisi, enim.</p>
            <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus
              similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem
              libero minus dignissimos repellat.</p>
            <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut
              cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt,
              perferendis voluptates doloribus?</p>
            <p>Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur totam nam
              obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus sapiente repellendus nesciunt
              praesentium velit ipsa illo iusto.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="sheet-modal sheet-modal-top demo-sheet-top">
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <div class="left"></div>
          <div class="right">
            <a class="link sheet-close">Close</a>
          </div>
        </div>
      </div>
      <div class="sheet-modal-inner">
        <div class="page-content">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa aliquid accusamus
              perferendis laboriosam delectus numquam minima animi, libero illo in tempora harum sequi corporis alias ex
              adipisci.</p>
            <p>Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui sed, similique quis
              facere tempora, laudantium quae expedita ea, aperiam dolores. Aut deserunt soluta alias magnam.
              Consequatur, nisi, enim.</p>
            <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus
              similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem
              libero minus dignissimos repellat.</p>
            <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut
              cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt,
              perferendis voluptates doloribus?</p>
            <p>Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur totam nam
              obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus sapiente repellendus nesciunt
              praesentium velit ipsa illo iusto.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="sheet-modal demo-sheet-push">
      <div class="toolbar">
        <div class="toolbar-inner">
          <div class="left"></div>
          <div class="right">
            <a class="link sheet-close">Close</a>
          </div>
        </div>
      </div>
      <div class="sheet-modal-inner">
        <div class="page-content">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa aliquid accusamus
              perferendis laboriosam delectus numquam minima animi, libero illo in tempora harum sequi corporis alias ex
              adipisci.</p>
            <p>Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui sed, similique quis
              facere tempora, laudantium quae expedita ea, aperiam dolores. Aut deserunt soluta alias magnam.
              Consequatur, nisi, enim.</p>
            <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus
              similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem
              libero minus dignissimos repellat.</p>
            <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut
              cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt,
              perferendis voluptates doloribus?</p>
            <p>Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur totam nam
              obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus sapiente repellendus nesciunt
              praesentium velit ipsa illo iusto.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="sheet-modal demo-sheet-swipe-to-close" style="height:auto">
      <div class="sheet-modal-inner">
        <div class="swipe-handler"></div>
        <div class="page-content">
          <div class="block-title block-title-large">Hello!</div>
          <div class="block">
            <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus
              similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem
              libero minus dignissimos repellat.</p>
            <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut
              cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt,
              perferendis voluptates doloribus?</p>
          </div>
        </div>
      </div>
    </div>

    <div class="sheet-modal demo-sheet-swipe-to-step" style="height:auto">
      <div class="sheet-modal-inner">
        <div class="swipe-handler"></div>
        <div class="sheet-modal-swipe-step">
          <div class="display-flex padding justify-content-space-between align-items-center">
            <div style="font-size: 18px"><b>Total:</b></div>
            <div style="font-size: 22px"><b>$500</b></div>
          </div>
          <div class="padding-horizontal padding-bottom">
            <a class="button button-large button-fill">Make Payment</a>
            <div class="margin-top text-align-center">Swipe up for more details</div>
          </div>
        </div>
        <div class="block-title block-title-medium margin-top">Your order:</div>
        <div class="list no-hairlines">
          <ul>
            <li class="item-content">
              <div class="item-inner">
                <div class="item-title">Item 1</div>
                <div class="item-after"><b>$200</b></div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-inner">
                <div class="item-title">Item 2</div>
                <div class="item-after"><b>$180</b></div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-inner">
                <div class="item-title">Delivery</div>
                <div class="item-after"><b>$120</b></div>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <div class="sheet-modal demo-sheet-breakpoints" style="height:auto">
      <div class="sheet-modal-inner">
        <div class="swipe-handler" style="background-color: transparent;"></div>
        <div style="display: flex; align-items: center; justify-content: center; height: 20vh;">
          Section 1</div>
        <div style="display: flex; align-items: center; justify-content: center; height: 20vh;">
          Section 2</div>
        <div style="display: flex; align-items: center; justify-content: center; height: 20vh;">
          Section 3</div>

      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $on }) => {
    let sheet;
    let sheetPush;
    let sheetSwipeToClose;
    let sheetSwipeToStep;
    let sheetBreakpoints;

    const toggleSwipeStep = () => {
      sheetSwipeToStep.stepToggle();
    }
    const createSheet = () => {
      // Створити модальний аркуш
      if (!sheet) {
        sheet = $t4.sheet.create({
          content: '\
            <div class="sheet-modal">\
              <div class="toolbar">\
                <div class="toolbar-inner justify-content-flex-end">\
                  <a  class="link sheet-close">Close</a>\
                </div>\
              </div>\
              <div class="sheet-modal-inner">\
                <div class="page-content">\
                  <div class="block">\
                    <p>This sheet modal was created dynamically</p>\
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>\
                  </div>\
                </div>\
              </div>\
            </div>\
          '
        });
      }
      // Закрити вбудований аркуш
      if ($('.demo-sheet.modal-in').length > 0) $t4.sheet.close('.demo-sheet');
      // Відкрити його
      sheet.open();
    }

    $on('pageInit', () => {
      sheetPush = $t4.sheet.create({
        el: '.demo-sheet-push',
        push: true,
        backdrop: true,
      });
      sheetSwipeToClose = $t4.sheet.create({
        el: '.demo-sheet-swipe-to-close',
        swipeToClose: true,
        push: true,
        backdrop: true,
      });
      sheetSwipeToStep = $t4.sheet.create({
        el: '.demo-sheet-swipe-to-step',
        swipeToClose: true,
        swipeToStep: true,
        push: true,
        backdrop: true,
      });
      sheetBreakpoints = $t4.sheet.create({
        el: '.demo-sheet-breakpoints',
        swipeToClose: true,
        breakpoints: [0.33, 0.66],
        backdrop: true,
        backdropBreakpoint: 0.66,
        push: true,
        pushBreakpoint: 0.66,
      });
    });
    $on('pageBeforeOut', () => {
      // Закрийте відкриті аркуші на сторінці
      $t4.sheet.close();
    });
    $on('pageBeforeRemove', () => {


      // Знищити модальний аркуш, коли сторінку видалено
      if (sheet) sheet.destroy();
      if (sheetPush) sheetPush.destroy();
      if (sheetSwipeToClose) sheetSwipeToClose.destroy();
      if (sheetSwipeToStep) sheetSwipeToStep.destroy();
      if (sheetBreakpoints) sheetBreakpoints.destroy();
    });

    return $render;
  };

</script>