Components
This guide explains how to use Framework7 and third-party components in Nectar and build user interfaces.
Components are the basic building blocks for creating beautiful and intuitive UI/UX.
Nectar provides over 80 reusable components which you can mix and match to create beautiful interfaces providing best experience to your users.
Each component provides native look and feel by following Google's Material Design, Apple's Cupertino Design, and Framework7's Aurora Design on Android, iOS and Desktop respectively.
Besides the components provided by Framework7, Nectar also uses few third-party components to extend the functionalities. Some of the Framework7 components are also extended and customized to provide more variants.
You can access the code for components in
/www/partials/components/ folder. The code is pretty much self-explanatory.You can use these components anywhere in your app. You just need to copy-paste the required code present in their HTML files and write some JS (if needed).
The CSS for all the components is present inside
/www/assets/vendor/nectar/nectar.cssThe
nectar.css file might change when some updates are released. Therefore, if you want to override or write your own CSS, then you must put it inside /www/assets/custom/css/custom.cssThese components are provided by Framework7. We have extended some of the Framework7 components to provide more variants.
Some useful components which are generally required in an app are not provided by Framework7. Therefore, some third-party Vanilla JS and jQuery plugins / libraries are used and their CSS is modified to match the Android, iOS and Aurora design.
Last modified 7d ago