Apache NiFi Flow Design System Demo v0.3.0
With the Apache NiFi Flow Design System module, we get an atomic, reusable component platform for Apache NiFi and its sub-projects to consume, while collaborating in an open source model. This module packages the Angular Material module as well as the Teradata Covalent module. These modules have been themed to match the FDS color palette.
FDS provides typography CSS classes you can use to create visual consistency across your application. Optionally style tags with the classes shown below:
.mat-display-4Display 4.mat-display-3Display 3.mat-display-2Display 2.mat-display-1Display 1.mat-headlineHeadline.md-titleTitle.md-subheadSubhead.linkLink.mat-body-1Body 1.mat-body-2Body 2.mat-captionCaptionUsage
HTML:
<span class="mat-display-4">Display 4</span>
<span class="mat-display-3">Display 3</span>
<span class="mat-display-2">Display 2</span>
<span class="mat-display-1">Display 1</span>
<span class="mat-headline">Headline</span>
<span class="md-title">Title</span>
<span class="md-subhead">Subhead</span>
<span class="link">Link</span>
<span class="mat-body-1">Body 1</span>
<span class="mat-body-2">Body 2</span>
<span class="mat-caption">Caption</span>
Tip: Use UPPERCASE text for 1-2 words, and Titlecase text for 3+ words.
Usage
HTML:
<!-- Themed Raised Buttons -->
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Secondary</button>
<button mat-raised-button color="warn">warn</button>
<button mat-raised-button color="fds-primary">FDS Primary</button>
<button mat-raised-button color="fds-secondary">FDS Secondary</button>
<button mat-raised-button color="fds-regular">FDS regular</button>
<button mat-raised-button color="fds-warn">FDS warn</button>
<button mat-raised-button color="fds-critical">FDS critical</button>
<!-- Disabled Raised Buttons -->
<button mat-raised-button disabled color="primary">Primary</button>
<button mat-raised-button disabled color="accent">Secondary</button>
<button mat-raised-button disabled color="warn">warn</button>
<button mat-raised-button disabled color="fds-primary">FDS primary</button>
<button mat-raised-button disabled color="fds-secondary">FDS Secondary</button>
<button mat-raised-button disabled color="fds-regular">FDS regular</button>
<button mat-raised-button disabled color="fds-warn">FDS warn</button>
<button mat-raised-button disabled color="fds-critical">FDS critical</button>
Usage
HTML:
<!-- Themed Flat Buttons -->
<button mat-button>Default</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Secondary</button>
<button mat-button color="warn">warn</button>
<!-- Disabled Flat Buttons -->
<button mat-button disabled>disabled Default</button>
<button mat-button disabled color="primary">disabled primary</button>
<button mat-button disabled color="accent">disabled Secondary</button>
<button mat-button disabled color="warn">disabled warn</button>
Usage
HTML:
<!-- Themed Fab Buttons -->
<button mat-mini-fab color="primary">P</button>
<button mat-mini-fab color="accent">A</button>
<button mat-mini-fab color="warn">W</button>
<!-- Disabled Fab Buttons -->
<button mat-mini-fab disabled color="primary">P</button>
<button mat-mini-fab disabled color="accent">A</button>
<button mat-mini-fab disabled color="warn">W</button>
Usage
HTML:
<mat-button-toggle-group name="alignment">
<mat-button-toggle value="left">
<mat-icon>format_align_left</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="center">
<mat-icon>format_align_center</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="right">
<mat-icon>format_align_right</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="justify">
<mat-icon>format_align_justify</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
<div fxLayout="row" class="pad-top-md pad-bot-md"></div>
<mat-button-toggle-group name="onOffToggle" class="on-off-toggle-group">
<mat-button-toggle value="on" [checked]="true">
ON
</mat-button-toggle>
<mat-button-toggle value="off" class="off-toggle">
OFF
</mat-button-toggle>
</mat-button-toggle-group>
<div fxLayout="row" class="pad-top-md pad-bot-md"></div>
<mat-button-toggle-group fxLayout="row" fxLayoutAlign="space-between center"
class="expansion-panel-filter-toggle-group" multiple>
<mat-button-toggle>
<div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
<div class="mat-display-1 pad-top-sm" fxFlex="55">34</div>
<div class="pad-top-sm" fxFlex="45">Assets</div>
</div>
</mat-button-toggle>
<mat-button-toggle>
<div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
<div class="mat-display-1 pad-top-sm" fxFlex="55">300</div>
<div class="pad-top-sm" fxFlex="45">Extensions</div>
</div>
</mat-button-toggle>
<mat-button-toggle>
<div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
<div class="mat-display-1 pad-top-sm" fxFlex="55">5000</div>
<div class="pad-top-sm" fxFlex="45">Flows</div>
</div>
</mat-button-toggle>
<mat-button-toggle>
<div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
<div class="mat-display-1 pad-top-sm" fxFlex="55">0</div>
<div class="pad-top-sm" fxFlex="45">Certifications</div>
</div>
</mat-button-toggle>
</mat-button-toggle-group>
<div fxLayout="row" class="pad-top-md pad-bot-md"></div>
<mat-button-toggle-group name="fds-administration-perspective" fxLayout="row" class="tab-toggle-group">
<mat-button-toggle value="general">
general
</mat-button-toggle>
<div fxLayout="row" class="pad-left-md"></div>
<mat-button-toggle value="users">
Users
</mat-button-toggle>
<div fxLayout="row" class="pad-left-md"></div>
<mat-button-toggle value="workflow">
Workflow
</mat-button-toggle>
</mat-button-toggle-group>
Usage
HTML:
<!-- Inputs -->
<form>
<div layout="row" layout-margin>
<mat-form-field floatLabel="always" floatPlaceholder="always" flex>
<input matInput placeholder="Company (disabled)" disabled value="Google">
</mat-form-field>
</div>
<div layout="row" layout-margin>
<mat-form-field floatLabel="always" floatPlaceholder="always" flex>
<input matInput disabled placeholder="First name">
</mat-form-field>
<mat-form-field floatLabel="always" flex>
<input matInput placeholder="Long Last Name That Will Be Truncated">
</mat-form-field>
</div>
<div layout="row" layout-margin>
<div flex fxLayoutAlign="start center">
<mat-form-field floatLabel="always" flex>
<input matInput placeholder="Button Addon with dropdown">
</mat-form-field>
<button class="input-button" color="fds-regular" mat-raised-button
[matMenuTriggerFor]="inputButtonDropdownAddonMenu">
Select<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<mat-menu xPosition="before" #inputButtonDropdownAddonMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item> Refresh </button>
<button mat-menu-item> Settings </button>
<button mat-menu-item> Help </button>
<button mat-menu-item disabled> Sign Out </button>
</mat-menu>
</div>
<div flex fxLayoutAlign="start center">
<mat-form-field floatLabel="always" floatPlaceholder="always" flex>
<input matInput placeholder="Button Addon">
</mat-form-field>
<button class="input-button" color="fds-regular" mat-raised-button>
Search
</button>
</div>
</div>
<div layout="row" layout-margin>
<div flex fxLayoutAlign="start center">
<mat-form-field floatLabel="always" floatPlaceholder="always" flex>
<input disabled matInput placeholder="Button Addon with dropdown">
</mat-form-field>
<button disabled class="input-button" color="fds-regular" mat-raised-button>
Select<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
</div>
<div flex fxLayoutAlign="start center">
<mat-form-field floatLabel="always" floatPlaceholder="always" flex>
<input disabled matInput placeholder="Button Addon">
</mat-form-field>
<button disabled class="input-button" color="fds-regular" mat-raised-button>
Search
</button>
</div>
</div>
<div layout="row" layout-margin>
<mat-form-field floatLabel="always" flex>
<textarea matInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
</mat-form-field>
</div>
<div layout="row" layout-margin>
<mat-form-field floatLabel="always" floatPlaceholder="always" flex>
<textarea disabled value="Address 2 Value" matInput placeholder="Address 2"></textarea>
</mat-form-field>
</div>
<div layout="row" layout-margin>
<mat-form-field floatLabel="always" floatPlaceholder="always" flex>
<input matInput placeholder="City">
</mat-form-field>
<mat-form-field floatLabel="always" floatPlaceholder="always" flex>
<input matInput placeholder="State">
</mat-form-field>
<mat-form-field floatLabel="always" floatPlaceholder="always" flex>
<input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
<mat-hint align="end">5 / 5</mat-hint>
</mat-form-field>
</div>
</form>
One
Two
First tab content
Plaid echo park knausgaard normcore franzen cronut. Pickled humblebrag tofu hoodie, umami salvia farm-to-table schlitz try-hard food truck knausgaard pabst. Yuccie portland jean shorts, authentic mixtape waistcoat gentrify blue bottle. Fixie kickstarter church-key small batch seitan, shabby chic vegan listicle before they sold out. Hammock raw denim flannel tousled seitan you probably haven't heard of them. Trust fund man bun pug, kickstarter artisan selvage letterpress cornhole tote bag butcher locavore. Affogato try-hard kickstarter seitan, DIY pickled hella godard pork belly four loko ugh.
Usage
HTML:
<mat-tab-group dynamicHeight color="accent">
<mat-tab>
<ng-template mat-tab-label>First tab content</ng-template>
<h1>First content</h1>
<p>...</p>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>Second tab content</ng-template>
<h1>Second tab content</h1>
<p>...</p>
</mat-tab>
</mat-tab-group>
1
Version 1
by Admin
Comments go here
An hour ago
2
Version 2
by Admin
Usage
HTML:
<td-steps mode="vertical">
<td-step label="Version 1"
sublabel="by Admin"
[active]="true">
<div fxLayout="column" fxLayoutAlign="space-between stretch">
<div fxLayout="row" class="md-body-2">
Description goes here
</div>
<div fxLayout="row" class="mat-caption">
An hour ago
</div>
</div>
</td-step>
<td-step label="Version 2"
sublabel="by Admin">
<div fxLayout="column" fxLayoutAlign="space-between stretch">
<div fxLayout="row" class="md-body-2">
Description goes here
</div>
<div fxLayout="row" class="mat-caption">
A day ago
</div>
</div>
</td-step>
</td-steps>
Usage
HTML:
<div class="pad-top-sm" layout="row">
<mat-form-field floatLabel="always" flex="50">
<input matInput placeholder="State" [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
#modelDir="ngModel" (ngModelChange)="this.tdStates = filterStates(currentState)"
[disabled]="tdDisabled">
</mat-form-field>
</div>
<div class="push-top">
<button mat-button (click)="modelDir.reset()" class="text-upper">Reset</button>
<button mat-button (click)="currentState='California'" class="text-upper">Set value</button>
<button mat-button (click)="tdDisabled=!tdDisabled" class="text-upper">Toggle disabled</button>
</div>
<mat-autocomplete #tdAuto="matAutocomplete">
<mat-option *ngFor="let state of tdStates" [value]="state.name">
<span>{ { state.name } }</span>
<span class="demo-secondary-text"> ({ {state.code} }) </span>
</mat-option>
</mat-autocomplete>
Javascript:
this.currentState = '';
this.reactiveStates = '';
this.tdStates = [];
this.tdDisabled = false;
this.states = [
{ code: 'AL', name: 'Alabama' },
{ code: 'AK', name: 'Alaska' },
{ code: 'AZ', name: 'Arizona' },
{ code: 'AR', name: 'Arkansas' },
{ code: 'CA', name: 'California' },
{ code: 'CO', name: 'Colorado' },
{ code: 'CT', name: 'Connecticut' },
{ code: 'DE', name: 'Delaware' },
{ code: 'FL', name: 'Florida' },
{ code: 'GA', name: 'Georgia' },
{ code: 'HI', name: 'Hawaii' },
{ code: 'ID', name: 'Idaho' },
{ code: 'IL', name: 'Illinois' },
{ code: 'IN', name: 'Indiana' },
{ code: 'IA', name: 'Iowa' },
{ code: 'KS', name: 'Kansas' },
{ code: 'KY', name: 'Kentucky' },
{ code: 'LA', name: 'Louisiana' },
{ code: 'ME', name: 'Maine' },
{ code: 'MD', name: 'Maryland' },
{ code: 'MA', name: 'Massachusetts' },
{ code: 'MI', name: 'Michigan' },
{ code: 'MN', name: 'Minnesota' },
{ code: 'MS', name: 'Mississippi' },
{ code: 'MO', name: 'Missouri' },
{ code: 'MT', name: 'Montana' },
{ code: 'NE', name: 'Nebraska' },
{ code: 'NV', name: 'Nevada' },
{ code: 'NH', name: 'New Hampshire' },
{ code: 'NJ', name: 'New Jersey' },
{ code: 'NM', name: 'New Mexico' },
{ code: 'NY', name: 'New York' },
{ code: 'NC', name: 'North Carolina' },
{ code: 'ND', name: 'North Dakota' },
{ code: 'OH', name: 'Ohio' },
{ code: 'OK', name: 'Oklahoma' },
{ code: 'OR', name: 'Oregon' },
{ code: 'PA', name: 'Pennsylvania' },
{ code: 'RI', name: 'Rhode Island' },
{ code: 'SC', name: 'South Carolina' },
{ code: 'SD', name: 'South Dakota' },
{ code: 'TN', name: 'Tennessee' },
{ code: 'TX', name: 'Texas' },
{ code: 'UT', name: 'Utah' },
{ code: 'VT', name: 'Vermont' },
{ code: 'VA', name: 'Virginia' },
{ code: 'WA', name: 'Washington' },
{ code: 'WV', name: 'West Virginia' },
{ code: 'WI', name: 'Wisconsin' },
{ code: 'WY', name: 'Wyoming' },
];
...
displayFn: function(value) {
return value && typeof value === 'object' ? value.name : value;
},
filterStates: function(val) {
return val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.states;
},
...
Autocomplete with chips and no custom inputs
Demo
Code
Type and select a preset option:
stepper
expansion-panel
markdown
highlight
loading
media
Autocomplete with custom inputs
Demo
Code
Type and select option or enter custom text and press enter:
Demo allowing custom inputs for tags
Demo
Code
Type any test and press enter:
Demo
Code
Decompressed Circular flowflow
Versions 2
Flows 0
Extensions 0
Assests 0
Date conversionasset
Versions 1
Flows 0
Extensions 0
Assests 0
nifi-email-bundleextension
Versions 1
Flows 0
Extensions 0
Assests 0
Example table with: Paging Bar / Filter / Sortable Columns / Multi-select with available Actions
Demo
Code
Table title
Comments
Dessert (100g serving)
Type
Calories
Fat (g)
Carbs (g)
Protein (g)
Sodium (mg)
Calcium (%)
Iron (%)
I love froyo!
Frozen yogurt
Ice cream
159
6.00
24
4.00
87
14
1
Ice cream sandwich
Ice cream
237
9.00
37
4.30
129
8
1
Eclair
Pastry
262
16.00
24
6.00
337
6
7
Cupcake
Pastry
305
3.70
67
4.30
413
3
8
Jelly bean
Candy
375
0.00
94
0.00
50
0
0
Basic Usage
Usage
HTML:
<!-- Basic Usage -->
<mat-checkbox [checked]="grocery.bought">
{ {grocery.name} }
</mat-checkbox>
Javascript:
this.groceries = [
{
bought: true,
name: 'Seitan',
},
{
bought: false,
name: 'Almond Meal Flour',
},
{
bought: false,
name: 'Organic Eggs',
}
];
Usage within Forms
Usage
HTML:
<!-- Usage within Forms -->
<form>
<div layout="row" layout-align="start center">
<mat-checkbox flex="initial" [(ngModel)]="user.agreesToTOS" name="agreesToTOS">
I agree to the terms
</mat-checkbox>
<button mat-raised-button color="fds-secondary" [disabled]="!user.agreesToTOS" class="pad-right-sm"
class="text-upper">Sign Up</button>
</div>
<mat-divider></mat-divider>
<div layout="row" layout-align="start center" class="pad-top-sm pad-bottom-sm">
<mat-checkbox labelPosition="after">
I come after my label.
</mat-checkbox>
</div>
<mat-divider></mat-divider>
<div layout="row" layout-align="start center" class="pad-top-sm pad-bottom-sm">
<mat-checkbox labelPosition="before">
I come before my label
</mat-checkbox>
</div>
<mat-divider></mat-divider>
</form>
Javascript:
this.user = {
agreesToTOS: false
};
Basic Radios
Usage
HTML:
<!-- Basic Radios -->
<mat-radio-group name="group1">
<mat-radio-button class="pad-right-sm" name="group1">Option 1 </mat-radio-button>
<mat-radio-button class="pad-right-sm" name="group1">Option 2 </mat-radio-button>
<mat-radio-button class="pad-right-sm" name="group1" disabled="true">Option 3 (disabled) </mat-radio-button>
</mat-radio-group>
Dynamic Radios
Your favorite season is: Autumn
Usage
HTML:
<!-- Dynamic Radios -->
<mat-radio-group name="more_options" [(ngModel)]="favoriteSeason">
<mat-radio-button class="fds-radio" *ngFor="let season of seasonOptions" name="more_options" [value]="season">
{ {season} }
</mat-radio-button>
</mat-radio-group>
<p>Your favorite season is: <strong>{ { favoriteSeason } }</strong></p>
Javascript:
this.favoriteSeason = 'Autumn';
this.seasonOptions = [
'Winter',
'Spring',
'Summer',
'Autumn',
];
Usage
HTML:
<button mat-raised-button color="fds-primary" matTooltip="I show above" matTooltipPosition="above"
class="text-upper">Bottom Tooltip</button>
<button mat-raised-button color="fds-primary" matTooltip="I show after" matTooltipPosition="after"
class="text-upper">Bottom Tooltip</button>
<button mat-raised-button color="fds-primary" matTooltip="I show below" matTooltipPosition="below"
class="text-upper">Bottom Tooltip</button>
<button mat-raised-button color="fds-primary" matTooltip="I show before" matTooltipPosition="before"
class="text-upper">Bottom Tooltip</button>
Standard Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
Usage
HTML:
<!-- Basic Card -->
<mat-card>
<button class="fds-panel-menu-button" matTooltip="Standard Card Menu" mat-icon-button
[matMenuTriggerFor]="standardCardMenu">
<i class="fa fa-ellipsis-v " aria-hidden="true"></i>
</button>
<mat-menu class="primary-icon-button-menu" #standardCardMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item>
<span>Option1</span>
</button>
<button mat-menu-item>
<span>Option2</span>
</button>
</mat-menu>
<mat-card-title class="pad-bottom-sm">
<span>Title</span>
</mat-card-title>
<mat-card-content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
</mat-card-content>
<mat-card-actions fxLayout="row" fxLayoutAlign="end center">
<button mat-raised-button color="fds-primary" class="text-upper">Action</button>
</mat-card-actions>
</mat-card>
Tabbed Card
One
Two
First tab content
Plaid echo park knausgaard normcore franzen cronut. Pickled humblebrag tofu hoodie, umami salvia farm-to-table schlitz try-hard food truck knausgaard pabst. Yuccie portland jean shorts, authentic mixtape waistcoat gentrify blue bottle. Fixie kickstarter church-key small batch seitan, shabby chic vegan listicle before they sold out. Hammock raw denim flannel tousled seitan you probably haven't heard of them. Trust fund man bun pug, kickstarter artisan selvage letterpress cornhole tote bag butcher locavore. Affogato try-hard kickstarter seitan, DIY pickled hella godard pork belly four loko ugh.
Usage
HTML:
<!-- Basic Card -->
<mat-card>
<button class="fds-panel-menu-button" matTooltip="Standard Card Menu" mat-icon-button
[matMenuTriggerFor]="standardCardMenu">
<i class="fa fa-ellipsis-v " aria-hidden="true"></i>
</button>
<mat-menu class="primary-icon-button-menu" #standardCardMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item>
<span>Option1</span>
</button>
<button mat-menu-item>
<span>Option2</span>
</button>
</mat-menu>
<mat-card-content>
<mat-tab-group dynamicHeight color="accent">
<mat-tab>
<ng-template mat-tab-label>One</ng-template>
<h3 class="md-title">First tab content</h3>
<p>Plaid echo park knausgaard normcore franzen cronut. Pickled humblebrag tofu hoodie, umami salvia farm-to-table schlitz try-hard food truck knausgaard pabst. Yuccie portland jean shorts, authentic mixtape waistcoat gentrify blue bottle. Fixie kickstarter church-key small batch seitan, shabby chic vegan listicle before they sold out. Hammock raw denim flannel tousled seitan you probably haven't heard of them. Trust fund man bun pug, kickstarter artisan selvage letterpress cornhole tote bag butcher locavore. Affogato try-hard kickstarter seitan, DIY pickled hella godard pork belly four loko ugh.</p>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>Two</ng-template>
<h3 class="md-title">Second tab content</h3>
<p>Hashtag distillery skateboard man bun gochujang, salvia man braid art party meggings heirloom kitsch farm-to-table. Franzen beard fingerstache gentrify, heirloom portland ennui XOXO microdosing kitsch plaid. Chicharrones bushwick chia, banh mi irony tattooed hammock butcher shabby chic taxidermy semiotics marfa post-ironic. Blue bottle keffiyeh farm-to-table ennui, chambray pitchfork art party pinterest artisan pop-up. Etsy banjo marfa, blue bottle kombucha crucifix XOXO tousled beard. Tilde disrupt kale chips bicycle rights skateboard master cleanse hella shoreditch, meditation retro shabby chic vice heirloom. Etsy listicle vice actually, iPhone chia hoodie four loko.</p>
</mat-tab>
</mat-tab-group>
</mat-card-content>
<mat-card-actions fxLayout="row" fxLayoutAlign="end center">
<button mat-raised-button color="fds-primary" class="text-upper">Action</button>
</mat-card-actions>
</mat-card>
Usage
HTML:
<form>
<div layout="row" layout-margin>
<mat-select color="accent" floatPlaceholder="never" placeholder="Favorite food"
[(ngModel)]="selectedValue" name="food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{ {food.viewValue} }
</mat-option>
</mat-select>
</div>
<div layout="row" layout-margin>
<div flex> Selected food value: { {selectedValue} } </div>
</div>
</form>
Javascript:
this.selectedValue = '';
this.foods = [
{ value: 'steak-0', viewValue: 'Steak' },
{ value: 'pizza-1', viewValue: 'Pizza' },
{ value: 'tacos-2', viewValue: 'Tacos' },
];
Usage
HTML:
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item> Refresh </button>
<button mat-menu-item> Settings </button>
<button mat-menu-item> Help </button>
<button mat-menu-item disabled> Sign Out </button>
</mat-menu>
<button color="fds-regular" mat-raised-button [matMenuTriggerFor]="aboveMenu">
Above<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<mat-menu yPosition="above" #aboveMenu="matMenu">
<button mat-menu-item> Refresh </button>
<button mat-menu-item> Settings </button>
<button mat-menu-item> Help </button>
<button mat-menu-item disabled> Sign Out </button>
</mat-menu>
<button color="fds-regular" mat-raised-button [matMenuTriggerFor]="iconsMenu">
Icons in Menu<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<mat-menu #iconsMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voicemail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</mat-menu>
<button color="fds-primary" [matMenuTriggerFor]="primaryButtonDropdownMenu" mat-raised-button>
FDS Primary<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<mat-menu class="fds-primary-dropdown-button-menu" #primaryButtonDropdownMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item>
<span>Option 1</span>
</button>
<button mat-menu-item disabled>
<span>Option 2</span>
</button>
</mat-menu>
<button color="fds-regular" mat-raised-button [matMenuTriggerFor]="posXMenu">
Before<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<mat-menu xPosition="before" #posXMenu="matMenu">
<button mat-menu-item> Refresh </button>
<button mat-menu-item> Settings </button>
<button mat-menu-item> Help </button>
<button mat-menu-item disabled> Sign Out </button>
</mat-menu>
Usage
HTML:
<button mat-raised-button color="fds-primary" (click)="openDialog()">Show simple dialog</button>
Javascript:
var ngCore = require('@angular/core');
function DialogComponent() {};
DialogComponent.prototype = {
constructor: DialogComponent
};
DialogComponent.annotations = [
new ngCore.Component({
template: 'Hello Dialog'
})];
...
constructor(MatDialog) {
this.dialog = MatDialog;
}
...
openDialog: function() {
this.dialog.open(DialogComponent, {
height: '50%', // can be px or %
width: '60%', // can be px or %
}
);
}
...
Usage
HTML:
<button mat-button color="primary" (click)="openConfirm()" class="text-upper">Open Confirm</button>
Javascript:
...
constructor(TdDialogService) {
this.dialogService = TdDialogService
}
...
openConfirm: function() {
this.dialogService.openConfirm({
title: 'Confirm',
message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?',
cancelButton: 'Disagree',
acceptButton: 'Agree',
});
},
...
Usage
HTML:
<button mat-raised-button color="fds-primary" (click)="showSuccessSnackBar()">Success Snack Bar</button>
<button mat-raised-button color="fds-primary" (click)="showWarnSnackBar()">Warning Snack Bar</button>
<button mat-raised-button color="fds-primary" (click)="showErrorSnackBar()">Error Snack Bar</button>
<button mat-raised-button color="fds-primary" (click)="showRegularSnackBar()">Regular Snack Bar</button>
Javascript:
...
constructor(FdsSnackBarService) {
this.snackBarService = FdsSnackBarService;
},
...
/** Possible values for horizontalPosition on MatSnackBarConfig are 'start' | 'center' | 'end' | 'left' | 'right'. */
/** Possible values for verticalPosition on MatSnackBarConfig are 'top' | 'bottom'. */
/** Possible values for icon on MatSnackBarConfig are any available icons loaded on the page. */
showSuccessSnackBar: function () {
var snackBarRef = this.snackBarService.openCoaster({
title: 'Success',
message: 'Some help text regarding the successful event.',
verticalPosition: 'top',
horizontalPosition: 'right',
icon: 'fa fa-check-circle-o',
color: '#1EB475',
duration: 3000
});
},
showWarnSnackBar: function () {
var snackBarRef = this.snackBarService.openCoaster({
title: 'Warning',
message: 'Some help text regarding the warning.',
verticalPosition: 'top',
horizontalPosition: 'left',
icon: 'fa fa-exclamation-triangle',
color: '#E98A40',
duration: 3000
});
},
showErrorSnackBar: function () {
var snackBarRef = this.snackBarService.openCoaster({
title: 'Error',
message: 'Some help text regarding the critical error. This coaster will stay open until closed with the `x` or if another coaster is created.',
verticalPosition: 'bottom',
horizontalPosition: 'right',
icon: 'fa fa-times-circle-o',
color: '#EF6162'
});
},
showRegularSnackBar: function () {
var snackBarRef = this.snackBarService.openCoaster({
title: 'Regular',
message: 'Something interesting.',
verticalPosition: 'bottom',
horizontalPosition: 'left',
color: '#808793',
duration: 3000
});
},
...
Expand/Collapse Event for Expansion 1: No expanded/collapsed detected yet
Google
1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA
Headquarters
1600 Amphitheatre Pkwy
Mountain View, CA 94043, USA
Usage
HTML:
<td-expansion-panel label="Google" sublabel="1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA"
[expand]="expansion1" [disabled]="disabled" (expanded)="expandExpansion1Event()"
(collapsed)="collapseExpansion1Event()">
<td-expansion-summary>
<mat-list>
<mat-list-item>
<mat-icon mat-list-avatar>pin_drop</mat-icon>
<h3 mat-line>Google</h3>
<h4 mat-line>Headquarters</h4>
<p mat-line>
1600 Amphitheatre Pkwy
<br/>Mountain View, CA 94043, USA
</p>
</mat-list-item>
</mat-list>
</td-expansion-summary>
<div class="mat-padding">
<form class="mat-padding" layout="column">
<mat-form-field floatLabel="always" flex>
<input matInput placeholder="Company (disabled)" disabled value="Google"/>
</mat-form-field>
<mat-form-field floatLabel="always" flex>
<textarea matInput placeholder="Description" rows="4"></textarea>
</mat-form-field>
</form>
<mat-divider></mat-divider>
<div layout="row" layout-margin layout-align="end center">
<button mat-button class="text-upper">Cancel</button>
<button mat-button color="accent" class="text-upper">Save</button>
</div>
</div>
</td-expansion-panel>
Javascript:
this.expandCollapseExpansion1Msg = 'No expanded/collapsed detected yet';
this.expansion1 = false;
this.disabled = false;
...
toggleExpansion1: function() {
if (!this.disabled) {
this.expansion1 = !this.expansion1;
}
},
toggleDisabled: function() {
this.disabled = !this.disabled;
},
expandExpansion1Event: function() {
this.expandCollapseExpansion1Msg = 'Expand event emitted.';
},
collapseExpansion1Event: function() {
this.expandCollapseExpansion1Msg = 'Collapse event emitted.';
},
...
Progress Bars
Determinate
Indeterminate
Buffer
Query
Colors
Usage
HTML:
<!-- Determinate-->
<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
<!-- Indeterminate-->
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
<!-- Buffer-->
<mat-progress-bar mode="buffer" value="15" bufferValue="15"></mat-progress-bar>
<!-- Query-->
<mat-progress-bar mode="query"></mat-progress-bar>
<!-- Colors-->
<mat-progress-bar mode="indeterminate" color="primary"></mat-progress-bar>
<mat-progress-bar mode="indeterminate" color="accent"></mat-progress-bar>
<mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
Progress Spinner
Determinate
indeterminate
Spinner
Colors
Usage
HTML:
<!-- Determinate -->
<mat-progress-spinner mode="determinate" value="66"></mat-progress-spinner>
<!-- Indeterminate -->
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
<!-- Spinner -->
<mat-spinner></mat-spinner>
<!-- Colors -->
<mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner>
<mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner>
<mat-progress-spinner mode="indeterminate" color="warn"></mat-progress-spinner>
The side nav can be opened at the `start` or `end` of a container and can be displayed in `over`, `side`, or `push` mode. You can also define its width.
Usage
HTML:
<!-- Basic Usage -->
<mat-sidenav #sidenav mode="over" position="end" opened="false">
...
</mat-sidenav>
Basic Usage
Usage
HTML:
<!-- Basic Usage -->
<mat-list>
<mat-list-item *ngFor="let system of systems">
<mat-slide-toggle [color]="system.color" [(ngModel)]="system.on">
{ {system.name} }
</mat-slide-toggle>
</mat-list-item>
</mat-list>
Javascript:
this.systems = [{
name: 'Lights',
on: false,
color: 'primary',
}, {
name: 'Surround Sound',
on: true,
color: 'accent',
}, {
name: 'T.V.',
on: true,
color: 'warn',
}, ];
Usage within Forms
Usage
HTML:
<!-- Usage within Forms -->
<form>
<mat-list>
<mat-list-item>
<mat-slide-toggle color="accent" [(ngModel)]="house.lockHouse" name="lockHouse">
Lock?
</mat-slide-toggle>
<mat-icon *ngIf="house.lockHouse" class="pad-right-sm">lock</mat-icon>
</mat-list-item>
<mat-list-item>
<mat-slide-toggle disabled>
I am disabled.
</mat-slide-toggle>
</mat-list-item>
</mat-list>
</form>
Javascript:
this.house = {
lockHouse: false,
};
Horizontal Slider
Usage
HTML:
<mat-slider min="1" max="5" thumbLabel tickInterval="1" value="2" color="primary"></mat-slider>
<mat-slider step="5" thumbLabel tickInterval="5" value="20" color="accent"></mat-slider>
<mat-slider thumbLabel tick-interval="auto" value="2" color="warn"></mat-slider>
Vertical Slider
Usage
HTML:
<mat-slider vertical min="1" max="100" thumbLabel tickInterval="10" value="2"></mat-slider>
Inverted Slider
Usage
HTML:
<mat-slider invert min="1" max="100" thumbLabel tickInterval="10" value="2"></mat-slider>