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

Навігація

Макет Панелі
Методи застосунку Панель
Параметри панелі
Методи та властивості панелі
Події Панелі
Події DOM
Події екземплярів застосунку та панелі
Автоматична ініціалізація панелі
Панель управління з посиланнями
Маршрутизовані панелі
Вкладені панелі
Змінні CSS
Приклади

Макет панелі

Розгляньмо, як додати бічні панелі до нашої програми. Ми можемо включити до 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.` Об'єкт з параметрами панелі Метод повертає створений екземпляр Panel
app.panel.destroy(`el`)	знищити екземпляр Panel ● `el - HTMLElement or string` (with CSS Selector) or `object`. Елемент панелі або екземпляр панелі для знищення.
app.panel.get(`el`)	отримати екземпляр Panel за елементом HTML ● `el - HTMLElement or string` (with CSS Selector). Панельний елемент. Метод повертає екземпляр Panel
app.panel.open(`panel, animate`)	відкрити панель ● `panel - HTMLElement or string` (with CSS Selector) елемент панелі, який потрібно відкрити ● `animate - boolean.` Відкривати з анімацією чи ні. Необов’язковий, за замовчуванням є `true`.
app.panel.close(`panel, animate`)	закрити панель ● `panel - HTMLElement or string` (with CSS Selector) елемента панелі, який потрібно закрити ● `animate - boolean`. Закривати анімацією чи ні. Необов’язковий, за замовчуванням є `true`
app.panel.toggle(`panel, animate`)	перемикати панель ● `panel - HTMLElement or string` (with CSS Selector) елемента панелі для перемикання ● `animate - boolean`. Відкривати/закривати з анімацією чи ні. Необов’язковий, за замовчуванням є `true`

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

Якщо ми створюємо панель вручну за допомогою методу app.panel.create , нам потрібно передати об’єкт із параметрами панелі:

Параметр	За замовчуванням	Опис	Тип
el		Панельний елемент	HTMLElement 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-селектор спеціального елемента фону	HTMLElement string
containerEl		Дозволяє монтувати панель до власного елемента, а не до кореневого елемента програми	HTMLElement 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	Посилання на глобальний екземпляр застосунку
panel.side	Струна з боку панелі: `left` або `right`
panel.effect	Рядок із ефектом панелі: `cover`, `reveal`, `floating` або `push`
panel.opened	Логічна властивість, що вказує на те,панель відкрито чи ні
panel.el	HTML-елемент панелі
panel.$el	Екземпляр Dom64 з елементом HTML панелі
panel.backdropEl	Елемент HTML фону
panel.$backdropEl	Екземпляр Dom64 із фоновим елементом HTML
panel.params	Параметри панелі
panel.containerEl	Елемент для кріплення панелі. (за замовчуванням `app.el`- кореневий елемент застосунку)
panel.$containerEl	Екземпляр Dom64 з елементом для монтажу панелі. (за замовчуванням `app.el`- кореневий елемент застосунку)

Методи

Метод	Опис
panel.open(`animate`)	ВІдкрити панель, де ● `animate - boolean` (за замовчуванням `true`) - визначає, чи відкривати його з анімацією чи ні
panel.close(`animate`)	Закрити панель, де ● `animate - boolean` (за замовчуванням `true`) - визначає, чи має він бути закритий анімацією чи ні
panel.toggle(`animate`)	Перемкнути панель, де ● `animate - boolean` (за замовчуванням `true`) - визначає, чи має він бути закритий анімацією чи ні
panel.enableVisibleBreakpoint()	Увімкнути видиму точку зупину
panel.disableVisibleBreakpoint()	Вимкнути видиму точку зупину
panel.toggleVisibleBreakpoint()	Перемкнути видиму точку зупину
panel.enableCollapsedBreakpoint()	Увімкнути згорнуту точку зупину
panel.disableCollapsedBreakpoint()	Вимкнути згорнуту точку зупину
panel.toggleCollapsedBreakpoint()	Перемкнути згорнуту точку зупину
panel.enableResizable()	Увімкнути панель зі змінним розміром
panel.disableResizable()	Вимкнути панель зі змінним розміром
panel.enableSwipe()	Увімкнути свайп панелі
panel.disableSwipe()	Вимкнути свайп панелі
panel.destroy()	Знищити екземпляр панелі
panel.on(`event, handler`)	Додати обробник подій
panel.once(`event, handler`)	Додати обробник подій, який буде видалено після запуску
panel.off(`event, handler`)	Видалити обробник подій
panel.off(`event`)	Видалити всі обробники для вказаної події
panel.emit(`event, ...args`)	Запустити подію на екземплярі застосунку

Події панелі

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

Події DOM

Подія	Об'єкт	Опис
panel:open	Елемент панелі `<div class="panel">`	Подія буде ініційована, коли панель запустить початкову анімацію
panel:opened	Елемент панелі `<div class="panel">`	Подію буде запущено після того, як панель завершить свою початкову анімацію
panel:close	Елемент панелі `<div class="panel">`	Подія буде ініційована, коли панель почне завершувати анімацію
panel:closed	Елемент панелі `<div class="panel">`	Подія буде ініційована після того, як панель завершить анімацію закриття
panel:backdrop-click	Panel Overlay Element `<div class="panel-backdrop">`	Подія буде ініційована, коли клацнути поверх панелі
panel:swipeopen	Елемент панелі `<div class="panel">`	Подія буде запущена на самому початку відкриття за допомогою свайпа
panel:swipe	Елемент панелі `<div class="panel">`	Подія буде ініційована для свайп пальцем панелі під час дії дотику
panel:collapsedbreakpoint	Елемент панелі `<div class="panel">`	Подія буде ініційована, коли вона стане видимою/прихованою, коли ширина програми збігається з її шириною `collapsedBreakpoint`
panel:breakpoint	Елемент панелі `<div class="panel">`	Подія буде ініційована, коли вона стане видимою/прихованою, коли ширина програми збігається з її шириною `visibleBreakpoint`
panel:resize	Елемент панелі `<div class="panel">`	Подія буде ініційована при зміні розміру панелі
panel:beforedestroy	Елемент панелі `<div class="panel">`	Подія буде запущена безпосередньо перед знищенням екземпляра Panel

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

Екземпляр панелі заспускає події на самому екземплярі та екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом panel.

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

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

Якщо вам не потрібен 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>