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
FABRIC
MATERIAL
LIGHT
DARK
GENERIC
Number
Name
Position
Team
Retired
Bio
8 Kobe Bryant SG Los Angeles Lakers 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 Houston Rockets 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 Los Angeles Lakers 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 Miami Heat 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 Atlanta Hawks 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 N/A 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 Denver Nuggets 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 Houston Rockets 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 Brooklyn Nets 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 Houston Rockets 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
10
25
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

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

Theme - 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:

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.