Defaults and Settings

Although most components support the presented functionalities, some components were constructed without settings or defaults because they wouldn't add sufficient value.

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;

Global Defaults #

There are a few defaults which you can set above all components on a global level. Use the static property HxSetup.Defaults to set their values. Refer to GlobalSettings for more information.

HxSetup.Defaults.InputSize = InputSize.Large;
HxSetup.Defaults.LabelType = LabelType.Floating;

Where to set #

Defaults can be set anywhere in 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 #

Besides Defaults, you can set the Settings parameter on every single component instance (the data structure behind Defaults 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 an 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 > component Defaults > global Defaults. This 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 overridden 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
        };
}