We have moved to separately published packages from a monorepo.
This will:
Please update any bookmarks to point to the new repo: https://github.com/GetTerminus/terminus-oss
Tips on migrating to the new packages can be found here: Migration guide.
New API docs location: https://github.com/GetTerminus/terminus-ui
The library of UI components used for Terminus applications.
Table of Contents
This library was created to assist Terminus engineers in maintaining a consistent experience across applications while following a unified design language.
The library is open source with the hopes that others may find solutions and ideas here, as we have done while browsing so many other repositories. While we want to make decisions that are best for everyone, in the end, the needs of the Terminus engineering team must come first.
If a deviation makes sense for the feature itself, but not for Terminus, we support (and will assist in) abstracting the functionality out for generalization.
This library is heavily based on Material Design currently. This provides us a way to rely on very well thought out usability and accessibility decisions for areas we have not yet addressed internally. While we hold Material in high regard, we do not believe that all of their decisions are best for the Terminus UI specifically.
The available features table contains links for functional and usage documentation for each feature.
- :hammer: started
- :white_check_mark: available
- :hankey: deprecated
Feature | Notes | Status | Demo | Docs | Usage |
---|---|---|---|---|---|
autocomplete | Deprecated. See selection-list |
:hankey: | Demo | Docs | Usage |
autofocus | Focus a focusable element on load | :white_check_mark: | Demo | Docs | Usage |
badge | See chip |
:white_check_mark: | Demo | ||
button | :white_check_mark: | Demo | Docs | ||
card | Presentational card | :white_check_mark: | Demo | Docs | Usage |
chart | Charts, graphs etc | :white_check_mark: | Demo | Docs | Usage |
chip | Chip | :white_check_mark: | Demo | Docs | Usage |
checkbox | :white_check_mark: | Demo | Docs | Usage | |
cohort-date-range | CohortDateRange | :white_check_mark: | Demo | Docs | Usage |
confirmation | Add a confirmation step to any ts-button |
:white_check_mark: | Demo | Docs | Usage |
copy | Component to easily copy string values | :white_check_mark: | Demo | Docs | Usage |
csv entry | Manually enter CSV values | :white_check_mark: | Demo | Docs | Usage |
datepicker | See TsInputComponent |
:white_check_mark: | Demo | Docs | Usage |
date-range | Dual inputs with calendar pop-ups | :white_check_mark: | Demo | Docs | Usage |
drawer | Slide-out drawer panel | :white_check_mark: | Demo | Docs | Usage |
expansion-panel | Expansion panel with accordion & stepper functionality | :white_check_mark: | Demo | Docs | Usage |
file-upload | File upload with drag and drop | :white_check_mark: | Demo | Docs | Usage |
icon | Supported icons: https://material.io/icons | :white_check_mark: | Demo | Docs | Usage |
icon-button | Icon only button | :white_check_mark: | Demo | Docs | Usage |
input | Input with masking, datepicker, etc | :white_check_mark: | Demo | Docs | Usage |
link | :white_check_mark: | Demo | Docs | Usage | |
loading overlay | Overlay with loading spinner | :white_check_mark: | Demo | Docs | |
login form | Email/password with 'remember me' checkbox | :white_check_mark: | Demo | Docs | Usage |
logo | Variations of the official logo, certain colors available | :white_check_mark: | Demo | Docs | Usage |
menu | :white_check_mark: | Demo | Docs | Usage | |
navigation | Global navigation menu | :white_check_mark: | Demo | Docs | Usage |
paginator | Paging controls for collections | :white_check_mark: | Demo | Docs | Usage |
pipes | A collection of pipes for Angular | :white_check_mark: | Demo | Docs | |
popover | Popover with templates | :white_check_mark: | Demo | Docs | Usage |
radio-group | :white_check_mark: | Demo | Docs | Usage | |
scrollbars | Custom scrollbars for both axis' | :white_check_mark: | Demo | Docs | Usage |
search | Input with search capabilities | :white_check_mark: | Demo | Docs | |
select | Deprecated. See selection-list |
:hankey: | Demo | Docs | Usage |
selection-list | Classic select dropdown / autocomplete | :white_check_mark: | Demo | Docs | Usage |
spacing | Helpers for consistent spacing | :white_check_mark: | Demo | Docs | |
sort | Used by table for column sorting |
:white_check_mark: | (see table demo) | Docs | Usage |
table | :white_check_mark: | Demo | Docs | Usage | |
tabs | Horizontal tab interface | :white_check_mark: | Demo | Docs | Usage |
textarea | See input |
:white_check_mark: | (see input demo) | ||
toggle | Toggle switch | :white_check_mark: | Demo | Docs | Usage |
tooltip | Simple tooltip | :white_check_mark: | Demo | Docs |
:books: Pipes Documentation
:circus_tent: Pipes Demo
Pipe | Notes | Status |
---|---|---|
tsAbbreviateNumber |
Abbreviate a number | :white_check_mark: |
tsDate |
short , medium , extended , timestamp |
:white_check_mark: |
tsRoundNumber |
Round a number to a specific precision | :white_check_mark: |
tsSentenceCase |
Convert string casing to sentence-case | :white_check_mark: |
tsTimeAgo |
Human-readable time span | :white_check_mark: |
tsTitleCase |
Title Case A String | :white_check_mark: |
tsTruncateAt |
Truncate a string, start , middle , end |
:white_check_mark: |
Feature | Notes | Status | Demo | Docs | Usage |
---|---|---|---|---|---|
Validators | Expose custom validation methods for reactive forms | :white_check_mark: | Demo | Docs | Usage |
Name | Purpose | Status |
---|---|---|
creditCard |
A credit card number must be valid | :white_check_mark: |
domain |
A domain must be valid | :white_check_mark: |
email |
An email address must be valid | :white_check_mark: |
equalToControl |
A control's value must be equal to another control's value | :white_check_mark: |
greaterThan |
A number must be greater than another value | :white_check_mark: |
inCollection |
A value must be found in a collection | :white_check_mark: |
isInRange |
A number must be between two numbers | :white_check_mark: |
lessThan |
A number must be less than another value | :white_check_mark: |
lowercase |
A value must contain a minimum amount of lowercase characters | :white_check_mark: |
maxDate |
A date must be before a maximum date | :white_check_mark: |
minDate |
A date must be after a minimum date | :white_check_mark: |
numbers |
A value must contain a minimum amount of numbers | :white_check_mark: |
password |
A password must meet certain requirements | :white_check_mark: |
uppercase |
A value must contain a minimum amount of uppercase characters | :white_check_mark: |
url |
A URL must be valid | :white_check_mark: |
Feature | Notes | Status | Demo | Docs | Usage |
---|---|---|---|---|---|
TS_SPACING |
Expose our spacing sizes in TypeScript | :white_check_mark: | Demo |
Feature | Notes | Status | Docs |
---|---|---|---|
a11y | Accessibility helpers | :white_check_mark: | |
animation | :hammer: | ||
breakpoints | Media query breakpoints | :white_check_mark: | Docs |
colors | Base colors | :white_check_mark: | Docs |
cursors | :white_check_mark: | Docs | |
input-placeholder | :white_check_mark: | ||
layout | :white_check_mark: | Docs | |
opposite-direction | Reverse a direction | :white_check_mark: | |
shadows | Shadow functions & mixins | :white_check_mark: | Docs |
spacing | Control vertical/horizontal spacing | :white_check_mark: | Docs |
triangle | Create a triangle using CSS | :white_check_mark: | |
typography | Typography styles | :white_check_mark: | Docs |
z-index | z-index helper | :white_check_mark: | Docs |
Install the library and required dependencies:
# Primary dependencies:
$ yarn add @terminus/ui @terminus/ngx-tools
# Peer dependencies that will need to be installed (needed by UI and tools libraries):
$ yarn add @angular/cdk @angular/material @angular/flex-layout@9.0.0-beta.29 date-fns ngx-perfect-scrollbar \
@ngrx/effects @ngrx/store popper.js text-mask-core text-mask-addons
# Optional dependencies (needed if using `TsChartComponent`):
$ yarn add @amcharts/amcharts4 @amcharts/amcharts4-geodata
NOTE:
@angular/*
&@ngrx/*
require9.0.0
or greater.
Add the following links to install the body fonts and icon fonts used by the library:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
To use the global styles, import the CSS file into your stylesheets:
@import '~@terminus/ui/terminus-ui.css';
To use the provided SCSS helper methods/variables/mixins, import the helpers file from @terminus/ui
:
@import '~@terminus/ui/helpers';
View the contribution documentation and the development documentation.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!