Angular Design Patterns
This repository holds the source code examples for PX Blue 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 |
|---|---|---|
| Action List | A list with 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 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 |
| 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 Table | Validate inputs inside table which works on larger screens and collapse the data into list at mobile size. | 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 |
| Multiselect List | A multiselect list with group actions. | 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 |
Running Locally
To run this project (with all patterns) locally, first clone the repository:
git clone https://github.com/pxblue/angular-design-patterns.git
cd angular-design-patternsThen 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