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.
Themes example
app.component.ts
source.ts
Theme:
GENERIC
Number
Name
Position
Team
Retired
Bio
8
Kobe Bryant
SG
Kobe Bean Bryant (born August 23, 1978) is an American former professional basketball player. He played his entire 20-year career with the Los Angeles ...
1
Tracy McGrady
SG
Tracy Lamar McGrady Jr. (born May 24, 1979) is an American former professional basketball player. He is best known for his career in the National Basketball
23
Lebron James
PF
LeBron Raymone James Sr is an American professional basketball player for the Los Angeles Lakers of the National Basketball Association (NBA). He is ofte
3
Dwayne Wade
SG
Dwyane Tyrone Wade Jr is an American former professional basketball player. Wade spent the majority of his 16-year career playing for the Miami Heat in the
15
Vince Carter
SG
Vincent Lamar Carter (born January 26, 1977) is an American professional basketball player for the Atlanta Hawks of the National Basketball Association (NBA).
34
Charles Barkley
PF
Charles Wade Barkley (born February 20, 1963) is an American retired professional basketball player who is currently an analyst on Inside the NBA. Nicknamed
15
Nikola Jokić
PF
Nikola Jokić is a Serbian professional basketball player for the Denver Nuggets of the National Basketball Association (NBA). He also represents the Serbian
0
Russell Westbrook
PG
Russell Westbrook III (born November 12, 1988) is an American professional basketball player for the Houston Rockets of the National Basketball Association
7
Kevin Durant
PF
Kevin Wayne Durant (born September 29, 1988) is an American professional basketball player for the Brooklyn Nets of the National Basketball Association
13
James Harden
PG/SG
James Edward Harden Jr. (born August 26, 1989) is an American professional basketball player for the Houston Rockets of the National Basketball Association
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'
}];


Inputs

InputTypeDefaultDescription
themestring | GuiThemeGuiTheme.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

Outputs

OutputTypeDescription
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.

Related articles: