This repo has been archived and moved here.
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.
| 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) | StackBlitz |
| 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. | StackBlitz |
| Action List | A list with actions available on individual list items | StackBlitz |
| Action List With Inline Actions | A list with inline actions available on individual list | StackBlitz |
| Action List In Button Panel | A list with global actions in its own button panel. | StackBlitz |
| Action List In Panel Header | A list with global actions in the panel header. | StackBlitz |
| Action List With Local Actions | A list with local actions available on individual list items. | StackBlitz |
| 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. | StackBlitz |
| Collapsible App Bar | At the top of the page, the appbar is large, but as you scroll, it changes to a standard appbar. | StackBlitz |
| 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. | StackBlitz |
| Contextual Action Bar | Contextual action bar to provide contextual actions to selected items. | StackBlitz |
| 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. | StackBlitz |
| Data List | A basic list dynamically built from a JSON data object. | StackBlitz |
| 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. | StackBlitz |
| Dynamic Stepper | A dynamic stepper that allows the user to create an arbitrary number of steps for a procedure. | StackBlitz |
| Fixed Length Passcode | Form validation starts after specific length of passcode | StackBlitz |
| In a List | Input validations in a list | StackBlitz |
| 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) | StackBlitz |
| In a Table | Validate inputs inside table which works on larger screens and collapse the data into list at mobile size. | StackBlitz |
| In an app bar | The user menu appears as an Avatar in the App Bar which opens a menu with the user-related content. | StackBlitz |
| Internationalization | A simple shopping app that allows the user to switch between the different languages including the languages that are right to left. | StackBlitz |
| List As A Tree Structure | A list that navigates a tree-like structure. | StackBlitz |
| Multiselect List | A multiselect list with group actions. | StackBlitz |
| Page-Wide Search | Page-wide search can be placed below the primary app bar when searching content on a single page or screen. | StackBlitz |
| Password | Form Validation such as verifying phone number. | StackBlitz |
| Phone Number Format | Validate phone number as per format. | StackBlitz |
| Progress Bars | Use progress bar where progress is discrete / measurable | StackBlitz |
| Progress Bars (Indeterminate) | Progress bar with indeterminate variation | StackBlitz |
| Responsive Table | A responsive table that works on larger screens and collapse the data into list at mobile size. | StackBlitz |
| 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. | StackBlitz |
| Sectioned Form | Validate form once you submit complete form. | StackBlitz |
| Skeleton Loader | When your application is loading structured data, use skeletons that mimic the data that will eventually be loaded. | StackBlitz |
| Sortable List | A sortable list with drag handles. | StackBlitz |
| 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. | StackBlitz |
| Status List | A basic list with status stripes for list items. | StackBlitz |
| 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. | StackBlitz |
To run this project (with all patterns) locally, first clone the repository:
git clone https://github.com/brightlayer-ui/angular-design-patterns.git
cd angular-design-patternsThen you may run yarn && yarn start to start a local server.
All our design patterns are located inside /src/app/pages.
└── /src/app
|── /pages // individual design patterns
└── /services // logics controlling the side navigation