Defaults and Settings

Defaults

You can set application-wide defaults for individual components by modifying the static Defaults property located on most components (generic components have their non-generic class for that).

HxButton.Defaults.Outline = true;
HxButton.Defaults.Icon = BootstrapIcon.Fullscreen;

Where to set #

Defaults can be set anywhere from the application, however, as it is a shared setting, you usually set them when the application starts (Program.cs or Startup.cs).

public class Startup
{
	public void ConfigureServices(IServiceCollection services)
	{
		services.AddRazorPages();

		services.AddHxServices();
		services.AddHxMessenger();
		services.AddHxMessageBoxHost();

		SetHxComponents();
	}

	private static void SetHxComponents()
	{
		HxPlaceholderContainer.Defaults.Animation = PlaceholderAnimation.Glow;
		HxPlaceholder.Defaults.Color = ThemeColor.Light;

		HxButton.Defaults.Size = ButtonSize.Small;
		
		HxOffcanvas.Defaults.Backdrop = OffcanvasBackdrop.Static;
		HxOffcanvas.Defaults.HeaderCssClass = "border-bottom";
		HxOffcanvas.Defaults.FooterCssClass = "border-top";
		
		HxChipList.Defaults.ChipBadgeSettings.Color = ThemeColor.Light;
		HxChipList.Defaults.ChipBadgeSettings.TextColor = ThemeColor.Dark;
		HxChipList.Defaults.ChipBadgeSettings.CssClass = "p-2 rounded-pill";
	}
}

Settings

Beside Defaults you can set Settings parameter on every single component instance (the data structure behind Deafults and Settings is the same). Settings let you bundle several configurations together and reuse them for several component instances.

<HxButton Settings="AppButtonSettings.MainButton" Text="Open" />
<HxButton Settings="AppButtonSettings.SecondaryButton" Text="Fullscreen" />
<HxButton Settings="AppButtonSettings.CloseButton" />

Setting application-wide collection of settings used for varying buttons serving different purposes.

public class AppButtonSettings
{
	public static ButtonSettings MainButton { get; } = new()
	{
		Color = ThemeColor.Primary,
		Icon = BootstrapIcon.Fullscreen
	};

	public static ButtonSettings SecondaryButton { get; } = new()
	{
		Color = ThemeColor.Secondary,
		Outline = true
	};

	public static ButtonSettings CloseButton { get; } = new()
	{
		Color = ThemeColor.Danger,
		Outline = true,
		Icon = BootstrapIcon.XLg
	};
}

Precedence #

When the component decides what parameter value to stick to, it follows this flow: parameter > Settings > Defaults, which means that if the parameter property is not set (null), then the value is taken from the Settings, if it is also not set (null), then the value is taken from the application-wide Defaults.

@* The color specified in settings is overriden by the directly set parameter -> ColorEffective is ThemeColor.Danger. *@
<HxButton Settings="settings" Color="ThemeColor.Danger" Text="Fullscreen" />

@* Although Settings are set, the directly set parameters have higher priority, so the button has no outline and the icon is set to the BS icon Door. *@
<HxButton Settings="settings" Outline="false" Icon="BootstrapIcon.DoorClosed" Text="Open" />

@code {
    private ButtonSettings settings = new()
        {
            Color = ThemeColor.Primary,
            Icon = BootstrapIcon.Fullscreen,
            Outline = true
        };
}
An unhandled error has occurred. Reload 🗙