-
Get Started
-
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- 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
Color Properties
Color Properties
All Framework7-React components supports same set of color properties that allow to set separate element colors and color themes:
Prop | Type | Default | Description |
---|---|---|---|
color | string | Single element color. One of the default colors. | |
colorTheme | string | Applies color theme to the element. It should be some parent element as this will have visual effect on all supported children elements, e.g. view, page, navbar, toolbar, list, etc. One of the default colors. | |
textColor | string | Sets element's text color. One of the default colors. | |
bgColor | string | Sets element's background color. One of the default colors. | |
borderTheme | string | Sets element's borders color. One of the default colors. | |
rippleColor | string | Sets element ripple wave color (MD-theme only). One of the default colors. | |
themeDark | boolean | false | Enables dark layout theme on element. It should be some parent element as this will have visual effect on all supported children elements, e.g. view, page, navbar, toolbar, list, etc. |
For example:
<!-- Button color -->
<Button color="red">Red Button</Button>
<!-- Link color -->
<Link color="green">Green Link</Link>
<!-- Page color theme -->
<Page colorTheme="orange">
...
</Page>
<!-- Panel with dark theme -->
<Panel themeDark>
...
</Panel>
Supported Colors
Color | iOS | MD |
---|---|---|
red |
#ff3b30
|
#f44336
|
green |
#4cd964
|
#4caf50
|
blue |
#007aff
|
#2196f3
|
pink |
#e91e63
|
#e91e63
|
yellow |
#ffcc00
|
#ffeb3b
|
orange |
#ff9500
|
#ff9800
|
gray |
#8e8e93
|
#9e9e9e
|
white |
#fff
|
#fff
|
black |
#000
|
#000
|