-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Accordion Vue Component
Accordion Vue component represents Framework7's Accordion component.
Accordion Components
There are following components included:
f7-accordion
f7-accordion-item
f7-accordion-toggle
f7-accordion-content
Accordion Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-accordion-item> properties | |||
opened | boolean | Makes accordion item opened |
Accordion Events
Event | Description |
---|---|
<f7-accordion-item> events | |
accordion:open | Event will be triggered when accordion content starts its opening animation. |
accordion:opened | Event will be triggered after accordion content completes its opening animation. |
accordion:close | Event will be triggered when accordion content starts its closing animation. |
accordion:closed | Event will be triggered after accordion content completes its closing animation. |
Accordion List
Accordion List is not a separate component, but just a particular case of using <f7-list>
, <f7-list-item>
and <f7-accordion-content>
components.
In this case accordion events will be fired on f7-list-item
.
Examples
Accordion
<f7-accordion>
<!-- Item 1 -->
<f7-accordion-item>
<f7-accordion-toggle>Item 1</f7-accordion-toggle>
<f7-accordion-content>
Item 1 content...
</f7-accordion-content>
</f7-accordion-item>
<!-- Item 2 -->
<f7-accordion-item>
<f7-accordion-toggle>Item 2</f7-accordion-toggle>
<f7-accordion-content>
Item 2 content...
</f7-accordion-content>
</f7-accordion-item>
</f7-accordion>
Renders to:
<div class="accordion-list">
<!-- Item 1 -->
<div class="accordion-item">
<div class="accordion-item-toggle">Item 1</div>
<div class="accordion-item-content">
Item 1 content...
</div>
</div>
<!-- Item 2 -->
<div class="accordion-item">
<div class="accordion-item-toggle">Item 2</div>
<div class="accordion-item-content">
Item 2 content...
</div>
</div>
</div>
Separate Collapsible
If you want to use single separate collapsible element you may just omit f7-accordion
wrapper element:
<!-- Single collapsible element -->
<f7-accordion-item>
<f7-accordion-toggle>Item 1</f7-accordion-toggle>
<f7-accordion-content>
Item 1 content...
</f7-accordion-content>
</f7-accordion-item>
<!-- Another separate collapsible element -->
<f7-accordion-item>
<f7-accordion-toggle>Item 2</f7-accordion-toggle>
<f7-accordion-content>
Item 2 content...
</f7-accordion-content>
</f7-accordion-item>
Renders to:
<!-- Single collapsible element -->
<div class="accordion-item">
<div class="accordion-item-toggle">Item 1</div>
<div class="accordion-item-content">
Item 1 content...
</div>
</div>
<!-- Another separate collapsible element -->
<div class="accordion-item">
<div class="accordion-item-toggle">Item 2</div>
<div class="accordion-item-content">
Item 2 content...
</div>
</div>
Accordion List
In this case we need to enable accordion list on <f7-list>
by passing accordion
boolean prop. And enable accordion item on <f7-list-item>
by passing accordion-item
boolean prop:
<f7-list accordion>
<f7-list-item accordion-item title="Accordion Item 1">
<f7-accordion-content>
<f7-block>
<p>Accordion Item 1 Content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
</f7-block>
</f7-accordion-content>
</f7-list-item>
<f7-list-item accordion-item title="Accordion Item 2">
<f7-accordion-content>
<f7-block>
<p>Accordion Item 2 Content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
</f7-block>
</f7-accordion-content>
</f7-list-item>
</f7-list>
Renders to:
<div class="list accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Accordion Item 1</div>
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>Accordion Item 1 Content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Accordion Item 2</div>
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>Accordion Item 2 Content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
</div>
</div>
</li>
</ul>
</div>