Skip to content

Commit 38c99fa

Browse files
gvreddy04gvreddy04
committed
Enum Input #1196 - Intital commit
1 parent 0611df8 commit 38c99fa

18 files changed

Lines changed: 507 additions & 13 deletions

‎BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
<ProjectReference Include="..\blazorbootstrap\BlazorBootstrap.csproj" />
2020
</ItemGroup>
2121

22+
<ItemGroup>
23+
<Folder Include="Components\Pages\Form\EnumInput\" />
24+
</ItemGroup>
25+
2226
<Target Name="EmbedDemos" BeforeTargets="PrepareForBuild">
2327
<!-- Let's embed demos sources into the assembly to show the source at runtime. -->
2428
<ItemGroup>

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,19 @@ internal override IEnumerable<NavItem> GetNavItems()
1818

1919
new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success },
2020
new (){ Id = "400", Text = "Auto Complete", Href = RouteConstants.Demos_AutoComplete_Documentation, IconName = IconName.InputCursorText, ParentId = "4" },
21-
new (){ Id = "400", Text = "Checkbox Input", Href = RouteConstants.Demos_CheckboxInput_Documentation, IconName = IconName.CheckSquareFill, ParentId = "4" },
22-
new (){ Id = "401", Text = "Currency Input", Href = RouteConstants.Demos_CurrencyInput_Documentation, IconName = IconName.CurrencyDollar, ParentId = "4" },
23-
new (){ Id = "402", Text = "Date Input", Href = RouteConstants.Demos_DateInput_Documentation, IconName = IconName.CalendarDate, ParentId = "4" },
24-
new (){ Id = "403", Text = "Number Input", Href = RouteConstants.Demos_NumberInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" },
25-
new (){ Id = "403", Text = "Password Input", Href = RouteConstants.Demos_PasswordInput_Documentation, IconName = IconName.EyeSlashFill, ParentId = "4" },
26-
new (){ Id = "403", Text = "Radio Input", Href = RouteConstants.Demos_RadioInput_Documentation, IconName = IconName.RecordCircle, ParentId = "4" },
27-
new (){ Id = "404", Text = "Range Input", Href = RouteConstants.Demos_RangeInput_Documentation, IconName = IconName.Sliders, ParentId = "4" },
21+
new (){ Id = "401", Text = "Checkbox Input", Href = RouteConstants.Demos_CheckboxInput_Documentation, IconName = IconName.CheckSquareFill, ParentId = "4" },
22+
new (){ Id = "402", Text = "Currency Input", Href = RouteConstants.Demos_CurrencyInput_Documentation, IconName = IconName.CurrencyDollar, ParentId = "4" },
23+
new (){ Id = "403", Text = "Date Input", Href = RouteConstants.Demos_DateInput_Documentation, IconName = IconName.CalendarDate, ParentId = "4" },
24+
new (){ Id = "404", Text = "Enum Input", Href = RouteConstants.Demos_EnumInput_Documentation, IconName = IconName.MenuButtonWideFill, ParentId = "4" },
25+
new (){ Id = "405", Text = "Number Input", Href = RouteConstants.Demos_NumberInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" },
26+
new (){ Id = "406", Text = "Password Input", Href = RouteConstants.Demos_PasswordInput_Documentation, IconName = IconName.EyeSlashFill, ParentId = "4" },
27+
new (){ Id = "407", Text = "Radio Input", Href = RouteConstants.Demos_RadioInput_Documentation, IconName = IconName.RecordCircle, ParentId = "4" },
28+
new (){ Id = "408", Text = "Range Input", Href = RouteConstants.Demos_RangeInput_Documentation, IconName = IconName.Sliders, ParentId = "4" },
2829
//new (){ Id = "404", Text = "Select Input", Href = RouteConstants.Demos_SelectInput_Documentation, IconName = IconName.MenuButtonWideFill, ParentId = "4" },
29-
new (){ Id = "405", Text = "Switch", Href = RouteConstants.Demos_Switch_Documentation, IconName = IconName.ToggleOn, ParentId = "4" },
30-
new (){ Id = "406", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" },
31-
new (){ Id = "407", Text = "Text Area Input", Href = RouteConstants.Demos_TextAreaInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" },
32-
new (){ Id = "408", Text = "Time Input", Href = RouteConstants.Demos_TimeInput_Documentation, IconName = IconName.ClockFill, ParentId = "4" },
30+
new (){ Id = "409", Text = "Switch", Href = RouteConstants.Demos_Switch_Documentation, IconName = IconName.ToggleOn, ParentId = "4" },
31+
new (){ Id = "410", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" },
32+
new (){ Id = "411", Text = "Text Area Input", Href = RouteConstants.Demos_TextAreaInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" },
33+
new (){ Id = "412", Text = "Time Input", Href = RouteConstants.Demos_TimeInput_Documentation, IconName = IconName.ClockFill, ParentId = "4" },
3334

3435
new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger },
3536
new (){ Id = "500", Text = "Accordion", Href = RouteConstants.Demos_Accordion_Documentation, IconName = IconName.ChevronBarExpand, ParentId = "5" },

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/EnumInput/EnumInputDocumentation.razor‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
@attribute [Route(pageUrl)]
2+
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
7+
8+
<PageHero Heading="@pageTitle">
9+
<LeadSection>@pageDescription</LeadSection>
10+
</PageHero>
11+
12+
<CarbonAds />
13+
14+
<Section Class="p-0" Size="HeadingSize.H3" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
15+
<Block>
16+
The <strong>EnumInput</strong> component displays enum values in a dropdown, allowing users to select from a predefined set of options.
17+
<br />
18+
<strong>How to use:</strong>
19+
<div class="content mb-2">
20+
<ol>
21+
<li>Define an <code>enum</code> representing your options.</li>
22+
<li>Add the <code>EnumInput</code> component to your page, specifying the <code>TEnum</code> type parameter.</li>
23+
<li>Bind the selected value using <code>@@bind-Value</code> or <code>@@bind-Text</code> as needed.</li>
24+
<li>Use the selected value or text in your logic as shown in the demo.</li>
25+
</ol>
26+
</div>
27+
This demo shows how to bind both the enum value and text, and how to display the selected result.
28+
</Block>
29+
<Demo Type="typeof(EnumInput_Demo_01_How_it_works)" Tabs="true" />
30+
</Section>
31+
32+
<Section Class="p-0" Size="HeadingSize.H3" Name="Sizes" PageUrl="@pageUrl" Link="Sizes">
33+
<Block>
34+
The <strong>EnumInput</strong> component can be rendered in various sizes to fit different UI requirements.
35+
<br />
36+
<strong>How to use:</strong>
37+
<div class="content mb-2">
38+
<ol>
39+
<li>Set the <code>Size</code> parameter to one of the <code>EnumInputSize</code> values (<code>Small</code>, <code>Normal</code>, <code>Large</code>).</li>
40+
<li>Bind the selected value as needed.</li>
41+
</ol>
42+
</div>
43+
This demo shows how to display EnumInput in different sizes for flexible layout integration.
44+
</Block>
45+
<Demo Type="typeof(EnumInput_Demo_03_Sizes)" Tabs="true" />
46+
</Section>
47+
48+
<Section Class="p-0" Size="HeadingSize.H3" Name="Disabled" PageUrl="@pageUrl" Link="disabled">
49+
<Block>
50+
The <strong>EnumInput</strong> component can be disabled to prevent user interaction.
51+
<br /><br />
52+
<strong>How to use:</strong>
53+
<div class="content mb-2">
54+
<ol>
55+
<li>Set the <code>Disabled</code> parameter to <code>true</code> to make the dropdown non-interactive.</li>
56+
<li>Bind the value as usual; the user will not be able to change it.</li>
57+
</ol>
58+
</div>
59+
This demo demonstrates how to render EnumInput in a disabled state.
60+
</Block>
61+
<Demo Type="typeof(EnumInput_Demo_06_Disabled)" Tabs="true" />
62+
</Section>
63+
64+
<Section Class="p-0" Size="HeadingSize.H3" Name="Events" PageUrl="@pageUrl" Link="events">
65+
<Block>
66+
The <strong>EnumInput</strong> component supports event callbacks for value and text changes, enabling custom logic when the selection changes.
67+
<br />
68+
<strong>How to use (ValueChanged):</strong>
69+
<div class="content mb-2">
70+
<ol>
71+
<li>Set the <code>Value</code> parameter and handle the <code>ValueChanged</code> event to respond to selection changes.</li>
72+
<li>Update your logic based on the new value in the event handler.</li>
73+
</ol>
74+
</div>
75+
This demo shows how to handle value changes using the ValueChanged event.
76+
</Block>
77+
<Demo Class="my-3" Type="typeof(EnumInput_Demo_07_Events_A_ValueChanged)" Tabs="true" />
78+
<Block>
79+
<strong>How to use (TextChanged):</strong>
80+
<div class="content mb-2">
81+
<ol>
82+
<li>Set the <code>Text</code> parameter and handle the <code>TextChanged</code> event to respond to text changes.</li>
83+
<li>Update your logic based on the new text in the event handler.</li>
84+
</ol>
85+
</div>
86+
This demo shows how to handle text changes using the TextChanged event.
87+
</Block>
88+
<Demo Type="typeof(EnumInput_Demo_07_Events_B_TextChanged)" Tabs="true" />
89+
</Section>
90+
91+
<Section Class="p-0" Size="HeadingSize.H3" Name="Mehods" PageUrl="@pageUrl" Link="methods">
92+
<Block>
93+
The <strong>EnumInput</strong> component can be enabled or disabled dynamically at runtime.
94+
<br />
95+
<strong>How to use:</strong>
96+
<div class="content mb-2">
97+
<ol>
98+
<li>Bind the <code>Disabled</code> parameter to a boolean property in your component.</li>
99+
<li>Update the property in your code (e.g., via button click) to enable or disable the EnumInput as needed.</li>
100+
</ol>
101+
</div>
102+
This demo demonstrates how to programmatically enable or disable the EnumInput component.
103+
</Block>
104+
<Demo Type="typeof(EnumInput_Demo_08_Methods_Enable_Disable)" Tabs="true" />
105+
</Section>
106+
107+
@code {
108+
private const string pageUrl = RouteConstants.Demos_EnumInput_Documentation;
109+
private const string pageTitle = "Blazor EnumInput";
110+
private const string pageDescription = "The Blazor Bootstrap EnumInput component renders a dropdown list from an enumeration (enum), enabling users to select from a predefined set of options. It simplifies data entry by binding directly to enum types and supports customization with colors, sizes, and states.";
111+
private const string metaTitle = "Blazor EnumInput Component";
112+
private const string metaDescription = "The Blazor Bootstrap EnumInput component renders a dropdown list from an enumeration (enum), enabling users to select from a predefined set of options. It simplifies data entry by binding directly to enum types and supports customization with colors, sizes, and states.";
113+
private const string imageUrl = "https://i.imgur.com/1mVjqQv.png";
114+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/EnumInput/EnumInput_Demo_01_How_it_works.razor‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<EnumInput TEnum="Status" @bind-Value="@selectedStatusValue" />
2+
<div class="mb-3">Selected value: @selectedStatusValue</div>
3+
4+
<EnumInput TEnum="Status" @bind-Text="@selectedStatusText" />
5+
<div class="mb-3">Selected text: @selectedStatusText</div>
6+
7+
@code {
8+
private int selectedStatusValue;
9+
private string? selectedStatusText;
10+
11+
override protected void OnInitialized()
12+
{
13+
selectedStatusValue = (int)Status.Pending;
14+
selectedStatusText = Status.Inactive.ToString();
15+
}
16+
17+
public enum Status
18+
{
19+
Active,
20+
Inactive,
21+
Pending
22+
}
23+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/EnumInput/EnumInput_Demo_03_Sizes.razor‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<EnumInput TEnum="Status" Class="mb-3" @bind-Value="@value1" />
2+
<EnumInput TEnum="Status" Size="EnumInputSize.Small" Class="mb-3" @bind-Value="@value2" />
3+
<EnumInput TEnum="Status" Size="EnumInputSize.Normal" Class="mb-3" @bind-Value="@value3" />
4+
<EnumInput TEnum="Status" Size="EnumInputSize.Large" @bind-Value="@value5" />
5+
6+
@code {
7+
private int value1 = (int)Status.Pending;
8+
private int value2 = (int)Status.Pending;
9+
private int value3 = (int)Status.Pending;
10+
private int value4 = (int)Status.Pending;
11+
private int value5 = (int)Status.Pending;
12+
13+
public enum Status
14+
{
15+
Active,
16+
Inactive,
17+
Pending
18+
}
19+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/EnumInput/EnumInput_Demo_06_Disabled.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<EnumInput TEnum="Status" @bind-Value="@value1" Disabled="true" />
2+
3+
@code {
4+
private int value1 = (int)Status.Pending;
5+
6+
public enum Status
7+
{
8+
Active,
9+
Inactive,
10+
Pending
11+
}
12+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/EnumInput/EnumInput_Demo_07_Events_A_ValueChanged.razor‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<EnumInput TEnum="Status" Class="mb-3" Value="@value1" ValueChanged="OnValueChanged" />
2+
<div>Selected value: @value1</div>
3+
4+
@code {
5+
private int value1 = (int)Status.Pending;
6+
7+
private void OnValueChanged(int value)
8+
{
9+
value1 = value;
10+
11+
if (value == (int)Status.Active)
12+
{
13+
// Do something when the value is Active
14+
}
15+
else if (value == (int)Status.Inactive)
16+
{
17+
// Do something when the value is Inactive
18+
}
19+
else if (value == (int)Status.Pending)
20+
{
21+
// Do something when the value is Pending
22+
}
23+
}
24+
25+
public enum Status
26+
{
27+
Active,
28+
Inactive,
29+
Pending
30+
}
31+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/EnumInput/EnumInput_Demo_07_Events_B_TextChanged.razor‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<EnumInput TEnum="Status" Class="mb-3" Text="@text1" TextChanged="OnTextChanged" />
2+
<div>Selected text: @text1</div>
3+
4+
@code {
5+
private string text1 = Status.Pending.ToString();
6+
7+
private void OnTextChanged(string value)
8+
{
9+
text1 = value;
10+
11+
if (value == "Active")
12+
{
13+
// Do something when the text is "Active"
14+
}
15+
else if (value == "Inactive")
16+
{
17+
// Do something when the text is "Inactive"
18+
}
19+
else if (value == "Pending")
20+
{
21+
// Do something when the text is "Pending"
22+
}
23+
}
24+
25+
public enum Status
26+
{
27+
Active,
28+
Inactive,
29+
Pending
30+
}
31+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/EnumInput/EnumInput_Demo_08_Methods_Enable_Disable.razor‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<EnumInput TEnum="Status" Class="mb-3" @bind-Value="@value1" Disabled="isDisabled" />
2+
3+
<Buttons Size="ButtonSize.Small" Class="mt-3">
4+
<Button Color="ButtonColor.Primary" @onclick="EnableInput">Enable</Button>
5+
<Button Color="ButtonColor.Danger" @onclick="DisableInput">Disable</Button>
6+
</Buttons>
7+
8+
@code {
9+
private bool isDisabled = true;
10+
private int value1 = (int)Status.Pending;
11+
12+
private void EnableInput()
13+
{
14+
isDisabled = false;
15+
}
16+
17+
private void DisableInput()
18+
{
19+
isDisabled = true;
20+
}
21+
22+
public enum Status
23+
{
24+
Active,
25+
Inactive,
26+
Pending
27+
}
28+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,11 @@
115115
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MenuButtonWideFill" class="me-2" /> Dropdown</h4>
116116
</a>
117117
</div>
118+
<div class="col-sm-4 mb-2">
119+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_EnumInput_Documentation">
120+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MenuButtonWideFill" class="me-2" /> Enum Input <Badge Color="BadgeColor.Danger">New</Badge></h4>
121+
</a>
122+
</div>
118123
<div class="col-sm-4 mb-2">
119124
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_GoogleMap_Documentation">
120125
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Map" class="me-2" /> Google Map</h4>
@@ -299,6 +304,11 @@
299304
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CalendarDate" class="me-2" /> Date Input</h4>
300305
</a>
301306
</div>
307+
<div class="col-sm-4 mb-2">
308+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_EnumInput_Documentation">
309+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MenuButtonWideFill" class="me-2" /> Enum Input <Badge Color="BadgeColor.Danger">New</Badge></h4>
310+
</a>
311+
</div>
302312
<div class="col-sm-4 mb-2">
303313
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_NumberInput_Documentation">
304314
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursor" class="me-2" /> Number Input</h4>

0 commit comments

Comments
 (0)