Framework7 Tutorial
Framework7 Components
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
Framework7 Components
- Framework7 - Lazy Load
- Framework7 - Notifications
- Framework7 - Message Bar
- Framework7 - Messages
- Framework7 - Infinite Scroll
- Framework7 - Refresh
- Framework7 - Calendar
- Framework7 - Picker
- Framework7 - Autocomplete
- Framework7 - Photo Browser
- Framework7 - Swiper Slider
- Framework7 - Tabs
- Framework7 - Forms
- Framework7 - Action Button
- Framework7 - Buttons
- Framework7 - Chips
- Framework7 - Cards
- Framework7 - Accordion
- Framework7 - List Views
- Framework7 - Progress Bar
- Framework7 - Preloaders
- Framework7 - Overlays
- Framework7 - Layout Grid
- Framework7 - Content Block
- Framework7 - Side Panels
- Framework7 - Status Bar
- Framework7 - Search Bar
- Framework7 - Toolbars
- Framework7 - Navbars
- Framework7 - Layouts
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Framework7 - Hairlines
Framework7 - Hairpnes
Description
Hairpne is a class that adds 1px border around the images by using the border class. With the release of 1.x, hairpnes revised the working with :after and :before pseudo elements instead of using CSS borders.
Hairpnes contains the following rules −
:after − This pseudo element is used for bottom and right hairpnes.
:before − This pseudo element is used for top and left hairpnes.
The following code snippet shows the use of :after element.
.navbar:after { background-color: red; }
The following code snippet removes the bottom hairpne toolbar −
.navbar:after { display:none; } .toolbar:before { display:none; }
"no-border" class
The hairpne will be removed by using no-border class and it is supported on Navbar, toolbar, card and its elements.
The following code is used to remove hairpne from navbar −
<span class = "navbar no-border"> ... </span>Advertisements