Skip to content

Commit 41cfa23

Browse files
PrinceOliverPrinceOliver
authored
Merge pull request #4929 from syncfusion-content/BLAZ-910110-StyleH1
910110: Update the localization section in Multi column documentation.
2 parents 179f1d3 + 815b9ba commit 41cfa23

File tree

6 files changed

+170
-0
lines changed

6 files changed

+170
-0
lines changed

‎blazor-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3431,6 +3431,7 @@
34313431
</li>
34323432
<li> <a href="/blazor/multicolumn-combobox/paging">Paging</a></li>
34333433
<li> <a href="/blazor/multicolumn-combobox/popup-setting">Popup Setting</a></li>
3434+
<li> <a href="/blazor/multicolumn-combobox/style">Style and Appearance</a></li>
34343435
<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
34353436
<li><a href="/blazor/multicolumn-combobox/localization">Localization</a></li>
34363437
<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>

‎blazor/multicolumn-combobox/code-snippet/style/cssclass-properties.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product" CssClass='@CssClass'></SfMultiColumnComboBox>
4+
@code {
5+
string CssClass { get; set; } = "e-success";
6+
public class Product
7+
{
8+
public string Name { get; set; }
9+
public decimal Price { get; set; }
10+
public string Availability { get; set; }
11+
public string Category { get; set; }
12+
public double Rating { get; set; }
13+
}
14+
private List<Product> Products = new List<Product>();
15+
private string Value { get; set; } = "Smartphone";
16+
protected override Task OnInitializedAsync()
17+
{
18+
Products = new List<Product>
19+
{
20+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
21+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
22+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }
23+
};
24+
return base.OnInitializedAsync();
25+
}
26+
}

‎blazor/multicolumn-combobox/code-snippet/style/disable-text-color.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" Disabled="true"></SfMultiColumnComboBox>
4+
@code {
5+
public class Product
6+
{
7+
public string Name { get; set; }
8+
public decimal Price { get; set; }
9+
public string Availability { get; set; }
10+
public string Category { get; set; }
11+
public double Rating { get; set; }
12+
}
13+
private List<Product> Products = new List<Product>();
14+
private string Value { get; set; } = "Smartphone";
15+
protected override Task OnInitializedAsync()
16+
{
17+
Products = new List<Product>
18+
{
19+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
20+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
21+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }
22+
};
23+
return base.OnInitializedAsync();
24+
}
25+
}
26+
<style>
27+
.e-input-group.e-control-wrapper .e-input[disabled] {
28+
-webkit-text-fill-color: #0d9133;
29+
}
30+
</style>

‎blazor/multicolumn-combobox/code-snippet/style/disabled-state.razor‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" Disabled="true"></SfMultiColumnComboBox>
4+
@code {
5+
public class Product
6+
{
7+
public string Name { get; set; }
8+
public decimal Price { get; set; }
9+
public string Availability { get; set; }
10+
public string Category { get; set; }
11+
public double Rating { get; set; }
12+
}
13+
private List<Product> Products = new List<Product>();
14+
private string Value { get; set; } = "Smartphone";
15+
protected override Task OnInitializedAsync()
16+
{
17+
Products = new List<Product>
18+
{
19+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
20+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
21+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }
22+
};
23+
return base.OnInitializedAsync();
24+
}
25+
}

‎blazor/multicolumn-combobox/code-snippet/style/readonly-mode.razor‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ReadOnly="true" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
4+
@code {
5+
public class Product
6+
{
7+
public string Name { get; set; }
8+
public decimal Price { get; set; }
9+
public string Availability { get; set; }
10+
public string Category { get; set; }
11+
public double Rating { get; set; }
12+
}
13+
private List<Product> Products = new List<Product>();
14+
private string Value { get; set; } = "Smartphone";
15+
protected override Task OnInitializedAsync()
16+
{
17+
Products = new List<Product>
18+
{
19+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
20+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
21+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }
22+
};
23+
return base.OnInitializedAsync();
24+
}
25+
}

‎blazor/multicolumn-combobox/style.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
layout: post
3+
title: Style and appearance in Syncfusion Blazor MultiColumn ComboBox
4+
description: Checkout and learn here all about Style and appearance in Syncfusion Blazor MultiColumn ComboBox component and more.
5+
platform: Blazor
6+
control: MultiColumn ComboBox
7+
documentation: ug
8+
---
9+
10+
# Style and appearance in Blazor MultiColumn ComboBox Component
11+
12+
The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
13+
14+
## Read-only mode
15+
16+
Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ReadOnly) whether the MultiColumn ComboBox allows the user to change the value or not.
17+
18+
{% highlight cshtml %}
19+
20+
{% include_relative code-snippet/style/readonly-mode.razor %}
21+
22+
{% endhighlight %}
23+
24+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVAiBLQUvNGLyuy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
25+
26+
## Disabled state
27+
28+
Specify the boolean value to the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Disabled) property that indicates whether the component is disabled or not.
29+
30+
{% highlight cshtml %}
31+
32+
{% include_relative code-snippet/style/disabled-state.razor %}
33+
34+
{% endhighlight %}
35+
36+
## CssClass
37+
38+
Specifies the CSS class name that can be appended to the root element of the MultiColumn ComboBox. One or more custom CSS classes can be added to a MultiColumn ComboBox.
39+
40+
Some of the possible values are:
41+
42+
* `e-success`: Denotes the component in a success state, adding a green color to the ComboBox input field.
43+
* `e-warning`: Denotes the component in a warning state, adding an orange color to the ComboBox input field.
44+
* `e-error`: Denotes the component in an error state, adding a red color to the ComboBox input field.
45+
* `e-outline`: Supports only the material theme.
46+
47+
{% highlight Razor %}
48+
49+
{% include_relative code-snippet/style/cssclass-properties.razor %}
50+
51+
{% endhighlight %}
52+
53+
## Customizing the disabled component’s text color
54+
55+
You can customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property.
56+
57+
{% highlight cshtml %}
58+
59+
{% include_relative code-snippet/style/disable-text-color.razor %}
60+
61+
{% endhighlight %}
62+
63+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVBwUFMudrwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

0 commit comments

Comments
 (0)