-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Views React Component
Views is the wrapper container for all visual views that stays visible most of the time (not in modals, panels). Let's say that views is a main wrapper for "body" of your app. Only one "Views" element is allowed
Usage examples
<Views>
...
</Views>
Renders to:
<div class="views">
...
</div>
Views As Tabs
<Views tabs>
<View id="view-1" tab active>...</View>
<View id="view-2" tab>...</View>
</Views>
Renders to:
<div class="views tabs">
<div class="view tab active" id="view-1">...</div>
<div class="view tab" id="view-2">...</div>
</div>
With fixed navbar for all nested views
<Views navbarFixed>
...
</Views>
Renders to:
<div class="views navbar-fixed">
...
</div>
Properties
Prop | Type | Description |
---|---|---|
tabs | boolean | Uses Views as Tabs |
theme | string | Views theme color. One of default colors |
layout | string | Views layout theme. One of default layout themes |
navbarFixed | boolean | Enable when you use fixed navbar layout |
navbarThrough | boolean | Enable when you use through navbar layout |
toolbarFixed | boolean | Enable when you use fixed toolbar layout |
toolbarThrough | boolean | Enable when you use through toolbar layout |
tabbarFixed | boolean | Enable when you use fixed tabbar layout |
tabbarThrough | boolean | Enable when you use through tabbar layout |
tabbarLabelsFixed | boolean | Enable when you use fixed tabbar layout |
tabbarLabelsThrough | boolean | Enable when you use through tabbar layout |