Ignite UI for Angular
Components Get Started

schemas

#

variable dark-material-schema public view code open_in_new

Used to create material component themes. Use in combination with dark palettes.

$dark-material-schema: (
action-strip: $dark-material-action-strip,
avatar: $dark-material-avatar,
badge: $dark-material-badge,
banner: $dark-material-banner,
bottom-nav: $dark-material-bottom-nav,
button: $dark-material-button,
button-group: $dark-material-button-group,
calendar: $dark-material-calendar,
card: $dark-material-card,
carousel: $dark-material-carousel,
checkbox: $dark-material-checkbox,
chip: $dark-material-chip,
column-actions: $dark-material-column-actions,
combo: $dark-material-combo,
date-picker: $dark-material-date-picker,
date-range: $dark-material-date-range-picker,
dialog: $dark-material-dialog,
divider: $dark-material-divider,
dockmanager: $dark-material-dock-manager,
drop-down: $dark-material-drop-down,
expansion-panel: $dark-material-expansion-panel,
grid: $dark-material-grid,
grid-filtering: $dark-material-grid-filtering,
grid-summary: $dark-material-grid-summary,
grid-toolbar: $dark-material-grid-toolbar,
highlight: $dark-material-highlight,
icon: $dark-material-icon,
icon-button: $dark-material-icon-button,
input-group: $dark-material-input-group,
label: $dark-material-label,
list: $dark-material-list,
navbar: $dark-material-navbar,
nav-drawer: $dark-material-navdrawer,
overlay: $dark-material-overlay,
paginator: $dark-material-pagination,
pivot-data-selector: $dark-material-pivot-data-selector,
linear-bar: $dark-material-progress-linear,
circular-bar: $dark-material-progress-circular,
query-builder: $dark-material-query-builder,
radio: $dark-material-radio,
rating: $dark-material-rating,
resize-indicator: $dark-material-resize-indicator,
ripple: $dark-material-ripple,
scrollbar: $dark-material-scrollbar,
select: $dark-material-select,
slider: $dark-material-slider,
snackbar: $dark-material-snackbar,
splitter: $dark-material-splitter,
stepper: $dark-material-stepper,
switch: $dark-material-switch,
tabs: $dark-material-tabs,
tile-manager: $dark-material-tile-manager,
time-picker: $dark-material-time-picker,
toast: $dark-material-toast,
tooltip: $dark-material-tooltip,
tree: $dark-material-tree,
validator: $dark-material-validator,
watermark: $dark-material-watermark,
file-input: $dark-material-file-input,
_meta: (
theme: 'material',
variant: 'dark',
),
);
#

variable dark-fluent-schema public view code open_in_new

Used to create fluent component themes. Use in combination with dark palettes.

$dark-fluent-schema: (
action-strip: $dark-fluent-action-strip,
avatar: $dark-fluent-avatar,
badge: $dark-fluent-badge,
banner: $dark-fluent-banner,
bottom-nav: $dark-fluent-bottom-nav,
button: $dark-fluent-button,
button-group: $dark-fluent-button-group,
calendar: $dark-fluent-calendar,
card: $dark-fluent-card,
carousel: $dark-fluent-carousel,
checkbox: $dark-fluent-checkbox,
chip: $dark-fluent-chip,
column-actions: $dark-fluent-column-actions,
combo: $dark-fluent-combo,
date-picker: $dark-fluent-date-picker,
date-range: $dark-fluent-date-range-picker,
dialog: $dark-fluent-dialog,
divider: $dark-fluent-divider,
dockmanager: $dark-fluent-dock-manager,
drop-down: $dark-fluent-drop-down,
expansion-panel: $dark-fluent-expansion-panel,
grid: $dark-fluent-grid,
grid-filtering: $dark-fluent-grid-filtering,
grid-summary: $dark-fluent-grid-summary,
grid-toolbar: $dark-fluent-grid-toolbar,
highlight: $dark-fluent-highlight,
icon: $dark-fluent-icon,
icon-button: $dark-fluent-icon-button,
input-group: $dark-fluent-input-group,
label: $dark-fluent-label,
list: $dark-fluent-list,
navbar: $dark-fluent-navbar,
nav-drawer: $dark-fluent-navdrawer,
overlay: $dark-fluent-overlay,
paginator: $dark-fluent-pagination,
pivot-data-selector: $dark-fluent-pivot-data-selector,
linear-bar: $dark-fluent-progress-linear,
circular-bar: $dark-fluent-progress-circular,
query-builder: $dark-fluent-query-builder,
radio: $dark-fluent-radio,
rating: $dark-fluent-rating,
resize-indicator: $dark-fluent-resize-indicator,
ripple: $dark-fluent-ripple,
scrollbar: $dark-fluent-scrollbar,
select: $dark-fluent-select,
slider: $dark-fluent-slider,
snackbar: $dark-fluent-snackbar,
splitter: $dark-fluent-splitter,
stepper: $dark-fluent-stepper,
switch: $dark-fluent-switch,
tabs: $dark-fluent-tabs,
tile-manager: $dark-fluent-tile-manager,
time-picker: $dark-fluent-time-picker,
toast: $dark-fluent-toast,
tooltip: $dark-fluent-tooltip,
tree: $dark-fluent-tree,
validator: $dark-fluent-validator,
watermark: $dark-fluent-watermark,
file-input: $dark-fluent-file-input,
_meta: (
theme: 'fluent',
variant: 'dark',
),
);
#

variable dark-bootstrap-schema public view code open_in_new

Used to create bootstrap component themes. Use in combination with dark palettes.

$dark-bootstrap-schema: (
action-strip: $dark-bootstrap-action-strip,
avatar: $dark-bootstrap-avatar,
badge: $dark-bootstrap-badge,
banner: $dark-bootstrap-banner,
bottom-nav: $dark-bootstrap-bottom-nav,
button: $dark-bootstrap-button,
button-group: $dark-bootstrap-button-group,
calendar: $dark-bootstrap-calendar,
card: $dark-bootstrap-card,
carousel: $dark-bootstrap-carousel,
checkbox: $dark-bootstrap-checkbox,
chip: $dark-bootstrap-chip,
column-actions: $dark-bootstrap-column-actions,
combo: $dark-bootstrap-combo,
date-picker: $dark-bootstrap-date-picker,
date-range: $dark-bootstrap-date-range-picker,
dialog: $dark-bootstrap-dialog,
divider: $dark-bootstrap-divider,
dockmanager: $dark-bootstrap-dock-manager,
drop-down: $dark-bootstrap-drop-down,
expansion-panel: $dark-bootstrap-expansion-panel,
grid: $dark-bootstrap-grid,
grid-filtering: $dark-bootstrap-grid-filtering,
grid-summary: $dark-bootstrap-grid-summary,
grid-toolbar: $dark-bootstrap-grid-toolbar,
highlight: $dark-bootstrap-highlight,
icon: $dark-bootstrap-icon,
icon-button: $dark-bootstrap-icon-button,
input-group: $dark-bootstrap-input-group,
label: $dark-bootstrap-label,
list: $dark-bootstrap-list,
navbar: $dark-bootstrap-navbar,
nav-drawer: $dark-bootstrap-navdrawer,
overlay: $dark-bootstrap-overlay,
paginator: $dark-bootstrap-pagination,
pivot-data-selector: $dark-bootstrap-pivot-data-selector,
linear-bar: $dark-bootstrap-progress-linear,
circular-bar: $dark-bootstrap-progress-circular,
query-builder: $dark-bootstrap-query-builder,
radio: $dark-bootstrap-radio,
rating: $dark-bootstrap-rating,
resize-indicator: $dark-bootstrap-resize-indicator,
ripple: $dark-bootstrap-ripple,
scrollbar: $dark-bootstrap-scrollbar,
select: $dark-bootstrap-select,
slider: $dark-bootstrap-slider,
snackbar: $dark-bootstrap-snackbar,
splitter: $dark-bootstrap-splitter,
stepper: $dark-bootstrap-stepper,
switch: $dark-bootstrap-switch,
tabs: $dark-bootstrap-tabs,
tile-manager: $dark-bootstrap-tile-manager,
time-picker: $dark-bootstrap-time-picker,
toast: $dark-bootstrap-toast,
tooltip: $dark-bootstrap-tooltip,
tree: $dark-bootstrap-tree,
validator: $dark-bootstrap-validator,
watermark: $dark-bootstrap-watermark,
file-input: $dark-bootstrap-file-input,
_meta: (
theme: 'bootstrap',
variant: 'dark',
),
);
#

variable dark-indigo-schema public view code open_in_new

Used to create indigo component themes. Use in combination with dark palettes.

$dark-indigo-schema: (
action-strip: $dark-indigo-action-strip,
avatar: $dark-indigo-avatar,
badge: $dark-indigo-badge,
banner: $dark-indigo-banner,
bottom-nav: $dark-indigo-bottom-nav,
button: $dark-indigo-button,
button-group: $dark-indigo-button-group,
calendar: $dark-indigo-calendar,
card: $dark-indigo-card,
carousel: $dark-indigo-carousel,
checkbox: $dark-indigo-checkbox,
chip: $dark-indigo-chip,
column-actions: $dark-indigo-column-actions,
combo: $dark-indigo-combo,
date-picker: $dark-indigo-date-picker,
date-range: $dark-indigo-date-range-picker,
dialog: $dark-indigo-dialog,
divider: $dark-indigo-divider,
dockmanager: $dark-indigo-dock-manager,
drop-down: $dark-indigo-drop-down,
expansion-panel: $dark-indigo-expansion-panel,
grid: $dark-indigo-grid,
grid-filtering: $dark-indigo-grid-filtering,
grid-summary: $dark-indigo-grid-summary,
grid-toolbar: $dark-indigo-grid-toolbar,
highlight: $dark-indigo-highlight,
icon: $dark-indigo-icon,
icon-button: $dark-indigo-icon-button,
input-group: $dark-indigo-input-group,
label: $dark-indigo-label,
list: $dark-indigo-list,
navbar: $dark-indigo-navbar,
nav-drawer: $dark-indigo-navdrawer,
overlay: $dark-indigo-overlay,
paginator: $dark-indigo-pagination,
pivot-data-selector: $dark-indigo-pivot-data-selector,
linear-bar: $dark-indigo-progress-linear,
circular-bar: $dark-indigo-progress-circular,
query-builder: $dark-indigo-query-builder,
radio: $dark-indigo-radio,
rating: $dark-indigo-rating,
resize-indicator: $dark-indigo-resize-indicator,
ripple: $dark-indigo-ripple,
scrollbar: $dark-indigo-scrollbar,
select: $dark-indigo-select,
slider: $dark-indigo-slider,
snackbar: $dark-indigo-snackbar,
splitter: $dark-indigo-splitter,
stepper: $dark-indigo-stepper,
switch: $dark-indigo-switch,
tabs: $dark-indigo-tabs,
tile-manager: $dark-indigo-tile-manager,
time-picker: $dark-indigo-time-picker,
toast: $dark-indigo-toast,
tooltip: $dark-indigo-tooltip,
tree: $dark-indigo-tree,
validator: $dark-indigo-validator,
watermark: $dark-indigo-watermark,
file-input: $dark-indigo-file-input,
_meta: (
theme: 'indigo',
variant: 'dark',
),
);
#

variable light-material-schema public view code open_in_new

Used to create material component themes. Use in combination with light palettes.

$light-material-schema: (
action-strip: $material-action-strip,
avatar: $material-avatar,
badge: $material-badge,
banner: $material-banner,
bottom-nav: $material-bottom-nav,
button: $material-button,
button-group: $material-button-group,
calendar: $material-calendar,
card: $material-card,
carousel: $material-carousel,
checkbox: $material-checkbox,
chip: $material-chip,
column-actions: $material-column-actions,
combo: $material-combo,
date-picker: $material-date-picker,
date-range: $material-date-range-picker,
dialog: $material-dialog,
divider: $material-divider,
dockmanager: $material-dock-manager,
drop-down: $material-drop-down,
expansion-panel: $material-expansion-panel,
grid: $material-grid,
grid-filtering: $material-grid-filtering,
grid-summary: $material-grid-summary,
grid-toolbar: $material-grid-toolbar,
highlight: $material-highlight,
icon: $material-icon,
icon-button: $material-icon-button,
input-group: $material-input-group,
label: $material-label,
list: $material-list,
navbar: $material-navbar,
nav-drawer: $material-navdrawer,
overlay: $material-overlay,
paginator: $material-pagination,
pivot-data-selector: $material-pivot-data-selector,
linear-bar: $material-progress-linear,
circular-bar: $material-progress-circular,
query-builder: $material-query-builder,
radio: $material-radio,
rating: $material-rating,
resize-indicator: $material-resize-indicator,
ripple: $material-ripple,
scrollbar: $material-scrollbar,
select: $material-select,
slider: $material-slider,
snackbar: $material-snackbar,
splitter: $material-splitter,
stepper: $material-stepper,
switch: $material-switch,
tabs: $material-tabs,
tile-manager: $material-tile-manager,
time-picker: $material-time-picker,
toast: $material-toast,
tooltip: $material-tooltip,
tree: $material-tree,
validator: $material-validator,
watermark: $material-watermark,
file-input: $material-file-input,
_meta: (
theme: 'material',
variant: 'light',
),
);
#

variable light-fluent-schema public view code open_in_new

Used to create fluent component themes. Use in combination with light palettes.

$light-fluent-schema: (
action-strip: $fluent-action-strip,
avatar: $fluent-avatar,
badge: $fluent-badge,
banner: $fluent-banner,
bottom-nav: $fluent-bottom-nav,
button: $fluent-button,
button-group: $fluent-button-group,
calendar: $fluent-calendar,
card: $fluent-card,
carousel: $fluent-carousel,
checkbox: $fluent-checkbox,
chip: $fluent-chip,
column-actions: $fluent-column-actions,
combo: $fluent-combo,
date-picker: $fluent-date-picker,
date-range: $fluent-date-range-picker,
dialog: $fluent-dialog,
divider: $fluent-divider,
dockmanager: $fluent-dock-manager,
drop-down: $fluent-drop-down,
expansion-panel: $fluent-expansion-panel,
grid: $fluent-grid,
grid-filtering: $fluent-grid-filtering,
grid-summary: $fluent-grid-summary,
grid-toolbar: $fluent-grid-toolbar,
highlight: $fluent-highlight,
icon: $fluent-icon,
icon-button: $fluent-icon-button,
input-group: $fluent-input-group,
label: $fluent-label,
list: $fluent-list,
navbar: $fluent-navbar,
nav-drawer: $fluent-navdrawer,
overlay: $fluent-overlay,
paginator: $fluent-pagination,
pivot-data-selector: $fluent-pivot-data-selector,
linear-bar: $fluent-progress-linear,
circular-bar: $fluent-progress-circular,
query-builder: $fluent-query-builder,
radio: $fluent-radio,
rating: $fluent-rating,
resize-indicator: $fluent-resize-indicator,
ripple: $fluent-ripple,
scrollbar: $fluent-scrollbar,
select: $fluent-select,
slider: $fluent-slider,
snackbar: $fluent-snackbar,
splitter: $fluent-splitter,
stepper: $fluent-stepper,
switch: $fluent-switch,
tabs: $fluent-tabs,
tile-manager: $fluent-tile-manager,
time-picker: $fluent-time-picker,
toast: $fluent-toast,
tooltip: $fluent-tooltip,
tree: $fluent-tree,
validator: $fluent-validator,
watermark: $fluent-watermark,
file-input: $fluent-file-input,
_meta: (
theme: 'fluent',
variant: 'light',
),
);
#

variable light-bootstrap-schema public view code open_in_new

Used to create bootstrap component themes. Use in combination with light palettes.

$light-bootstrap-schema: (
action-strip: $bootstrap-action-strip,
avatar: $bootstrap-avatar,
badge: $bootstrap-badge,
banner: $bootstrap-banner,
bottom-nav: $bootstrap-bottom-nav,
button: $bootstrap-button,
button-group: $bootstrap-button-group,
calendar: $bootstrap-calendar,
card: $bootstrap-card,
carousel: $bootstrap-carousel,
checkbox: $bootstrap-checkbox,
chip: $bootstrap-chip,
column-actions: $bootstrap-column-actions,
combo: $bootstrap-combo,
date-picker: $bootstrap-date-picker,
date-range: $bootstrap-date-range-picker,
dialog: $bootstrap-dialog,
divider: $bootstrap-divider,
dockmanager: $bootstrap-dock-manager,
drop-down: $bootstrap-drop-down,
expansion-panel: $bootstrap-expansion-panel,
grid: $bootstrap-grid,
grid-filtering: $bootstrap-grid-filtering,
grid-summary: $bootstrap-grid-summary,
grid-toolbar: $bootstrap-grid-toolbar,
highlight: $bootstrap-highlight,
icon: $bootstrap-icon,
icon-button: $bootstrap-icon-button,
input-group: $bootstrap-input-group,
label: $bootstrap-label,
list: $bootstrap-list,
navbar: $bootstrap-navbar,
nav-drawer: $bootstrap-navdrawer,
overlay: $bootstrap-overlay,
paginator: $bootstrap-pagination,
pivot-data-selector: $bootstrap-pivot-data-selector,
linear-bar: $bootstrap-progress-linear,
circular-bar: $bootstrap-progress-circular,
query-builder: $bootstrap-query-builder,
radio: $bootstrap-radio,
rating: $bootstrap-rating,
resize-indicator: $bootstrap-resize-indicator,
ripple: $bootstrap-ripple,
scrollbar: $bootstrap-scrollbar,
select: $bootstrap-select,
slider: $bootstrap-slider,
snackbar: $bootstrap-snackbar,
splitter: $bootstrap-splitter,
stepper: $bootstrap-stepper,
switch: $bootstrap-switch,
tabs: $bootstrap-tabs,
tile-manager: $bootstrap-tile-manager,
time-picker: $bootstrap-time-picker,
toast: $bootstrap-toast,
tooltip: $bootstrap-tooltip,
tree: $bootstrap-tree,
validator: $bootstrap-validator,
watermark: $bootstrap-watermark,
file-input: $bootstrap-file-input,
_meta: (
theme: 'bootstrap',
variant: 'light',
),
);
#

variable light-indigo-schema public view code open_in_new

Used to create indigo component themes. Use in combination with light palettes.

$light-indigo-schema: (
action-strip: $indigo-action-strip,
avatar: $indigo-avatar,
badge: $indigo-badge,
banner: $indigo-banner,
bottom-nav: $indigo-bottom-nav,
button: $indigo-button,
button-group: $indigo-button-group,
calendar: $indigo-calendar,
card: $indigo-card,
carousel: $indigo-carousel,
checkbox: $indigo-checkbox,
chip: $indigo-chip,
column-actions: $indigo-column-actions,
combo: $indigo-combo,
date-picker: $indigo-date-picker,
date-range: $indigo-date-range-picker,
dialog: $indigo-dialog,
divider: $indigo-divider,
dockmanager: $indigo-dock-manager,
drop-down: $indigo-drop-down,
expansion-panel: $indigo-expansion-panel,
grid: $indigo-grid,
grid-filtering: $indigo-grid-filtering,
grid-summary: $indigo-grid-summary,
grid-toolbar: $indigo-grid-toolbar,
highlight: $indigo-highlight,
icon: $indigo-icon,
icon-button: $indigo-icon-button,
input-group: $indigo-input-group,
label: $indigo-label,
list: $indigo-list,
navbar: $indigo-navbar,
nav-drawer: $indigo-navdrawer,
overlay: $indigo-overlay,
paginator: $indigo-pagination,
pivot-data-selector: $indigo-pivot-data-selector,
linear-bar: $indigo-progress-linear,
circular-bar: $indigo-progress-circular,
query-builder: $indigo-query-builder,
radio: $indigo-radio,
rating: $indigo-rating,
resize-indicator: $indigo-resize-indicator,
ripple: $indigo-ripple,
scrollbar: $indigo-scrollbar,
select: $indigo-select,
slider: $indigo-slider,
snackbar: $indigo-snackbar,
splitter: $indigo-splitter,
stepper: $indigo-stepper,
switch: $indigo-switch,
tabs: $indigo-tabs,
tile-manager: $indigo-tile-manager,
time-picker: $indigo-time-picker,
toast: $indigo-toast,
tooltip: $indigo-tooltip,
tree: $indigo-tree,
validator: $indigo-validator,
watermark: $indigo-watermark,
file-input: $indigo-file-input,
_meta: (
theme: 'indigo',
variant: 'light',
),
);

Search Documentation