Skip to content

Commit 957c94b

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3770 doc(#I6AS5N): update multiselect demos
* update multiselect demos * format code * detach sample code
1 parent 293bbf2 commit 957c94b

40 files changed

Lines changed: 1277 additions & 648 deletions

‎src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectBindingCollection.razor‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@inject IStringLocalizer<MultiSelectBindingCollection> Localizer
2+
3+
<div>
4+
<div class="row g-3">
5+
<div class="col-12 col-sm-6">
6+
<MultiSelect Items="@Items" @bind-Value="@SelectedArrayValues" Max="4" Min="2" />
7+
</div>
8+
<div class="col-12 col-sm-6">
9+
<Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectBindingCollectionAdd"]" OnClick="@AddListItems" class="me-1" />
10+
<Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectBindingCollectionDecrease"]" OnClick="@RemoveListItems" />
11+
<Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectBindingCollectionClean"]" OnClick="@ClearListItems" />
12+
</div>
13+
</div>
14+
<div class="mt-3">@(string.Join(",", SelectedArrayValues))</div>
15+
</div>
16+
17+
@code {
18+
[NotNull]
19+
private List<SelectedItem>? Items { get; set; }
20+
21+
[NotNull]
22+
private List<SelectedItem>? DataSource { get; set; }
23+
24+
/// <summary>
25+
/// OnInitalized
26+
/// </summary>
27+
protected override void OnInitialized()
28+
{
29+
base.OnInitialized();
30+
31+
// 初始化数据
32+
DataSource = new List<SelectedItem>
33+
{
34+
new SelectedItem ("Beijing", "北京"),
35+
new SelectedItem ("Shanghai", "上海"),
36+
new SelectedItem ("Guangzhou", "广州")
37+
};
38+
39+
Items = GenerateDataSource(DataSource);
40+
}
41+
42+
private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
43+
44+
private IEnumerable<string> SelectedArrayValues { get; set; } = Enumerable.Empty<string>();
45+
46+
private void AddListItems()
47+
{
48+
SelectedArrayValues = "Beijing,Shanghai".Split(',');
49+
}
50+
51+
private void RemoveListItems()
52+
{
53+
SelectedArrayValues = new[] { "Beijing" };
54+
}
55+
56+
private void ClearListItems()
57+
{
58+
SelectedArrayValues = Enumerable.Empty<string>();
59+
}
60+
}

src/BootstrapBlazor.Shared/Samples/MultiSelects.razor.css renamed to src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectBindingCollection.razor.css

File renamed without changes.

‎src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectBindingEnumCollection.razor‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div>
2+
<MultiSelect @bind-Value="@SelectedEnumValues" />
3+
<div class="mt-3">@(string.Join(",", SelectedEnumValues))</div>
4+
</div>
5+
6+
@code {
7+
private IEnumerable<EnumEducation> SelectedEnumValues { get; set; } = new List<EnumEducation>
8+
{
9+
EnumEducation.Middle, EnumEducation.Primary
10+
};
11+
}

‎src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectBindingEnumCollection.razor.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.mul-select-item {
2+
display: flex;
3+
flex: 1;
4+
align-items: center;
5+
margin: 0 0.5rem;
6+
}
7+
8+
.mul-select-item span {
9+
flex: 1;
10+
margin-left: 0.5rem;
11+
}

‎src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectBindingNumber.razor‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
@inject IStringLocalizer<MultiSelectBindingNumber> Localizer
2+
3+
<div>
4+
<div class="row g-3">
5+
<div class="col-12 col-sm-6">
6+
<MultiSelect Items="@LongItems" @bind-Value="@SelectedIntArrayValues" />
7+
</div>
8+
<div class="col-12 col-sm-6">
9+
<Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectBindingNumberAdd"]" OnClick="@AddArrayItems" class="me-1" />
10+
<Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectBindingNumberDecrease"]" OnClick="@RemoveArrayItems" />
11+
<Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectBindingNumberClean"]" OnClick="@ClearArrayItems" />
12+
</div>
13+
</div>
14+
<div class="mt-3">@(string.Join(",", SelectedIntArrayValues))</div>
15+
</div>
16+
17+
@code {
18+
[NotNull]
19+
private List<SelectedItem>? LongItems { get; set; }
20+
21+
[NotNull]
22+
private List<SelectedItem>? LongDataSource { get; set; }
23+
24+
private int[] SelectedIntArrayValues { get; set; } = Array.Empty<int>();
25+
26+
/// <summary>
27+
/// OnInitialized
28+
/// </summary>
29+
protected override void OnInitialized()
30+
{
31+
base.OnInitialized();
32+
33+
LongDataSource = new List<SelectedItem>
34+
{
35+
new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
36+
new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
37+
new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
38+
new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
39+
new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
40+
new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
41+
new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
42+
new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
43+
new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
44+
};
45+
46+
LongItems = GenerateDataSource(LongDataSource);
47+
}
48+
49+
private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
50+
51+
private void AddArrayItems()
52+
{
53+
SelectedIntArrayValues = new[] { 1, 2, 3, 4 };
54+
}
55+
56+
private void RemoveArrayItems()
57+
{
58+
SelectedIntArrayValues = new[] { 1, 2, };
59+
}
60+
61+
private void ClearArrayItems()
62+
{
63+
SelectedIntArrayValues = Array.Empty<int>();
64+
}
65+
}

‎src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectBindingNumber.razor.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.mul-select-item {
2+
display: flex;
3+
flex: 1;
4+
align-items: center;
5+
margin: 0 0.5rem;
6+
}
7+
8+
.mul-select-item span {
9+
flex: 1;
10+
margin-left: 0.5rem;
11+
}

‎src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectBindingString.razor‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@inject IStringLocalizer<MultiSelectBindingString> Localizer
2+
3+
<div>
4+
<div class="row g-3">
5+
<div class="col-12 col-sm-6">
6+
<MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" />
7+
</div>
8+
<div class="col-12 col-sm-6">
9+
<Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectBindingStringAdd"]" OnClick="@AddItems" class="me-1" />
10+
<Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectBindingStringDecrease"]" OnClick="@RemoveItems" />
11+
<Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectBindingStringClean"]" OnClick="@ClearItems" />
12+
</div>
13+
</div>
14+
<div class="mt-3">@SelectedItemsValue</div>
15+
</div>
16+
17+
@code {
18+
[NotNull]
19+
private List<SelectedItem>? Items { get; set; }
20+
21+
[NotNull]
22+
private List<SelectedItem>? DataSource { get; set; }
23+
24+
private string SelectedItemsValue { get; set; } = "Beijing";
25+
26+
/// <summary>
27+
/// OnInitialized 方法
28+
/// </summary>
29+
protected override void OnInitialized()
30+
{
31+
base.OnInitialized();
32+
33+
// 初始化数据
34+
DataSource = new List<SelectedItem>
35+
{
36+
new SelectedItem ("Beijing", "北京"),
37+
new SelectedItem ("Shanghai", "上海"),
38+
new SelectedItem ("Guangzhou", "广州")
39+
};
40+
41+
Items = GenerateDataSource(DataSource);
42+
}
43+
44+
private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
45+
46+
private void AddItems()
47+
{
48+
SelectedItemsValue = "Beijing,Shanghai,Guangzhou";
49+
}
50+
51+
private void RemoveItems()
52+
{
53+
SelectedItemsValue = "Beijing";
54+
}
55+
56+
private void ClearItems()
57+
{
58+
SelectedItemsValue = "";
59+
}
60+
}

‎src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectBindingString.razor.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.mul-select-item {
2+
display: flex;
3+
flex: 1;
4+
align-items: center;
5+
margin: 0 0.5rem;
6+
}
7+
8+
.mul-select-item span {
9+
flex: 1;
10+
margin-left: 0.5rem;
11+
}

‎src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectButton.razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div style="max-width: 400px">
2+
<MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" ShowToolbar="true" ShowSearch="true" />
3+
<p>@SelectedLongItemsValue</p>
4+
</div>
5+
6+
@code {
7+
[NotNull]
8+
private List<SelectedItem>? LongItems { get; set; }
9+
10+
[NotNull]
11+
private List<SelectedItem>? LongDataSource { get; set; }
12+
13+
private string SelectedLongItemsValue { get; set; } = "";
14+
15+
/// <summary>
16+
/// OnInitialized
17+
/// </summary>
18+
protected override void OnInitialized()
19+
{
20+
base.OnInitialized();
21+
22+
LongDataSource = new List<SelectedItem>
23+
{
24+
new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
25+
new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
26+
new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
27+
new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
28+
new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
29+
new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
30+
new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
31+
new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
32+
new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
33+
};
34+
35+
LongItems = GenerateDataSource(LongDataSource);
36+
}
37+
38+
private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
39+
}

‎src/BootstrapBlazor.Shared/Demos/MultiSelect/MultiSelectButton.razor.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.mul-select-item {
2+
display: flex;
3+
flex: 1;
4+
align-items: center;
5+
margin: 0 0.5rem;
6+
}
7+
8+
.mul-select-item span {
9+
flex: 1;
10+
margin-left: 0.5rem;
11+
}

0 commit comments

Comments
 (0)