Custom Blazorise Color

[samuelhurni]

Hello Together

I want to set a custom Color for an Item if I click this Item. Fot this I have a method which will change the Selected attribute and also change the color. But now I want to set a custom hex color to the attribute "SelectedColor"

How can I define such a custom Blazorise.Color?

   
       private async Task ItemClicked(ProductConfigDTO selectConfig)
       {
              selectConfig.Selected = !selectConfig.Selected;
      
              if (selectConfig.Selected)
              {
                  selectConfig.SelectedColor = Blazorise.Color.Primary;
              }
              else
              {
                  selectConfig.SelectedColor = Blazorise.Color.Default;
              }
              StateHasChanged();
       }

Thanks and regards

Samuel

[stsrki]

SelectedColor is the special Blazorise type, so it mostly has a predefined set it colors names. But it also supports for naming the custom colors via an implicit string operator. You still cannot define it as HEX, though.

First, define a color in CSS.

.my-special-color
{
  background-color: #ff0000;
}

then assign it in code

selectConfig.SelectedColor = "my-special-color";

[samuelhurni]

Hi,

I tested it and in my example, it doesn't work.

`@page "/orders"

<style>
    .my-special-color {
        background-color: #FFCC66;
    }
</style>`

` if (selectConfig.Selected)
        {
            selectConfig.SelectedColor = "my-special-color";
        }
        else
        {
            selectConfig.SelectedColor = Blazorise.Color.Primary;;
        }`

I think the reason is, because I define the SelectedColor in an Object of each list group element. That is the only way to allow multiple selection in List group item.

Here a little bit more Code to understand my topic:

List Group Item:

`                        <ListGroup Flush="true" >
                            @if (selectedOrderDetail.ProductConfigs != null)
                                {
                                    @foreach (var config in selectedOrderDetail.ProductConfigs )
                                    {
                                        <ListGroupItem Name="@config.ConfigId.ToString()" Clicked="() => ItemClicked(config)" 
                                          Color="config.SelectedColor"  Border="Border.Dark.OnAll.Rounded" Margin="Margin.Is2" >                
                                            <Heading Size="HeadingSize.Is5" Margin="Margin.Is1.FromBottom">@config.Product.Name</Heading>     
                                            <Divider></Divider>
                                            <Row>
                                               <Column>`

Method if a List group item is clicked:

` private async Task ItemClicked(ProductConfigDTO selectConfig)
    {
        System.Drawing.Color color = System.Drawing.ColorTranslator.FromHtml("#FFCC66");
        selectConfig.Selected = !selectConfig.Selected;

        if (selectConfig.Selected)
        {
            selectConfig.SelectedColor = "my-special-color";
        }
        else
        {
            selectConfig.SelectedColor = Blazorise.Color.Primary;;
        }
        StateHasChanged();
}`

Object of List group items:

` public class ProductConfigDTO
    {
        [Key]
        public int ConfigId { get; set; }

        public Color SelectedColor { get; set; } = Blazorise.Color.Secondary;

        public bool Selected { get; set; }

        public string Comment { get; set; }
        [Required]
        public int Quantity { get; set; }`

So I need a solution how I can set a Blazorise.Color Object with a customized color.

[GevorDanielyan]

Hello everyone.

In my opinion you need to pass the hex color code string directly to the constructor of the Color class, like this:
new Blazorise.Color("#FFCC66")

So the correct solution I think will be this(sorry if I will wrong 😃 ).

private async Task ItemClicked(ProductConfigDTO selectConfig)
    {
        selectConfig.Selected = !selectConfig.Selected;

        if (selectConfig.Selected)
        {
            selectConfig.SelectedColor = new Blazorise.Color("#FFCC66");
        }
        else
        {
            selectConfig.SelectedColor = Blazorise.Color.Primary;
        }
        StateHasChanged();
    }

Let me know if it works.

[samuelhurni]

Hello

I tested it and it doesn't work.

When I clicked the item it is going to a white background instead of my selected colour.

Does everyone have another solution?

Regards Samuel