Blazorise ColorEdit component

Basic

In this example for Blazorise, the ColorEdit component is utilized to provide a color selection interface. It's bound to a colorValue variable via the @bind-Color directive. Initially set to red (#ff0000, this colorValue automatically updates to reflect the user's color selection made through the ColorEdit component, showcasing a straightforward way to integrate color picking functionality into a Blazor application.

<ColorEdit @bind-Color="@colorValue" />

@code {
    string colorValue = "#ff0000";
}

Sizes

In the provided example, two ColorEdit components in a Blazorise application are showcased, each with a distinct Size attribute. The first ColorEdit is configured with Size="Size.Small", making it smaller in appearance, and the second is set with Size="Size.Large", resulting in a larger size. This demonstrates the flexibility of the ColorEdit component in Blazorise, where the Size attribute can be adjusted to control the component's display size according to the application's design requirements.

<Field>
    <ColorEdit Color="#888888" Size="Size.Small" />
</Field>
<Field>
    <ColorEdit Color="#444444" Size="Size.Large" />
</Field>

Disabled

In this Blazorise example, the ColorEdit component is demonstrated with the Disabled attribute. The addition of the Disabled attribute renders the ColorEdit component non-interactive, meaning the user will not be able to change the color value presented. This is useful in scenarios where you want to display a color but prevent any user interaction, such as in view-only forms or to maintain consistency in certain UI states.

<ColorEdit Color="#888888" Disabled />