Angular Design Patterns

This repository holds the source code examples for Brightlayer UI design patterns, written in Angular. The code is organized to make it easy to copy and paste the examples into your own projects.

Current Patterns

Pattern	Description	Interactive Demo
Account Menu In A Navigation Drawer	This involves placing an avatar in the drawer header along with basic information about the user (e.g., their name, username, email address, job title and / or organization affiliation)	Demo
Account Menu In App Bar	The user menu appears as an Avatar in the App Bar which opens a menu with the user-related content.	Demo
Action List	A list with actions available on individual list items	Demo
Action List With Inline Actions	A list with inline actions available on individual list	Demo
Action List In Button Panel	A list with global actions in its own button panel.	Demo
Action List In Panel Header	A list with global actions in the panel header.	Demo
Action List With Local Actions	A list with local actions available on individual list items.	Demo
Basic Bottom Sheet	At the top of the page, the app bar has a 3dot icon on right. When clicking on 3dot icon bottomsheet slides up from bottom of the page, revealing global actions that affect the whole page.	Demo
Collapsible App Bar	At the top of the page, the appbar is large, but as you scroll, it changes to a standard appbar.	Demo
Complex Bottom Sheet	At the top of the page, the app bar has a 3dot icon on right. When clicking on 3dot icon bottomsheet slides up from bottom of the page, revealing filters that affect the whole page.	Demo
Contextual Action Bar	Contextual action bar to provide contextual actions to selected items.	Demo
Contextual Spinners	If you need to wait for a server response to validate inputs in a form (after clicking the submit button), you should disable the submit button and replace its label with a spinner.	Demo
Data List	A basic list dynamically built from a JSON data object.	Demo
Dropdown Toolbar	Dropdown Toolbar transforms the simple text subtitle of the app bar into a dropdown menu that can be used to configure the page.	Demo
Dynamic Stepper	A dynamic stepper that allows the user to create an arbitrary number of steps for a procedure.	Demo
Fixed Length Passcode	Form validation starts after specific length of passcode	Demo
In a List	Input validations in a list	Demo
In a Table	Validate inputs inside table which works on larger screens and collapse the data into list at mobile size.	Demo
Internationalization	A simple shopping app that allows the user to switch between the different languages including the languages that are right to left.	Demo
List As A Tree Structure	A list that navigates a tree-like structure.	Demo
Multiselect List	A multiselect list with group actions.	Demo
Page-Wide Search	Page-wide search can be placed below the primary app bar when searching content on a single page or screen.	Demo
Password	Form Validation such as verifying phone number.	Demo
Phone Number Format	Validate phone number as per format.	Demo
Progress Bars	Use progress bar where progress is discrete / measurable	Demo
Progress Bars (Indeterminate)	Progress bar with indeterminate variation	Demo
Responsive Table	A responsive table that works on larger screens and collapse the data into list at mobile size.	Demo
Search Bar	At the top of the page, the app bar has a search icon on the right. After clicking on the search icon, the search bar slides in from the right of the app bar.	Demo
Sectioned Form	Validate form once you submit complete form.	Demo
Skeleton Loader	When your application is loading structured data, use skeletons that mimic the data that will eventually be loaded.	Demo
Sortable List	A sortable list with drag handles.	Demo
Spinner Overlay	Spinner overlays make use of a semi-transparent overlay with a large, centered spinner. It is useful when you want to block user interaction with the screen (or a section of the screen) while processing occurs.	Demo
Status List	A basic list with status stripes for list items.	Demo
Verify on Submit	This type of verification is common when the checks cannot be performed on the client, such as making an API call to verify a registration code, check user login credentials, or search for a device on the network.	Demo

Running Locally

To run this project (with all patterns) locally, first clone the repository:

git clone https://github.com/etn-ccis/blui-angular-design-patterns.git
cd blui-angular-design-patterns

Then you may run yarn && yarn start to start a local server.

Folder Structure

All our design patterns are located inside /src/app/pages.

└── /src/app
    |── /pages                              // individual design patterns
    └── /services                           // logics controlling the side navigation