You can also open a dialog from a side nav.
With the Apache NiFi Flow Design System module, we get an atomic, reusable component platform for Apache NiFi and Apache NiFi Registry 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.
Import the FDS Core NgModule into your AppModule
HTML:
The core FDS styles also need to be included in your `index.html` like:
HTML:
]]>
Or, if you are using the Angular CLI you will need to add a new entry to the "styles" list in .angular-cli.json.
JSON:
Angular Material provides typography CSS classes you can use to create visual consistency across your application.
Note: Base font size is 10px for easy rem units (1.2rem = 12px). Body font size is 14px. sp = scalable pixels.
To preserve semantic structures, you can optionally style the <h1>
- <h6>
heading tags with the styling classes shown below:
CSS:
.mat-display-4
Light 112px
.mat-display-3
Regular 56px
.mat-display-2
Regular 45px
.mat-display-1
Regular 34px
.mat-headline
Regular 24px
.mat-title
Medium 20px
.md-subhead
Regular 16px
HTML:
Roboto is the standard typeface on Android.
Roboto and Noto are the standard typefaces on Android and Chrome.
Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.
Roboto is the standard typeface on Android.
Roboto and Noto are the standard typefaces on Android and Chrome.
Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.
]]>
CSS:
.mat-body-1
Regular 14px
.mat-body-2
Medium 14px
.mat-button
.mat-caption
Regular 12px
HTML:
Roboto is the standard typeface on Android.
Roboto and Noto are the standard typefaces on Android and Chrome.
Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.
]]>
Tip: Use UPPERCASE text for 1-2 words, and Titlecase text for 3+ words.
HTML:
]]>
HTML:
Angular Material
]]>
HTML:
]]>
HTML:
]]>
HTML:
format_align_left
format_align_center
format_align_right
format_align_justify
ON
OFF
34
Assets
300
Extensions
5000
Flows
0
Certifications
general
Users
Workflow
]]>
HTML:
]]>
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.
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.
HTML:
First tab content
First content
...
Second tab content
Second tab content
...
]]>
HTML:
Javascript:
s.name.match(new RegExp(val, 'gi'))) : this.states;
},
...
]]>
HTML:
]]>
Javascript:
HTML:
]]>
Javascript:
HTML:
]]>
Blah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah bla
HTML:
{ {getDropletTypeCount('asset')} }
Assets
{ {getDropletTypeCount('extension')} }
Extensions
{ {getDropletTypeCount('flow')} }
Flows
{ {getDropletCertificationCount('compliant')} }
Compliant
{ {getDropletCertificationCount('fleet')} }
Fleet
{ {getDropletCertificationCount('prod')} }
Production Ready
{ {getDropletCertificationCount('secure')} }
Secure
Sort by:
{ {droplet.displayName} }
{ {droplet.type} }
Versions { {droplet.versions.length} }
Flows { {droplet.flows.length} }
Extensions { {droplet.extensions.length} }
Assests { {droplet.assets.length} }
Description
Blah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah bla
Change Log
]]>
Javascript:
-1);
},
getDropletTypeCount: function(type) {
return this.filteredDroplets.filter(function(droplet) {
return droplet.type === type;
}).length;
},
getDropletCertificationCount: function(certification) {
return this.filteredDroplets.filter(droplet => {
return Object.keys(droplet).find((key) => {
if (key === certification && droplet[certification].type === 'certification') {
return droplet;
}
});
}).length;
},
getSortBy: function() {
var sortByColumnLabel;
var arrayLength = this.dropletColumns.length;
for (var i = 0; i < arrayLength; i++) {
if (this.dropletColumns[i].active === true) {
sortByColumnLabel = this.dropletColumns[i].label;
break;
}
}
return sortByColumnLabel;
},
sortDroplets: function(column) {
if (column.sortable === true) {
// toggle column sort order
var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
this.filterDroplets(column.name, sortOrder);
//only one column can be actively sorted so we reset all to inactive
this.dropletColumns.forEach(function (c) {
c.active = false;
});
//and set this column as the actively sorted column
column.active = true;
this.activeDropletColumn = column;
}
},
toggleDropletsFilter: function(searchTerm) {
var applySearchTerm = true;
// check if the search term is already applied and remove it if true
if (this.dropletsSearchTerms.length > 0) {
var arrayLength = this.dropletsSearchTerms.length;
for (var i = 0; i < arrayLength; i++) {
var index = this.dropletsSearchTerms.indexOf(searchTerm);
if (index > -1) {
this.dropletsSearchTerms.splice(index, 1);
applySearchTerm = false;
}
}
}
// if we just removed the search term do NOT apply it again
if (applySearchTerm) {
this.dropletsSearchTerms.push(searchTerm);
}
this.filterDroplets(this.activeDropletColumn.name, this.activeDropletColumn.sortOrder);
},
filterDroplets: function(sortBy, sortOrder) {
// if `sortBy` is `undefined` then find the first sortable column in this.dropletColumns
if (sortBy === undefined) {
var arrayLength = this.dropletColumns.length;
for (var i = 0; i < arrayLength; i++) {
if (this.dropletColumns[i].sortable === true) {
sortBy = this.dropletColumns[i].name;
this.activeDropletColumn = this.dropletColumns[i];
//only one column can be actively sorted so we reset all to inactive
this.dropletColumns.forEach(c => c.active = false);
//and set this column as the actively sorted column
this.dropletColumns[i].active = true;
break;
}
}
}
// if `sortOrder` is `undefined` then use 'ASC'
if (sortOrder === undefined) {
sortOrder = 'ASC'
}
var newData = this.droplets;
for (var i = 0; i < this.dropletsSearchTerms.length; i++) {
newData = this.filterData(newData, this.dropletsSearchTerms[i], true, this.activeDropletColumn.name);
}
newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
this.filteredDroplets = newData;
this.getAutoCompleteDroplets();
},
getAutoCompleteDroplets: function() {
this.autoCompleteDroplets = [];
this.dropletColumns.forEach(c => this.filteredDroplets.forEach(r => (r[c.name.toLowerCase()]) ? this.autoCompleteDroplets.push(r[c.name.toLowerCase()].toString()) : ''));
},
filterData: function(data, searchTerm, ignoreCase) {
var field = '';
if (searchTerm.indexOf(":") > -1) {
field = searchTerm.split(':')[0].trim();
searchTerm = searchTerm.split(':')[1].trim();
}
var filter = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() : searchTerm) : '';
if (filter) {
data = data.filter(item => {
var res = Object.keys(item).find((key) => {
if (field.indexOf(".") > -1) {
var objArray = field.split(".");
var obj = item;
var arrayLength = objArray.length;
for (var i = 0; i < arrayLength; i++) {
try {
obj = obj[objArray[i]];
} catch (e) {
return false;
}
}
var preItemValue = ('' + obj);
var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
return itemValue.indexOf(filter) > -1;
} else {
if (key !== field && field !== '') {
return false;
}
var preItemValue = ('' + item[key]);
var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
return itemValue.indexOf(filter) > -1;
}
});
return !(typeof res === 'undefined');
});
}
return data;
},
...
]]>
Example table with: Paging Bar / Filter / Sortable Columns / Multi-select with available Actions
HTML:
Table title
{ { column.label } }
{ { column.format ? column.format(row[column.name]) : row[column.name] } }
4" fxLayout="row" fxLayoutAlign="end center">
0" layout="row" layout-align="center center">
No results to display.
Row per page: { { pagingBar.range } } of { { pagingBar.total } }
]]>
Javascript:
c.active = false);
//and set this column as the actively sorted column
column.active = true;
}
},
searchRemove: function(searchTerm) {
//only remove the first occurrence of the search term
var index = this.searchTerm.indexOf(searchTerm);
if (index !== -1) {
this.searchTerm.splice(index, 1);
}
this.filter();
},
searchAdd: function(searchTerm) {
this.searchTerm.push(searchTerm);
this.filter();
},
page: function(pagingEvent) {
this.fromRow = pagingEvent.fromRow;
this.currentPage = pagingEvent.page;
this.pageSize = pagingEvent.pageSize;
this.filter();
},
filterData: function(data, searchTerm, ignoreCase) {
var field = '';
if (searchTerm.indexOf(":") > -1) {
field = searchTerm.split(':')[0].trim();
searchTerm = searchTerm.split(':')[1].trim();
}
var filter = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() : searchTerm) : '';
if (filter) {
data = data.filter(item => {
var res = Object.keys(item).find((key) => {
if (field.indexOf(".") > -1) {
var objArray = field.split(".");
var obj = item;
var arrayLength = objArray.length;
for (var i = 0; i < arrayLength; i++) {
try {
obj = obj[objArray[i]];
} catch (e) {
return false;
}
}
var preItemValue = ('' + obj);
var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
return itemValue.indexOf(filter) > -1;
} else {
if (key !== field && field !== '') {
return false;
}
var preItemValue = ('' + item[key]);
var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
return itemValue.indexOf(filter) > -1;
}
});
return !(typeof res === 'undefined');
});
}
return data;
},
filter: function(sortBy, sortOrder) {
if (this.allRowsSelected) {
this.toggleSelectAll();
}
this.deselectAll();
var newData = this.data;
if (this.searchTerm.length > 0) {
for (var i = 0; i < this.searchTerm.length; i++) {
//account for column/field name specific search syntax
if (this.searchTerm[i].indexOf(":") > -1) {
newData = this.filterData(newData, this.searchTerm[i].split(':')[1].trim(), true, this.searchTerm[i].split(':')[0].trim());
} else { //otherwise search all cells
newData = this.filterData(newData, this.searchTerm[i], true);
}
}
} else {
newData = this.dataTableService.filterData(newData, '', true);
}
this.filteredTotal = newData.length;
newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
newData = this.dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
this.filteredData = newData;
this.getAutoCompleteData();
},
toggleSelect: function(row) {
if (!row.checked) {
this.allRowsSelected = false;
} else {
if (this.allFilteredRowsSelected()) {
this.allRowsSelected = true;
} else {
this.allRowsSelected = false;
}
}
},
toggleSelectAll: function() {
this.allRowsSelected = !this.allRowsSelected;
if (this.allRowsSelected) {
this.selectAll();
} else {
this.deselectAll();
}
},
selectAll: function() {
this.filteredData.forEach(c => c.checked = true);
},
deselectAll: function() {
this.filteredData.forEach(c => c.checked = false);
},
allFilteredRowsSelected: function() {
var allFilteredRowsSelected = true;
this.filteredData.forEach(function(c) {
if (c.checked === undefined || c.checked === false) {
allFilteredRowsSelected = false;
}
});
return allFilteredRowsSelected;
},
areTooltipsOn: function() {
return this.columns[0].hasOwnProperty('tooltip');
},
toggleTooltips: function() {
if (this.columns[0].tooltip) {
this.columns.forEach(c => delete c.tooltip);
} else {
this.columns.forEach(c => c.tooltip = `This is ${c.label}!`);
}
},
openDataTablePrompt: function(row, name) {
this.dialogService.openPrompt({
message: 'Enter comment?',
value: row[name],
}).afterClosed().subscribe(value => {
if (value !== undefined) {
row[name] = value;
}
})
},
getAutoCompleteData: function() {
this.autoCompleteData = [];
this.columns.forEach(c => this.filteredData.forEach(r => (r[c.name.toLowerCase()]) ? this.autoCompleteData.push(r[c.name.toLowerCase()].toString()):''));
},
...
]]>
HTML:
{ {grocery.name} }
]]>
Javascript:
HTML:
]]>
Javascript:
HTML:
Option 1
Option 2
Option 3 (disabled)
]]>
Your favorite season is: {{favoriteSeason}}
HTML:
{ {season} }
Your favorite season is: { { favoriteSeason } }
]]>
Javascript:
HTML:
Bottom Tooltip
]]>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
HTML:
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
]]>
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.
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.
HTML:
One
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.
Two
Second tab content
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.
]]>
HTML:
{ {food.viewValue} }
Selected food value: { {selectedValue} }
]]>
Javascript:
HTML:
more_vert
]]>
HTML:
Show simple dialog
]]>
Javascript:
HTML:
Open Confirm
]]>
Javascript:
HTML:
Success Snack Bar
]]>
Javascript:
Expand/Collapse Event for Expansion 1: {{expandCollapseExpansion1Msg}}
1600 Amphitheatre Pkwy
Mountain View, CA 94043, USA
HTML:
pin_drop
Google
Headquarters
1600 Amphitheatre Pkwy
Mountain View, CA 94043, USA
]]>
Javascript:
HTML:
]]>
HTML:
]]>
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.
HTML:
...
]]>
HTML:
{ {system.name} }
]]>
Javascript:
HTML:
]]>
Javascript:
HTML:
]]>
HTML:
]]>
HTML:
]]>