Accordion / Collapsible

Навігація

Макет Accordion
Макет, що розгортається
Перегляд списку Accordion
Opposite Accordion
Приклад
Методи застосунку Accordion
Accordion Події
Події DOM; Події застосунку

Макет Accordion

Загальний макет Accordion можна розглядати як наступне:

<div class="accordion-list">
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item accordion-item-opened">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  ...
</div>

accordion-list — перелік предметів набору Accordion. Опціональний клас
accordion-item — одинарний елемент Accordion. Є обов'язковим
accordion-item-toggle — посилання для розширення/згортання вмісту елемента Accordion. Є обов'язковим
accordion-item-content — вміст предмета прихованого Accordion. Є обов'язковим
accordion-item-opened — одинарний відкритий Accordion

Макет, що розгортається

Якщо ви хочете використовувати один окремий згорнутий елемент, ви можете просто опустити елемент обгортки "accordion-list":

<!-- Single collapsible element -->
<div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
</div>

<!-- Another separate collapsible element -->
<div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
</div>

Accordion Перегляд списку

Якщо ви використовуєте перегляд списку Accordion , ви можете використовувати елемент «item-link» замість «accordion-toggle»:

<div class="list accordion-list">
    <ul>
        <li class="accordion-item">
            <a href="" class="item-link item-content">
                <div class="item-inner">
                    <div class="item-title">Item 1</div>
                </div>
            </a>
            <div class="accordion-item-content">Item 1 content ...</div>
        </li>
        <li class="accordion-item">
            <a href="" class="item-link item-content">
                <div class="item-inner">
                    <div class="item-title">Item 2</div>
                </div>
            </a>
            <div class="accordion-item-content">Item 2 content ...</div>
        </li>
    </ul>
</div>

Opposite Accordion

Щоб відобразити піктограму шеврона акордеона на протилежній стороні (ліворуч у LTR), потрібно додати додатковий клас акордеона протилежно до контейнера акордеона або списку акордеонів:

<!-- Accordion opposite -->
<div class="accordion-list accordion-opposite">
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item accordion-item-opened">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  ...
</div>

<!-- Accordion list opposite -->
<div class="list accordion-list accordion-opposite">
  <ul>
    <li class="accordion-item">
      <a href="" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div>
      </a>
      <div class="accordion-item-content">Item 1 content ...</div>
    </li>
    <li class="accordion-item">
      <a href="" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div>
      </a>
      <div class="accordion-item-content">Item 2 content ...</div>
    </li>
  </ul>
</div>

Приклад

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Accordion</div>
      </div>
    </div>

    <div class="page-content">
      <div class="block-title">List View Accordion</div>
      <div class="list accordion-list">
        <ul>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 1</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 2</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 3</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 4</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
        </ul>
      </div><!-- Separate collapsibles - omit "accordion-list" class-->
      <div class="block-title">Separate Collapsibles</div>
      <div class="list">
        <ul>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 1</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 2</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 3</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 4</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Opposite Side</div>
      <div class="list accordion-list accordion-opposite">
        <ul>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 1</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 2</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 3</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 4</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Custom Accordion</div>
      <div class="block accordion-list custom-accordion">
        <div class="accordion-item">
          <div class="accordion-item-toggle">
            <i class="icon icon-plus">+</i>
            <i class="icon icon-minus">-</i>
            <span>Item 1</span>
          </div>
          <div class="accordion-item-content">
            <p>Item 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
              velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-item-toggle">
            <i class="icon icon-plus">+</i>
            <i class="icon icon-minus">-</i>
            <span>Item 2</span>
          </div>
          <div class="accordion-item-content">
            <p>Item 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
              velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-item-toggle">
            <i class="icon icon-plus">+</i>
            <i class="icon icon-minus">-</i>
            <span>Item 3</span>
          </div>
          <div class="accordion-item-content">
            <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
              velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<style>
  .custom-accordion {
    padding-left: 0;
    padding-right: 0;
  }

  .custom-accordion .accordion-item-toggle {
    padding: 0px 15px;
    height: 44px;
    line-height: 44px;
    font-size: 17px;
    color: #000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  .custom-accordion .accordion-item-toggle:active {
    background: rgba(0, 0, 0, 0.15);
  }

  .custom-accordion .accordion-item-toggle span {
    display: inline-block;
    margin-left: 15px;
  }

  .custom-accordion .accordion-item:last-child .accordion-item-toggle {
    border-bottom: none;
  }

  .custom-accordion .icon-plus,
  .custom-accordion .icon-minus {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid #000;
    border-radius: 100%;
    line-height: 20px;
    text-align: center;
  }

  .custom-accordion .icon-minus {
    display: none;
  }

  .custom-accordion .accordion-item-opened .icon-minus {
    display: inline-block;
  }

  .custom-accordion .accordion-item-opened .icon-plus {
    display: none;
  }

  .custom-accordion .accordion-item-content {
    padding: 0px 15px;
  }
</style>

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

Компонент Accordion надає публічні методи через простір імен app.accordion.* для програмного керування складними секціями:

Відкриття елемента: app.accordion.open(item)

— item: HTMLElement | CSSSelector (або string селектора елемента .accordion-item). Обов'язковий параметр. Відкриває вказаний елемент з плавною CSS-анімацією висоти.
Закриття елемента: app.accordion.close(item)

— item: HTMLElement | CSSSelector (або string). Обов'язковий параметр. Згортає вказаний елемент.
Перемикання стану (Toggle): app.accordion.toggle(item)

— item: HTMLElement | CSSSelector (або string). Обов'язковий параметр. Змінює стан елемента (відкриває, якщо закрито, або згортає, якщо відкрито).

Accordion Події

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

Подія	Об'єкт	Опис	Тип
accordion:beforeopen	Accordion пункт <div class="accordion-item">	Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне свою початкову анімацію. event.detail.prevent містить функцію, яка запобігатиме відкриттю гармошки під час виклику	string
accordion:open	Accordion пункт <div class="accordion-item">	Подія буде ініційована, коли вміст гармошки почне свою початкову анімацію	string
accordion:opened	Accordion пункт <div class="accordion-item">	Подію буде ініційовано після завершення початкової анімації вмісту гармошки	HTMLElement
accordion:beforeclose	Accordion пункт <div class="accordion-item">	Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне завершувати анімацію. event.detail.prevent містить функцію, яка запобігає закриттю гармошки під час виклику	function
accordion:close	Accordion пункт <div class="accordion-item">	Подія буде ініційована, коли акордеонний вміст почне завершувати анімацію	HTMLElement
accordion:closed	Accordion пункт <div class="accordion-item">	Подію буде запущено після завершення анімації гармошки	HTMLElement

Події застосунку

Подія	Аргумент	Опис	Тип
accordionBeforeOpen	(el, prevent)	Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне свою початкову анімацію. prevent містить функцію, яка запобігатиме відкриттю гармошки під час виклику	string
accordionOpen	(el)	Подія буде ініційована, коли вміст акордеона почне свою початкову анімацію	string
accordionOpened	(el)	Подію буде ініційовано після завершення початкової анімації вмісту акордеона	Event
accordionBeforeClose	(el, prevent)	Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне завершувати анімацію. prevent містить функцію, яка запобігає закриванню акордеона під час виклику	Event
accordionClose	(el)	Подія буде ініційована, коли акордеонний вміст почне завершувати анімацію	Event
accordionClosed	(el)	Подію буде запущено після завершення анімації акордеона	Event

var app = new Techno4();

var $ = app.$; // або import $ from 'dom64';

$('.accordion-item').on('accordion:opened', function () {
  app.dialog.alert('Accordion item opened');
});

$('.accordion-item').on('accordion:closed', function (e) {
  app.dialog.alert('Accordion item closed');
});

app.on('accordionOpened', function (el) {
  console.log('The following element opened:');
  console.log(el);
});

CSS змінні (CSS Custom Properties)

Значення	Змінна (CSS Property)	Опис та значення за замовчуванням	Тип
'chevron_down'	--t4-accordion-chevron-icon-down	Іконка шеврона у закритому стані (t4-icons)	string
'chevron_up'	--t4-accordion-chevron-icon-up	Іконка шеврона у розгорнутому стані (t4-icons)	string

TECHNO4 FRAMEWORK2
- Get Started
- Boonker
- Installation
- Package Structure
- App HTML Layout
- RTL Layout
- Initialize App
- Events
- Router Component
- Routes
- Store
- App/Core
- Accordion/Collapsible
- Action Sheet
- Area chart
- Autocomplete
- Badge
- Block/Content Block
- Breadcrumbs
- Button
- Calendar/Date Picker
- Cards
- Checkbox
- Chips
- Color Picker
- Contact List
- Data Table
- Dialog
- Floating action button
- Form
- Gauge
- Icons
- Inputs / Form Inputs
- Grid /Layout Grid
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Navbar
- Messages
- Notification
- Panel/Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Introduction
- Page
- Infinite Scroll
- Tabs
- Swiper
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar & Tabbar
- Tooltip
- Touch Ripple
- Treeview
- Virtual List
- Elevation
- Apache Cordova Integration
- Hardware: Web Audio API & Synth
- Hardware: Web MIDI Inspector
- Hardware: Web Serial UART Terminal
- Threads Studio: Visual Workflows
- Techno4 CLI: Scaffolding Reference
- DOM64: Selector Engine
- Rollup & Vite Component Compiler
- Початок роботи
  - Тестовий підпункт
- Techno4 Total
- Threads Components
- Types