Themes
Theme input implements a set of pre-designed styles on the grid and its components. Generic UI grid has four build-in themes:
- Fabric,
- Material - consist of a toned color palette and different styles,
- Generic - default theme,
- Light - adds more visible fonts to a white background, it is perfect for daylight conditions,
- Dark - a sleek dark theme with dark gray color palette, useful at night.
GENERIC
Number
Name
Position
Team
Retired
Bio
Items per page:
10
1 - 10 of 18
import { Component } from '@angular/core';
import { GuiCellView, GuiPaging, GuiTheme } from '@generic-ui/ngx-grid';
import { source } from './source';
@Component({
selector: 'themes-grid',
template: `
Theme:
<gui-select [options]="themes"
[placeholder]="'Select theme'"
[selected]="'FABRIC'"
(optionChanged)="setTheme($event)">
</gui-select>
<gui-grid [columns]="columns"
[source]="source"
[paging]="paging"
[theme]="theme">
</gui-grid>
`
})
export class ThemesGridComponent {
columns = [{
header: 'Number',
field: 'number',
view: GuiCellView.CHIP,
width: 80
}, {
header: 'Name',
field: 'name',
view: GuiCellView.ITALIC
}, {
header: 'Position',
field: 'position',
view: GuiCellView.BOLD
}, {
header: 'Team',
field: 'team',
view: GuiCellView.LINK
}, {
header: 'Check',
field: 'check',
width: 60,
view: GuiCellView.CHECKBOX
}, {
header: 'Comments',
field: 'comments',
view: GuiCellView.ITALIC
}];
source = source;
paging: GuiPaging = {
enabled: true,
pageSizes: [10, 25],
pageSize: 10
};
theme: GuiTheme;
themes = Object.keys(GuiTheme)
.map((key: string) => GuiTheme[key])
.filter((val) => !Number.isInteger(val));
setTheme(theme: GuiTheme): void {
this.theme = theme;
}
}
export const source = [{
name: 'Kobe Bryant',
number: 8,
position: 'SG',
team: 'Los Angeles Lakers'
}, {
name: 'Tracy McGrady',
number: 1,
position: 'SG',
team: 'Houston Rockets'
}, {
name: 'Lebron James',
number: 23,
position: 'PF',
team: 'Los Angeles Lakers'
}, {
name: 'Dwayne Wade',
number: 3,
position: 'SG',
team: 'Miami Heat'
}, {
name: 'Vince Carter',
number: 15,
position: 'SG',
team: 'Atlanta Hawks'
}, {
name: 'Charles Barkley',
number: 34,
position: 'PF',
team: 'N/A'
}, {
name: 'Nikola Jokic',
number: 15,
position: 'PF',
team: 'Denver Nuggets'
}, {
name: 'Russell Westbrook',
number: 0,
position: 'PG',
team: 'Houston Rockets'
}, {
name: 'Kevin Durant',
number: 7,
position: 'PF',
team: 'Brooklyn Nets'
}, {
name: 'James Harden',
number: 13,
position: 'PG/SG',
team: 'Houston Rockets'
}, {
name: 'Paul George',
number: 13,
position: 'SG',
team: 'Los Angeles Clippers'
}, {
name: 'Ben Simmons',
number: 25,
position: 'PG',
team: 'Philadelphia 76ers'
}, {
name: 'Kawhi Leonard',
number: 2,
position: 'SG/SF',
team: 'Los Angeles Clippers'
}, {
name: 'Joel Embiid',
number: 21,
position: 'C',
team: 'Philadelphia 76ers'
}, {
name: 'Janis Andetokunmbo',
number: 34,
position: 'PF',
team: 'Milwaukee Bucks'
}, {
name: 'Stephen Curry',
number: 30,
position: 'PG',
team: 'Golden State Warriors'
}, {
name: 'Klay Thompson',
number: 11,
position: 'SG',
team: 'Golden State Warriors'
}, {
name: 'Anthony Davis',
number: 23,
position: 'PF',
team: 'Los Angeles Lakers'
}];
Themes - Inputs
Input | Type | Default | Description |
---|---|---|---|
theme | string | GuiTheme | GuiTheme.GENERIC | Changes Grid theme. Available themes: FABRIC, MATERIAL, DARK, LIGHT, GENERIC |
rowColoring | string | GuiRowColoring | GuiRowColoring.EVEN | Applies colored shading to the grid rows. Available shading options: Even, Odd, None |
verticalGrid | boolean | true | Enables vertical lines that separate columns within the grid |
horizontalGrid | boolean | true | Enables horizontal lines that separate rows within the grid |
Theme - Outputs
Output | Type | Description |
---|---|---|
themeChanged | EventEmitter<GuiTheme> | Emits theme when it changes. |
rowColoringChanged | EventEmitter<GuiRowColoring> | Emits rowColoring when it changes. |
verticalGridChanged | EventEmitter<boolean> | Emits vertical grid when it changes. |
horizontalGridChanged | EventEmitter<boolean> | Emits horizontal grid when it changes. |