Accordion / Collapsible
Навігація
Макет 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 Перегляд списку
«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
<!-- 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 Методи застосунку
app.accordion.open(item)
- відкрити зазначений гармошковий елемент
● item
- HTMLElement or string (із CSS Selector) елемента accordion-item (<div class="accordion-item">
). Вимагається
app.accordion.close(item)
- закрити гармошкою вказаний пункт
● item
- HTMLElement or string (із CSS Selector) елемента accordion-item (<div class="accordion-item">)
. Вимагається
app.accordion.toggle(item)
- перемкнути вказаний елемент гармошки
● item
- HTMLElement or string (із CSS Selector) елемента accordion-item (<div class="accordion-item">
). Вимагається
Accordion Події
Подія | Об'єкт | Опис |
---|---|---|
accordion:beforeopen | Accordion пункт <div class="accordion-item"> | Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне свою початкову анімацію. event.detail.prevent містить функцію, яка запобігатиме відкриттю гармошки під час виклику |
accordion:open | Accordion пункт <div class="accordion-item"> | Подія буде ініційована, коли вміст гармошки почне свою початкову анімацію |
accordion:opened | Accordion пункт <div class="accordion-item"> | Подію буде ініційовано після завершення початкової анімації вмісту гармошки |
accordion:beforeclose | Accordion пункт <div class="accordion-item"> | Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне завершувати анімацію. event.detail.prevent містить функцію, яка запобігає закриттю гармошки під час виклику |
accordion:close | Accordion пункт <div class="accordion-item"> | Подія буде ініційована, коли акордеонний вміст почне завершувати анімацію |
accordion:closed | Accordion пункт <div class="accordion-item"> | Подію буде запущено після завершення анімації гармошки |
Події застосунку
Подія | Аргумент | Опис |
---|---|---|
accordionBeforeOpen | (el, prevent) | Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне свою початкову анімацію. prevent містить функцію, яка запобігатиме відкриттю гармошки під час виклику |
accordionOpen | (el) | Подія буде ініційована, коли вміст акордеона почне свою початкову анімацію |
accordionOpened | (el) | Подію буде ініційовано після завершення початкової анімації вмісту акордеона |
accordionBeforeClose | (el, prevent) | Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне завершувати анімацію. prevent містить функцію, яка запобігає закриванню акордеона під час виклику |
accordionClose | (el) | Подія буде ініційована, коли акордеонний вміст почне завершувати анімацію |
accordionClosed | (el) | Подію буде запущено після завершення анімації акордеона |
var app = new Techno4();
var $ = Dom7;
$('.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);
});
Techno4 Framework
- Get Started
- Introduction
- Kitchen Sink
- 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