Changing theme color

If you followed the startup guide then you have already applied a base Hedin.UI theme.

<HUIThemeProvider Theme="HUITheme.Dark" />
                

Each application however has its own custom theme. The main thing separating each app is the primary color. All parameters can be overridden, but as a baseline you should only change the primary color

 <HUIThemeProvider Theme="_currentTheme" />


 code:
 private bool _darkMode = true;

 private MudTheme _currentTheme => _darkMode
 ? HUITheme.Dark.Override(customizePalette)
 : HUITheme.Light.Override(customizePalette);

 Action<Palette> customizePalette = palette =>
 {
     palette.Primary = "#1E7194";
     palette.PrimaryLighten = palette.Primary.ColorLighten(0.125).Value;
     palette.PrimaryDarken = palette.Primary.ColorDarken(0.125).Value;
     palette.TableHover = palette.Primary;
     //All theme colors can be customized here
 };
                

If you are creating your own MudTheme, then use the PalletDark colors. (even if the theme is light based.)

Page routing

Prefferably use the HUIPageSettings attribute on each page to set and automatically build the menu

At a routable component: provide these attributes (example)

 @attribute[Route(PageRoute.Guidelines)]
 @attribute[HUIPageSettings("Guidelines", "", 3)]
                

Menu

Check the HUINavMenu component doc and see how the IHUIPageHelper service may be utilized to automatically build the menu for you

General

All inputs, wether its text fields, selects, autocomplets, datepickers and so on shold in general be tagged with the attributes:

Margin="Margin.Dense" Variant="Variant.Outlined"

Selects

All selects should set the attribte AnchorOrigin="Origin.BottomCenter"

Data grid settings

The HUIDataGrid grid is built over MudDataGrid. It is very flexible but also comes with some limitations.

Adding dynamic context menu

It is possible to set the EnableSettingsMenu and Id parameter in order to show the context menu. The datagrid needs to exist within a HUIPageTable

<HUIDataGrid Id="unique-id" EnableSettingsMenu="true" ...>
                

Hardcoded parameters such as Hidden on column properties does not work in conjunction with the context menu.

<Column @bind-Hidden="_myProp" ...>
                

<Column Hidden="true" ...>
                

<Column ...>
                

Clear settings

To clear any user-settings stored by Hedin.UI, inject the HUISettingsService

@inject IHUISettingsService HUISettingsService
<HUIButton Color="Color.Primary" Variant="Variant.Filled" OnClick="() => HUISettingsService.ResetAsync()">Reset</HUIButton>
                

This includes settings such as localstorage, which is where table settings are stored and loaded from.

Enable state service

Hedin.UI comes with a generic state service that can be injected to store a pages state in memory.

Currently the the state is only stored between subpages when navigating backwards.

It is important to utilize a ViewModel for your component.

public class PageModel
{
    public string MyProp { get; set; }
}
                

Now inherit from StatefulComponentBase and type it with your ViewModel.

You may access your view model on the "Model" object.

@inherits StatefulComponentBase<PageModel>

<MudTextField Variant="Variant.Outlined" Margin="Margin.Dense" @bind-Value="Model.MyProp"></MudTextField>
                

Demo

CSS helper classes

            <HUIButton Variant="Variant.Outlined" StartIcon="@HUIIcons.Flags.NO">Norway</HUIButton>
            <HUIButton Variant="Variant.Outlined" StartIcon="@HUIIcons.Flags.Get("DK")">Denmark</HUIButton>
            <HUIButton Variant="Variant.Outlined" StartIcon="@HUIIcons.Flags.GetFromCulture(CultureInfo.CurrentCulture.Name)">From culture</HUIButton>