SponsorsBecome a sponsor
- Get Started
- Events
- Router / Navigation
- Store
- Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Area Chart
- Autocomplete
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Color Picker
- Contacts List
- Data Table
- Dialog
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Treeview
- View / Router
- Virtual List
- Framework7 Icons
- Styling
- Dom7
- Touch Utilities
- Utilities
- Plugins API
- Lazy Modules
- Custom Build
Safe Areas
With the iPhone X release and further, Apple introduced so called safe areas, later implemented by Google Chrome with support in Android.
On devices with safe areas (like with top screen notch), app UI must include additional top/bottom spacing (to consider top notch and new bottom bar) in portrait orientation and additional left/right spacing (to consider left/right notch) in landscape orientation.
In portrait orientation Framework7 will do required styles modifications automatically, but in landscape orientation some additional classes must be added to elements:
safe-areas- add to element that is stick to both left and right screen edges in landscape orientationsafe-area-left- add to element that is stick to the left screen edge in landscape orientationsafe-area-right- add to element that is stick to the right screen edge in landscape orientationno-safe-areas- add to element which is is inside ofsafe-areasto remove additional horizontal spacingno-safe-area-left- add to element which is is inside ofsafe-areasto remove additional left spacingno-safe-area-right- add to element which is is inside ofsafe-areasto remove additional right spacing
The following elements don't require such classes:
- Popup, Sheet - already considered as full screen elements that is required extra spacing on both left and right sides
- Left Panel - already considered as element that is stick to the left screen edge and requires extra spacing on left side
- Right Panel - already considered as element that is stick to the right screen edge and requires extra spacing on right side
Here is the example app layout with such classes:
<body>
<!-- app root -->
<div id="app">
<!-- left panel doesn't require any additional classes -->
<div class="panel panel-left panel-cover">
...
</div>
<!-- right panel doesn't require any additional classes -->
<div class="panel panel-right panel-reveal">
...
</div>
<!-- main view, full-wide element, add "safe-areas" class -->
<div class="view view-main view-init safe-areas" data-url="/">
<div class="page">
<div class="navbar">
...
</div>
<div class="page-content">
<!-- full-wide list, will inherit safe-areas from view -->
<div class="list">
...
</div>
<!-- full-wide content block, will inherit safe-areas from view -->
<div class="block">
...
</div>
<!--
two-columns blocks: need to
- remove extra spacing on right side for left block
- remove extra spacing on left side for right block
-->
<div class="row">
<!-- remove right spacing on left block -->
<div class="block col no-safe-area-right">
...
</div>
<!-- remove left spacing on right block -->
<div class="block col no-safe-area-left">
...
</div>
</div>
...
</div>
</div>
</div>
</div>
...
</body>