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
  • Demo
  1. UI & UX

Screens

PreviousVirtual ListNextSplash Screen

Last updated 2 years ago

Overview

Nectar provides over 50 carefully crafted, commonly needed, ready-to-use, functional screens for building beautiful and intuitive user interfaces.

Each screen is designed using Google's Material Design System for Android, Apple's Cupertino Design System for iOS, and Framework7's Aurora Design System for Desktops.

Each screen is designed upon a Grid System for responsiveness, and therefore looks perfect on mobiles, tablets and desktops.

These screens are built using various Components, with some JavaScript code and HTML5 Web APIs for business logic and functionalities.

The data in these screens is populated using fake data generation library and some JSON files with dummy data located in /assets/custom/dataset/ folder.

You can take this as a reference and populate the screens with your own data coming from an REST API.

You can access the code for screens in /partials/screens/ folder. The code is pretty much self-explanatory and therefore can be modified easily as per your needs.

These screens strictly follows the Framework7's Router Component structure. Therefore it is highly advised to learn about them at

Demo

Faker.js
https://framework7.io/docs/router-component
https://nectar.website/demo/screens/