- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Swipeout
Description
The swipeout allows you to reveal hidden menu actions by swiping over the list elements. Swipeout is an extension of list view.
Swipeout Classes
The following table shows the list of classes used in swipeout −
| S.No | Class & Description |
|---|---|
| 1 | swipeout-content It is the wrapper for your list element. It will move when you swipe over the list item. |
| 2 | swipeout-actions-left It is the container consisting of left swipeout action buttons/links. |
| 3 | swipeout-actions-right It is the container consisting of right swipeout action buttons/links. |
| 4 | swipeout-close It is an additional class on swipeout link. It is used to close swipeout element whenever you click this link. |
The swipeout-content and swipeout-actions-left/right should be direct children of <li>
Swipeout Types
The following table shows the swipeout types used in Framework7 −
| S.No | Type & Description |
|---|---|
| 1 | Swipeout Basic
A basic swipeout contains swipeout-content wrapper and action buttons/links. |
| 2 | Swipe To Delete
To delete the swipeout action buttons, you can use swipeout-delete class. |
| 3 | Overswipe
The overswipe actions will be automatically triggered when you swipe actions too much. |
| 4 | Swipeout JavaScript API
To control the swipeout elements, swipeout provide you with JavaScript API. |
| 5 | Swipeout events
To detect how a user interacts with the swipeout, you can use swipeout events. |