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
8Kobe BryantSGLos Angeles LakersKobe Bean Bryant (born August 23, 1978) is an American former professional basketball player. He played his entire 20-year career with the Los Angeles ...1Tracy McGradySGHouston RocketsTracy 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 23Lebron JamesPFLos Angeles LakersLeBron Raymone James Sr is an American professional basketball player for the Los Angeles Lakers of the National Basketball Association (NBA). He is ofte3Dwayne WadeSGMiami HeatDwyane 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 the15Vince CarterSGAtlanta HawksVincent Lamar Carter (born January 26, 1977) is an American professional basketball player for the Atlanta Hawks of the National Basketball Association (NBA).34Charles BarkleyPFN/ACharles Wade Barkley (born February 20, 1963) is an American retired professional basketball player who is currently an analyst on Inside the NBA. Nicknamed15Nikola JokićPFDenver NuggetsNikola Jokić is a Serbian professional basketball player for the Denver Nuggets of the National Basketball Association (NBA). He also represents the Serbian0Russell WestbrookPGHouston RocketsRussell Westbrook III (born November 12, 1988) is an American professional basketball player for the Houston Rockets of the National Basketball Association7Kevin DurantPFBrooklyn NetsKevin Wayne Durant (born September 29, 1988) is an American professional basketball player for the Brooklyn Nets of the National Basketball Association13James HardenPG/SGHouston RocketsJames 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, GuiPagingConfig, 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: GuiPagingConfig = {
		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 | GuiTheme'Fabric' Changes Grid theme. Available themes: Fabric, Material, Dark, Light
rowColoring string | 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

Related articles:

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