Table of Contents

Cascading Defaults

Material.Blazor uses a system of cascading defaults using MBCascadingDefaults to control defaults for things such as button style and density, text field style and so on. The MBCascadingDefaults class is supplied to components held within a <CascadingValue> tag. Cascading defaults can be nested (the most recent) takes precedence as for any cascading value, and if no cascading defaults are supplied, a default scheme is applied by Material.Blazor. Cascading defaults apply when an optional parameter is not supplied to a component.

This section describes the usage of properties in MBCascadingDefaults.

Icons

The following properties are used for displaying icons. Material.Blazor components all render icons using the MBIcon component which renders any of Material Icons, Font Awesome of Open Iconic icons and their respective variants. Any component that uses icons accepts an optional IconFoundry parameter, which

Property Used In
IconFoundryName The default icon foundry.
IconMITheme The default Material Icons theme.
IconFAStyle The default Font Awesome style.
IconFARelativeSize The default Font Awesome relative size.

Density Subsystem

Material Theme has a density subsystem which applies to some components. When a component Density parameter is not set the folliwng cascading defaults apply:

Property Used In
ThemeDensity A default for all components unless over-ridden by first one of the cascading default parameters below or second a component's own Density parameter.
ButtonDensity MBButton.
CheckboxDensity MBCheckbox.
DataTableDensity MBDataTable.
IconButtonDensity MBIconButton and MBIconButtonToggle.
ListSingleLineDensity MBList.
RadioButtonDensity MBRadioButton and MBRadioButtonGroup.
SelectDensity MBSelect.
SwitchDensity MBSwitch.
TabBarDensity MBTabBar.
TextFieldDensity MBTextField, MBTextArea, MBAutocompletePagedField, MBAutocompleteSelectField, MBAutocompleteTextField, MBDebouncedTextField, MBNumericDoubleField and MBNumericIntField.

The order of priority for applying density is first/highest a component's Density parameter, second a component oriented cascading default (lines two onwards in the table above), then third/last ThemeDensity from cascading defaults. If either cascading defaults are not supplied or densities are not set, the default is MBDensity.Default.

General Properties

Property Used In
Disabled Sets the default Disabled state for all component, overridden by component Disabled parameters.
ButtonStyle Style for general MBButtons. Defaults to MBButtonStyle.Text.
CardActionButtonStyle Style for MBButtons used for MBCard actions. Defaults to MBButtonStyle.Text.
DialogActionButtonStyle Style for MBButtons used for MBDialog actions. Defaults to MBButtonStyle.Text.
CardStyle Style for MBCard. Defaults to MBCardStyle.Default.
ListStyle Style for MBList. Defaults to MBListStyle.None.
ListType Style for MBList. Defaults to MBListType.Regular.
SelectInputStyle Style for MBSelect and MBDatePicker. Defaults to MBSelectInputStyle.Filled.
TextAlignStyle Text alignment for MBSelect, MBTextField, MBTextArea, MBAutocompletePagedField, MBAutocompleteSelectField, MBAutocompleteTextField, MBDebouncedTextField, MBNumericDoubleField and MBNumericIntField. Defaults to MBTextAlignStyle.Default / left aligned for ltr input and vice versa.
TextInputStyle Style for MBTextField, MBTextArea, MBAutocompletePagedField, MBAutocompleteSelectField, MBAutocompleteTextField, MBDebouncedTextField, MBNumericDoubleField and MBNumericIntField. Defaults to MBTextInputStyle.Filled.
DateSelectionCriteria Selection criteria for dates in MBDatePicker. Defaults to MBDateSelectionCriteria.AllowAll.
DebounceInterval Debounce interval for MBDebouncedTextField. Defaults to `300", meaning 300 milliseconds.

Attribute Splatting and Data Validation

Material.Blazor makes extensive use of attribute splatting. As a measure to help library users identify erroneous attributes cascading defautls allow you to specify that unassigned attributes should result in an exception being thrown. Material.Blazor also has several ways of handling when a select or radio button group receives a two-way bound value that is not in its item list.

Property Usage
ConstrainSplattableAttributes If set to true, which is the default, components throw an exception when unassigned attributes are used in razor markup. Defaults to false.
AllowedSplattableAttributes A list of HTML attributes that you can assign for Material.Blazor to allow without throwing an exception .
ItemValidation Validation method applied to MBSelect and MBRadioButtonGroup.

Forcing a Blazor Re-Render with the Version Property

Whenever a property of MBCascadingDefaults is updated, the Version property is incremented. You can use Version to force a Blazor component, or block of components within a <div> to re-render as a result of updated cascading defaults.

In the following example if ThemeDensity, ButtonDensity, TextFieldDensity, ButtonStyle, TextFieldStyle etc change in myCascadingDefaults, the button and text field will re-render the next time Blazor renders the page.

<div @key="@myCascadingDefaults.Version">
    <MBButton Label="A Button!" />

    <MBTextField Label="A Text Field!" />
</div>

@code {
    [CascadingParameter] private MBCascadingDefaults myCascadingDefaults { get; set; }
}
Edit this page