Nectar Documentation
DemoBuy Now
  • Introduction
  • Getting Started
    • Requirements
    • Installation
    • Directory Structure
    • Dependencies & Plugins
  • Basics
    • Configuration
    • Routes
    • Layout
    • Navigation
    • Initialization
    • Theming
    • Internationalization
    • Store Management
  • UI & UX
    • Components
      • Accordion
      • Action Sheet
      • Audio
      • Autocomplete
      • Badge
      • Breadcrumb
      • Button
      • Card
      • Chart
      • Checkbox
      • Chip
      • Color Picker
      • Content Block
      • Data Table
      • Date-Time Picker
      • Dialog
      • Dropcap
      • Elevation
      • Embed
      • Empty State
      • Expandable Card
      • Flip Card
      • Floating Action Button
      • Form Input
      • Form Validator
      • Gauge
      • Grid
      • Icon
      • Image
      • Image Compare
      • Image Hotspot
      • Infinite Scroll
      • Keypad
      • Line Divider
      • List Index
      • List View
      • Marquee
      • Menu
      • Menu List
      • Navbar
      • Note
      • Notification
      • Pagination
      • Photo Browser
      • Picker
      • Popover
      • Popup
      • Preloader
      • Progress Bar
      • Pull-to-Refresh
      • Quote
      • Radio
      • Range Slider
      • Rating
      • Ribbon
      • Searchbar
      • Sheet Modal
      • Show More/Less
      • Side Panel
      • Signature Pad
      • Skeleton
      • Smart Select
      • Sortable List
      • Stepper
      • Subnavbar
      • Swipeout
      • Swiper Slider
      • Syntax Highlighter
      • Tab
      • Text Editor
      • Timeline
      • Timer
      • Toast
      • Toggle
      • Toolbar
      • Tooltip
      • Tour Guide
      • Tree View
      • Video
      • Virtual List
    • Screens
      • Splash Screen
  • Advanced
    • Web APIs
      • App Badging API
      • App Shortcuts API
      • Battery Status API
      • Clipboard API
      • Contact Picker API
      • Device Memory API
      • Device Orientation API
      • File API
      • Fullscreen API
      • Geolocation API
      • Get Installed Related Apps API
      • HTML Media Capture API
      • Local Storage API
      • Network Information API
      • Notifications API
      • Online & Offline Status API
      • Page Visibility API
      • Permissions API
      • Picture-In-Picture API
      • Quota Estimation API
      • Screen Orientation API
      • Screen Wake Lock API
      • Server-Sent Events API
      • Session Storage API
      • Vibration API
      • Web Share API
    • Cordova Plugins
      • Battery Status
      • Build Info
      • Camera
      • Contacts Info
      • Device
      • Dialogs
      • Fingerprint Authentication
      • Geolocation
      • In-App Browser
      • Media Capture
      • Network Information
      • Social Sharing
      • Splash Screen
      • SQLite
      • Status Bar
      • Vibration
    • Integrations
      • AlaSQL
      • Disqus
      • Embedly
      • Facebook Comments
      • Google AdMob
      • Google Maps
      • Google Sheets
      • Gravatar
      • Lottie
      • Mailchimp
      • QR Code
      • RSS
      • Telegram Comments
      • WordPress
      • YouTube
  • Publishing
    • Progressive Web App
    • Cordova App
  • Help
    • Changelog
    • Support
    • Customization
  • Tutorials
    • How to Create and Animate an SVG Image Using JavaScript
Powered by GitBook
On this page
  • Overview
  • Framework7 Components
  • Third-Party Components
  • Custom Components
  • Demo
  1. UI & UX

Components

Overview

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 /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 /assets/vendor/nectar/nectar.css

The 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 /assets/custom/css/custom.css

Framework7 Components

These components are provided by Framework7. We have extended some of the Framework7 components to provide more variants.

Third-Party Components

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.

Custom Components

Besides the Framework7 and Third-Party components, we have also designed few CSS based custom components.

Additionally, we have also provided some basic styling to few native HTML5 elements such as Audio and Video.

Demo

PreviousStore ManagementNextAccordion

Last updated 2 years ago

https://nectar.website/demo/components/