MudBlazor - Blazor Component Library

Basic Usage

Basic Color Picker

<MudColorPicker Label="Basic Color Picker" @bind-Text="_colorValue" Style="@($"color: {_colorValue};")" Placeholder="Select Color" />

@code {
    private string _colorValue;
}

Parts

All parts of the color picker can be removed individually if you just want certain functionality.

R

G

B

A

Options

Disable Toolbar

Disable Alpha

Disable Color Field

Disable Preview

Disable Sliders

Disable Inputs

Disable Mode Switch

Color Picker Mode

<MudGrid>
    <MudItem md="8" Class="d-flex justify-center">
        <MudColorPicker DisableToolbar="DisableToolbar" DisableAlpha="DisableAlpha" DisableColorField="DisableColorField" DisablePreview="DisablePreview" DisableSliders="DisableSliders" DisableInputs="DisableInputs" DisableModeSwitch="DisableModeSwitch" ColorPickerMode="ColorPickerMode" PickerVariant="PickerVariant.Static" />
    </MudItem>
    <MudItem md="4">
        <MudPaper Height="400px" Class="px-4 pt-2 pb-4">
            <MudText Typo="Typo.h6">Options</MudText>
            <MudCheckBox @bind-Checked="@DisableToolbar" Label="Disable Toolbar" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableAlpha" Label="Disable Alpha" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableColorField" Label="Disable Color Field" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisablePreview" Label="Disable Preview" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableSliders" Label="Disable Sliders" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableInputs" Label="Disable Inputs" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableModeSwitch" Label="Disable Mode Switch" Color="Color.Primary" Dense="true" />
            <MudSelect Label="Color Picker Mode" Variant="Variant.Outlined" Dense="true" Margin="Margin.Dense" @bind-Value="ColorPickerMode" Class="mt-4">
                <MudSelectItem T="ColorPickerMode" Value="ColorPickerMode.RGB">RGB</MudSelectItem>
                <MudSelectItem T="ColorPickerMode" Value="ColorPickerMode.HSL">HSL</MudSelectItem>
                <MudSelectItem T="ColorPickerMode" Value="ColorPickerMode.HEX">HEX</MudSelectItem>
            </MudSelect>
        </MudPaper>
    </MudItem>
</MudGrid>

@code {
    public bool DisableToolbar { get; set; } = true;
    public bool DisableAlpha { get; set; }
    public bool DisableColorField { get; set; }
    public bool DisablePreview { get; set; }
    public bool DisableSliders { get; set; }
    public bool DisableInputs { get; set; }
    public bool DisableModeSwitch { get; set; }

    public ColorPickerMode ColorPickerMode { get; set; }
}

Color Picker View

The default view can be changed with ColorPickerView and can be useful when you want a minimalistic color picker or force the use of certain colors.

Spectrum

Palette

Grid

Compact Grid

<MudColorPicker Label="Spectrum" ColorPickerView="ColorPickerView.Spectrum" />
<MudColorPicker Label="Palette" ColorPickerView="ColorPickerView.Palette" />
<MudColorPicker Label="Grid" ColorPickerView="ColorPickerView.Grid" />
<MudColorPicker Label="Compact Grid" ColorPickerView="ColorPickerView.GridCompact" />

Color Picker Mode

You can set the default mode of the colorpicker with the ColorPickerMode prop. This can be useful combined with DisableModeSwitch to force the usage of a specific color mode.

HSL

<MudColorPicker Label="HSL" ColorPickerMode="ColorPickerMode.HSL" DisableModeSwitch="true" />

Custom Palette

The default palette can be changed with Palette property. The first five colors show up in the quick view when clicking the color preview dot.

R

G

B

A

@using MudBlazor.Utilities

<MudColorPicker PickerVariant="PickerVariant.Static" ColorPickerView="ColorPickerView.Palette" Palette="CustomPalette" />

@code {
    public IEnumerable<MudColor> CustomPalette { get; set; } = new MudColor[]
    {
        "#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5",
        "#FFEBEE", "#FCE4EC", "#F3E5F5", "#EDE7F6", "#E8EAF6",
        "#FFCDD2", "#F8BBD0", "#E1BEE7", "#D1C4E9", "#C5CAE9",
        "#EF9A9A", "#F48FB1", "#CE93D8", "#B39DDB", "#9FA8DA",
        "#E57373", "#F06292", "#BA68C8", "#9575CD", "#7986CB",
        "#EF5350", "#EC407A", "#AB47BC", "#7E57C2", "#5C6BC0",
        "#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB"
    };
}

Alpha

You can disable the alpha slider and its textfield counterpart by setting DisableAlpha to true, doing so will remove any transparency from the color and output RGB, HSL, HEX instead of RGBA, HSLA and HEXA.

Disabled Alpha

<MudColorPicker Label="Disabled Alpha" DisableAlpha="true" />

Switch Mode

Switch Mode lets the user switch betwen RGB, HSL and HEX the button can be disabled with DisableModeSwitch set to true, this can be useful if you want to control what type of input/output should be used.

Switch Disabled

<MudColorPicker Label="Switch Disabled" DisableModeSwitch="true" />

Dialog Mode

Dialog Picker

<MudColorPicker DisableToolbar="false" Label="Dialog Picker" PickerVariant="PickerVariant.Dialog" />

Inline Mode

Dialog Picker

<MudColorPicker DisableToolbar="false" Label="Dialog Picker" PickerVariant="PickerVariant.Inline" />

Static Mode

R

G

B

A

<MudColorPicker PickerVariant="PickerVariant.Static" />

Elevation

You can change the elevation with the Elevation parameter. The default value is 0 for static and 8 for inline.

R

G

B

A

R

G

B

A

<MudColorPicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="1"/>
<MudColorPicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="12" />

Example Usage

R

G

B

A

Gradient Colors

Degrees

@using MudBlazor.Utilities


<MudPaper Elevation="0" Class="mud-width-full mud-height-full d-flex justify-center align-end pb-8" MinHeight="600px" Style="@($"background-image:linear-gradient({degrees}deg, {_gradientPrimary.ToString(MudColorOutputFormats.RGBA)} 0%, {_gradientSecondary.ToString(MudColorOutputFormats.RGBA)} 100%);")">
    <MudPaper Class="d-flex">
        <MudColorPicker Rounded="true" Class="rounded-tr-0" PickerVariant="PickerVariant.Static" DisableModeSwitch="true" Value="_pickerColor" ValueChanged="UpdateSelectedColor" />
        <div class="pa-2">
            <MudText Typo="Typo.h6" Class="mx-1">Gradient Colors</MudText>

            <MudList Clickable="true" SelectedItemChanged="ChangeSelectedColor">
                <MudListItem Text="1">
                    <div class="mud-width-full rounded py-4" style="@($"background-color:{_gradientPrimary};")"></div>
                </MudListItem>
                <MudListItem Text="2">
                    <div class="mud-width-full rounded py-4" style="@($"background-color:{_gradientSecondary};")"></div>
                </MudListItem>
            </MudList>
            <MudSlider Min="0" Max="360" Step="1" @bind-Value="@degrees" Class="px-2">Degrees</MudSlider>
        </div>
    </MudPaper>
</MudPaper>

@code {
    public MudColor _gradientPrimary = "#594AE2";
    public MudColor _gradientSecondary = "#FF4081";
    public MudColor _pickerColor = "#594AE2";

    int degrees = 90;

    bool _isFirstColor = true;

    public void ChangeSelectedColor(MudListItem item)
    {
        if (item.Text == "1")
        {
            _isFirstColor = true;
            _pickerColor = _gradientPrimary;
            UpdateSelectedColor(_gradientPrimary);
        }
        else if (item.Text == "2")
        {
            _isFirstColor = false;
            _pickerColor = _gradientSecondary;
            UpdateSelectedColor(_gradientSecondary);
        }
    }

    public void UpdateSelectedColor(MudColor value)
    {
        _pickerColor = value;

        if (_isFirstColor)
        {
            _gradientPrimary = value;
        }
        else
        {
            _gradientSecondary = value;
        }
    }
}

Disable Drag effect

In Spectrum mode, the color selector (circle) will follow the mouse. This is implemented by listening to the mouse move DOM event with an in-built throttle mechanism to prevent flooding events. However, there are occasions like long latency in Blazor Server-Side where this implementation hasn't the expected visual assistance. If DisableDragEffect is set to true, no events will be fired. Per default, the effect is enabled.

R

G

B

A

<MudColorPicker DisableDragEffect="true" PickerVariant="PickerVariant.Static" />

Color Picker

API

Basic Usage

Parts

Options

Color Picker View

Color Picker Mode

Custom Palette

Alpha

Switch Mode

Dialog Mode

Inline Mode

Static Mode

Elevation

Example Usage

Gradient Colors

Disable Drag effect