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 - default theme,
  • Material - consist of a toned color palette and different styles,
  • 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.
Themes example
app.component.ts
source.ts
Theme:
FABRIC
FABRIC
MATERIAL
LIGHT
DARK
Number
Name
Position
Team
Retired
Bio
8 Kobe BryantSG 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 McGradySG 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 JamesPF 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 WadeSG 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 CarterSG 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 BarkleyPF 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 WestbrookPG 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 DurantPF 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 HardenPG/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, 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'
}];


Inputs

InputDescription
theme: string | GuiTheme Changes Grid theme. Available themes: Fabric, Material, Dark, Light
rowColoring: string | GuiRowColoring Applies colored shading to the grid rows. Available shading options: Even, Odd, None
verticalGrid: boolean Enables vertical lines that separate columns within the grid
horizontalGrid: boolean 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.