- 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 - List Views
Description
List views are powerful user interface components, which presents data in a scrollable list containing multiple rows. List views has many uses as listed below −
It allows users to link through orderly arranged data.
It allows the user to select from an indexed list of items.
It displays detailed information and controls in distinct groupings.
It presents a list of selectable options.
List View layout
The following table shows common layout of list view −
| S.No | List View types & Description |
|---|---|
| 1 | List block
It is your list view elements wrapper which uses list-block class. |
| 2 | Link Elements
The list view elements can be used as links to other pages and data. |
| 3 | List Divider
It is a list element with title which visually divide one list items from another. |
| 4 | Grouped Lists
You can wrap your list view elements within single list block. |
| 5 | Inset List Block
By adding inset class to list-block your list blocks can have inset styling. |