Skip to main content

Панель / Бічні панелі

Навігація

Макет панелі

Розгляньмо, як додати бічні панелі до нашої програми. Ми можемо включити до 2 панелей до нашого додатка, одну з лівого боку та іншу з правого боку. Ми повинні додати HTML панелей прямо на початку кореневого елемента програми (або <body>у випадку, якщо кореневий елемент не використовується):
<body>
  <!-- App root element -->
  <div id="app">
    <!-- Left panel -->
    <div class="panel panel-left">
        ... вміст панелі розміщується тут  ...
    </div>

    <!-- Right panel -->
    <div class="panel panel-right">
        ... вміст панелі розміщується тут  ...
    </div>

    ...
  </div>
</body>

Після додавання панелей нам потрібно вибрати ефект відкриття для кожної панелі. Може виникнути один із таких ефектів:

  • "reveal" — коли панель зміщує весь вміст застосунку,
  • "cover" — коли панель накладається над вмістом застосунку,
  • "push" — коли і панель, і вміст програми переміщуються разом.
  • "floating" — схожий на«cover», але стоворює додатковий простір навколо панелі.
Якщо ви хочете використовувати ефект «Reveal» panel-reveal, вам слід додати до панелі додатковий клас panel-cover для ефекту покриття або ефекту натискання panel-push : 
<body>
  <!-- App root element -->
  <div id="app">
    <!-- Left panel, let it be with reveal effect -->
    <div class="panel panel-left panel-reveal">
        ... вміст панелі тут ...
    </div>

    <!-- Right panel, with cover effect -->
    <div class="panel panel-right panel-cover">
        ... вміст панелі тут ...
    </div>

    ...
  </div>
</body>
Розмір кожної панелі можна змінювати. Щоб зробити панель змінного розміру, нам просто потрібно додати panel-resizable клас до елемента Panel:
<body>
  <! --кореневий  елемент застосунку-->
  <div id="app">
    <!-- Зробити ліву панель змінного розміру  -->
    <div class="panel panel-left panel-resizable">
        ... вміст панелі тут  ...
    </div>

    <!--Зробити праву панель змінного розміру  -->
    <div class="panel panel-right panel-resizable">
        ... вміст панелі тут ...
    </div>
    ...
  </div>
</body>

Методи застосунку Панель

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

Параметри панелі

Якщо ми створюємо панель вручну за допомогою методу app.panel.create , нам потрібно передати об’єкт із параметрами панелі:
ПараметрЗа замовчуваннямОписТип
el
Панельний елемент
string
resizable
Дозволяє змінювати розмір панелі. Якщо не передано, то буде визначено на основі класу panel-resizable .
boolean
visibleBreakpoint
Мінімальна ширина програми (у пікселях), коли ліва панель стає постійно видимою
number
collapsedBreakpoint
Мінімальна ширина програми (у пікселях), коли ліва панель стає частково видимою (згорнутою)
number
swipe
false
Увімкніть, якщо ви хочете ввімкнути можливість відкривати/закривати панель за допомогою свайпа
boolean
swipeNoFollow
false
Запасний варіант для потенційно кращої продуктивності на старих/повільних пристроях. Якщо ви ввімкнете його, панель для свайпа не слідуватиме за вашим жестом під час переміщення дотиком, вона автоматично відкриватиметься/закриватиметься під час свайпу ліворуч/праворуч.
boolean
swipeActiveArea
0
Ширина (у пікселях) невидимого краю від екрана, який ініціює гортання панелі
number
swipeOnlyClose
false
Цей параметр дозволяє закривати (але не відкривати) панель за допомогою свайпів. ( swipe також має бути включено)
boolean
swipeThreshold
0
Панель не рухатиметься під час свайпу, якщо «відстань дотику» буде меншою за це значення (у пікселях).
number
backdrop
true
Вмикає фон панелі (темний напівпрозорий шар ззаду)
boolean
backdropEl
HTML-елемент або рядковий CSS-селектор спеціального елемента фону
string
containerEl
Дозволяє монтувати панель до власного елемента, а не до кореневого елемента програми
string
closeByBackdropClick
true
Увімкнути/вимкнути можливість закривати панель клацанням за межами панелі
boolean
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
 
var panel = app.panel.create({
  el: '.panel-left',
  on: {
    opened: function () {
      console.log('Panel opened')
    }
  }
})
Наприклад:
var panel = app.panel.create({
  el: '.panel-left',
  resizable: true,
  visibleBreakpoint: 1024,
  collapsedBreakpoint: 768,
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах програми у властивості panel , щоб встановити значення за замовчуванням для всіх панелей. Наприклад:
var app = new Techno4({
  panel: {
    swipe: true,
    visibleBreakpoint: 1024,
  }
});

Методи та властивості панелі

Після того, як ми створили екземпляр Panel (за допомогою виклику app.panel.create) або після того, як ми отримали екземпляр Panel (за допомогою виклику app.panel.get), ми можемо використовувати його корисні методи та властивості:
Властивості
Властивість ОписТип
panel.app
Посилання на глобальний екземпляр застосунку
HTMLElement
panel.side
Струна з боку панелі: left або right
HTMLElement
panel.effect
Рядок із ефектом панелі: cover, reveal, floating або push
HTMLElement
panel.opened
Логічна властивість, що вказує на те,панель відкрито чи ні
HTMLElement
panel.el
HTML-елемент панелі
HTMLElement
panel.$el
Екземпляр Dom64 з елементом HTML панелі
HTMLElement
panel.backdropEl
Елемент HTML фону
HTMLElement
panel.$backdropEl
Екземпляр Dom64 із фоновим елементом HTML
HTMLElement
panel.params
Параметри панелі
HTMLElement
panel.containerEl
Елемент для кріплення панелі. (за замовчуванням app.el- кореневий елемент застосунку)
HTMLElement
panel.$containerEl
Екземпляр Dom64 з елементом для монтажу панелі. (за замовчуванням app.el- кореневий елемент застосунку)
HTMLElement
Методи
МетодОписТип
panel.open(animate)
ВІдкрити панель, де
  • animate - boolean — (за замовчуванням true) - визначає, чи відкривати його з анімацією чи ні
HTMLElement
panel.close(animate)
Закрити панель, де
  • animate - boolean — (за замовчуванням true) - визначає, чи має він бути закритий анімацією чи ні
HTMLElement
panel.toggle(animate)
Перемкнути панель, де
  • animate - boolean — (за замовчуванням true) - визначає, чи має він бути закритий анімацією чи ні
HTMLElement
panel.enableVisibleBreakpoint()
Увімкнути видиму точку зупину
HTMLElement
panel.disableVisibleBreakpoint()
Вимкнути видиму точку зупину
HTMLElement
panel.toggleVisibleBreakpoint()
Перемкнути видиму точку зупину
HTMLElement
panel.enableCollapsedBreakpoint()
Увімкнути згорнуту точку зупину
HTMLElement
panel.disableCollapsedBreakpoint()
Вимкнути згорнуту точку зупину
HTMLElement
panel.toggleCollapsedBreakpoint()
Перемкнути згорнуту точку зупину
HTMLElement
panel.enableResizable()
Увімкнути панель зі змінним розміром
HTMLElement
panel.disableResizable()
Вимкнути панель зі змінним розміром
HTMLElement
panel.enableSwipe()
Увімкнути свайп панелі
HTMLElement
panel.disableSwipe()
Вимкнути свайп панелі
HTMLElement
panel.destroy()
Знищити екземпляр панелі
HTMLElement
panel.on(event, handler)
Додати обробник подій
HTMLElement
panel.once(event, handler)
Додати обробник подій, який буде видалено після запуску
HTMLElement
panel.off(event, handler)
Видалити обробник подій
HTMLElement
panel.off(event)
Видалити всі обробники для вказаної події
HTMLElement
panel.emit(event, ...args)
Запустити подію на екземплярі застосунку
HTMLElement

Події панелі

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

Події DOM

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

<div class="panel">

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

<div class="panel">

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

<div class="panel">

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

<div class="panel">

Подія буде ініційована після того, як панель завершить анімацію закриття
string
panel:backdrop-click
Panel Overlay Element

<div class="panel-backdrop">

Подія буде ініційована, коли клацнути поверх панелі
HTMLElement
panel:swipeopen
Елемент панелі

<div class="panel">

Подія буде запущена на самому початку відкриття за допомогою свайпа
string
panel:swipe
Елемент панелі

<div class="panel">

Подія буде ініційована для свайп пальцем панелі під час дії дотику
string
panel:collapsedbreakpoint
Елемент панелі

<div class="panel">

Подія буде ініційована, коли вона стане видимою/прихованою, коли ширина програми збігається з її шириною collapsedBreakpoint
string
panel:breakpoint
Елемент панелі

<div class="panel">

Подія буде ініційована, коли вона стане видимою/прихованою, коли ширина програми збігається з її шириною visibleBreakpoint
string
panel:resize
Елемент панелі

<div class="panel">

Подія буде ініційована при зміні розміру панелі
string
panel:beforedestroy
Елемент панелі

<div class="panel">

Подія буде запущена безпосередньо перед знищенням екземпляра Panel
string

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

Екземпляр панелі заспускає події на самому екземплярі та екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом panel.
ПодіяАргументОписТип
open
(panel)
Подія буде ініційована, коли панель запустить початкову анімацію. Як аргумент обробник події отримує екземпляр панелі
undefined
panelOpen
(panel)
Подія буде ініційована, коли панель запустить початкову анімацію. Як аргумент обробник події отримує екземпляр панелі
undefined
opened
(panel)
Подію буде запущено, коли панель завершить свою початкову анімацію. Як аргумент обробник події отримує екземпляр панелі
undefined
panelOpened
(panel)
Подію буде запущено, коли панель завершить свою початкову анімацію. Як аргумент обробник події отримує екземпляр панелі
undefined
close
(panel)
Подія буде ініційована, коли панель почне завершувати анімацію. Як аргумент обробник події отримує екземпляр панелі
undefined
panelClose
(panel)
Подія буде ініційована, коли панель почне завершувати анімацію. Як аргумент обробник події отримує екземпляр панелі
undefined
closed
(panel)
Подія буде ініційована, коли панель завершить свою анімацію закриття. Як аргумент обробник події отримує екземпляр панелі
undefined
panelClosed
(panel)
Подія буде ініційована, коли панель завершить свою анімацію закриття. Як аргумент обробник події отримує екземпляр панелі
undefined
backdropClick
(panel)
Подія буде ініційована, коли клацнути фон панелі. Як аргумент обробник події отримує екземпляр панелі
undefined
panelBackdropClick
(panel)
Подія буде ініційована, коли клацнути фон панелі. Як аргумент обробник події отримує екземпляр панелі
undefined
swipeOpen
(panel)
Подія буде запущена на самому початку відкриття за допомогою свайпа. Як аргумент обробник події отримує екземпляр панелі
undefined
panelSwipeOpen
(panel)
Подія буде запущена на самому початку відкриття за допомогою свайпа. Як аргумент обробник події отримує екземпляр панелі
undefined
swipe
(panel, progress)
Подія буде ініційована для панелі свапа пальцем під час дії дотик пальця. Як аргумент обробник події отримує екземпляр панелі та відкритий прогрес (від 0 до 1)
undefined
panelSwipe
(panel, progress)
Подія буде ініційована для панелі свапа пальцем під час дії дотик пальця. Як аргумент обробник події отримує екземпляр панелі та відкритий прогрес (від 0 до 1)
undefined
collapsedBreakpoint
(panel)
Подія буде ініційована, коли вона стане видимою/прихованою, коли ширина програми збігається з її collapsedBreakpoint. Як аргумент обробник події отримує екземпляр панелі
undefined
panelCollapsedBreakpoint
(panel)
Подія буде ініційована, коли вона стане видимою/прихованою, коли ширина програми збігається з її collapsedBreakpoint. Як аргумент обробник події отримує екземпляр панелі
undefined
breakpoint
(panel)
Подія буде ініційована, коли вона стане видимою/прихованою, коли ширина програми збігається з її visibleBreakpoint. Як аргумент обробник події отримує екземпляр панелі
undefined
panelBreakpoint
(panel)
Подія буде ініційована, коли вона стане видимою/прихованою, коли ширина програми збігається з її visibleBreakpoint. Як аргумент обробник події отримує екземпляр панелі
undefined
resize
(panel, newPanelWidth)
Подія буде ініційована при зміні розміру панелі
undefined
panelResize
(panel)
Подія буде ініційована при зміні розміру панелі
undefined
beforeDestroy
(panel)
Подія буде запущена безпосередньо перед знищенням екземпляра Panel
undefined
panelBeforeDestroy
(panel)
Подія буде запущена безпосередньо перед знищенням екземпляра Panel
undefined

Автоматична ініціалізація панелі

Якщо вам не потрібен API Panel і ваша панель знаходиться всередині застосунку під час ініціалізації або всередині сторінки та представлена в DOM у момент ініціалізації сторінки, тоді її можна автоматично ініціалізувати, просто додавши додатковий клас panel-init:
<!-- Add panel-init class -->
<div class="panel panel-left panel-cover panel-init">
  ...
</div>
У цьому випадку, якщо вам потрібно отримати доступ до створеного екземпляра Panel, ви можете скористатися методом програми app.panel.get:
var panel = app.panel.get('.panel-left');

if (panel.opened) {
  // do something
}
Під час використання автоматичної ініціалізації може знадобитися передати додаткові параметри. Це можна зробити за допомогою data- атрибутів на елементі панелі.
<!-- parameters set via data- attributes -->
<div
  class="panel panel-left panel-reveal panel-init"
  data-collapsed-breakpoint="768"
  data-visible-breakpoint="1024"
  data-swipe="true"
>
  ...
</div>
Параметри, які використовуються в camelCase, наприклад visibleBreakpoint , в атрибутах data- слід використовувати в kebab-case як data-visible-breakpoint

Панель управління з посиланнями

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

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

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

— Щоб перемикати панель, нам потрібно додати panel-toggle клас до будь-якого елемента HTML (бажано посилання)

— Якщо ви хочете вказати, яку панель слід відкривати/закривати, то це можна зробити за допомогою додаткового data-panel=".panel-left" атрибута цього елемента HTML. Цей атрибут також може отримати значення just left бо, right якщо в DOM є лише одна панель такої сторони.

Відповідно до примітки вище:

<body>
  <div id="app">
    <!-- Left Panel with Reveal effect -->
    <div class="panel panel-left panel-reveal panel-init">
      <div class="block">
        ...
        <!-- Clicking on link with "panel-close" class will close panel -->
        <p><a href="#" class="panel-close">Close me</a></p>
        <!-- Click on link with "panel-open" and data-panel=".panel-right" attribute will open Right panel -->
        <p><a href="#" data-panel=".panel-right" class="panel-open">Open Right Panel</a></p>
      </div>
    </div>

    <!-- Right Panel with Cover effect -->
    <div class="panel panel-right panel-cover panel-init">
      <div class="block">
        ...
        <!-- Click on link with "panel-close" class will close panel -->
        <p><a href="#" class="panel-close">Close me</a></p>
        <!-- Click on link with "panel-open" and data-panel=".panel-left" attribute will open Left panel -->
        <p><a href="#" data-panel=".panel-left" class="panel-open">Open Left Panel</a></p>
      </div>
    </div>

    ...
    <div class="page-content">
      <div class="block">
        <!-- Click on link with "panel-open" and data-panel=".panel-left" attribute will open Left panel -->
        <p><a href="#" data-panel=".panel-left" class="panel-open">Open Left Panel</a></p>
        <!-- Click on link with "panel-open" and data-panel=".panel-right" attribute will open Right panel -->
        <p><a href="#" data-panel=".panel-right" class="panel-open">Open Right Panel</a></p>
      </div>
    </div>
  </div>
  ...
</body>

Маршрутизовані панелі

Панелі також можна маршрутизувати з тими ж функціями, що й для маршрутизованих модалів і сторінок:

— iнадає можливість відкривати Panel за звичайними посиланнями замість так званих спеціальних посилань або API,

— з увімкненою історією веб-переглядача та сама панель буде відкрита, коли ви оновите веб-переглядач, перейдете назад і вперед в історії,

— за допомогою маршрутизованих панелей ви можете завантажувати саму панель та її вміст у такий самий спосіб, як і для сторінок і режимів, тобто за допомогою ‘url’, або ‘content’ ‘component' ‘componentUrl’ 

routes = [
  ...
  // Creates Panel from passed HTML string
  {
    path: '/left-panel/',
    panel: {
      content: `
        <div class="panel panel-left panel-cover">
          <div class="view">
            <div class="page">
              ...
            </div>
          </div>
        </div>
      `
    }
  },
  // Load Panel from file via Ajax
  {
    path: '/right-panel-ajax/',
    panel: {
      url: './right-panel.html',
      /* right-panel.html contains:
      <div class="panel panel-right panel-reveal">
        <div class="view">
          <div class="page">
            ...
          </div>
        </div>
      </div>
      */
    },
  },
  // Load Panel from component file
  {
    path: '/panel-component/',
    panel: {
      componentUrl: './panel-component.html',
      /* panel-component.html contains:
      <template>
        <div class="panel panel-left panel-cover">
          <div class="view">
            <div class="page">
              ...
            </div>
          </div>
        </div>
      </template>
      <style>...</style>
      <script>...</script>
      */
    },
  },
]
Відповідно до прикладу вище:

— коли ви натискаєте посилання з /left-panel/атрибутом href, відкриється панель із указаним вмістом рядка,

— коли ви натискаєте посилання з /right-panel-ajax/атрибутом href, він виконає запит Ajax до right-panel.html файлу та відкриє його як праву панель,

— коли ви натискаєте посилання з /panel-component/атрибутом href, він виконає запит Ajax до panel-component.html файлу, розбере його як компонент маршрутизатора та відкриє як панель,

Вкладені панелі

На додаток до основних панелей додатків також можна мати вкладені панелі, наприклад, усередині сторінки. Щоб зробити панель вкладеною, нам потрібно вказати її ‘containerEl’ параметр, що вказує на батьківський контейнер (наприклад, елемент Page) і розмістити його перед ‘page-content’ елементом: 
<div class="page" id="panel-page">
  <div class="navbar">
    <!-- ... -->
  </div>

  <!-- Nested panel has parent page specified in containerEl parameter -->
  <div class="panel panel-left panel-cover panel-init dark" id="panel-nested" data-container-el="#panel-page">
    <div class="page">
      <!-- ... -->
    </div>
  </div>

  <!-- Rest of the page -->
  <div class="page-content">
    <!-- ... -->
  </div>
</div>

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-panel-width: 260px;
  --t4-panel-backdrop-bg-color: rgba(0, 0, 0, 0.3);
  /*
  --t4-panel-left-width: var(--t4-panel-width);
  --t4-panel-right-width: var(--t4-panel-width);
  --t4-panel-left-collapsed-width: var(--t4-panel-collapsed-width);
  --t4-panel-right-collapsed-width: var(--t4-panel-collapsed-width);
  */
  --t4-panel-bg-color: #fff;
}
:root .dark,
:root.dark {
  --t4-panel-bg-color: #000;
}
.ios {
  --t4-panel-collapsed-width: 58px;
  --t4-panel-transition-duration: 400ms;
  --t4-panel-transition-timing-function: initial;
}
.md {
  --t4-panel-collapsed-width: 60px;
  --t4-panel-transition-duration: 400ms;
  --t4-panel-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
}

Приклади 

<div class="page" id="panel-page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Panel / Side panels</div>
    </div>
  </div>
  <div class="panel panel-left panel-cover panel-init" id="panel-nested" data-container-el="#panel-page">
    <div class="page">
      <div class="page-content">
        <div class="block block-strong-ios block-outline-ios">
          <p>This is page-nested Panel.</p>
          <p><a class="panel-close">Close me</a></p>
        </div>
      </div>
    </div>
  </div>

  <div class="page-content">
    <div class="block block-strong-ios block-outline-ios">
      <p>Techno4 comes with 2 panels (on left and on right), both are optional.
        You can put absolutely anything inside: data lists, forms, custom content, and even other isolated app view
        (like in right panel now) with its own dynamic navbar.</p>
    </div>
    <div class="block block-strong-ios block-outline-ios">
      <p class="grid grid-cols-2 grid-gap">
        <a class="button button-raised button-fill panel-open">Open left panel</a>
        <a class="button button-raised button-fill panel-open" data-panel="right">Open right panel</a>
      </p>
      <p>
        <a class="button button-raised button-fill panel-open" data-panel="#panel-nested">Open nested panel</a>
      </p>
    </div>
  </div>
</div>