Skip to content

Commit 34726d9

Browse files
gvreddy04gvreddy04
authored
Form components (#978)
* New Form Components (CheckboxInput, RadioInput, TextInput, TextAreaInput) * Removed IConfiguration dependency
1 parent fbc0fd8 commit 34726d9

File tree

53 files changed

+1449
-556
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1449
-556
lines changed

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

+71-66
Large diffs are not rendered by default.

‎BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor

-26
This file was deleted.

‎BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChat_Demo_01_Examples.razor

-4
This file was deleted.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@page "/checkbox-input"
2+
3+
@attribute [Route(pageUrl)]
4+
5+
<PageMetaTags PageUrl="@pageUrl"
6+
Title="@metaTitle"
7+
Description="@metaDescription"
8+
ImageUrl="@imageUrl" />
9+
10+
<PageHero Heading="@pageTitle">
11+
<LeadSection>@pageDescription</LeadSection>
12+
</PageHero>
13+
14+
<CarbonAds />
15+
16+
<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
17+
<Demo Type="typeof(CheckboxInput_Demo_01_Basic_Usage)" Tabs="true" />
18+
</Section>
19+
20+
<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
21+
<div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>CheckboxInput</code>.</div>
22+
<Demo Type="typeof(CheckboxInput_Demo_02_Disable_A)" Tabs="false" />
23+
<div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>CheckboxInput</code>.</div>
24+
<Callout Color="CalloutColor.Warning" Heading="NOTE">
25+
Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
26+
</Callout>
27+
<Demo Type="typeof(CheckboxInput_Demo_02_Disable_B)" Tabs="false" />
28+
</Section>
29+
30+
<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
31+
<div class="mb-3">This event fires when the <code>CheckboxInput</code> value changes, but not on every keystroke.</div>
32+
<Demo Type="typeof(CheckboxInput_Demo_03_Events_ValueChanged)" Tabs="true" />
33+
</Section>
34+
35+
@code {
36+
private const string pageUrl = RouteConstants.Demos_CheckboxInput_Documentation;
37+
private const string pageTitle = "Blazor CheckboxInput";
38+
private const string pageDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.";
39+
private const string metaTitle = "Blazor CheckboxInput Component";
40+
private const string metaDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.";
41+
private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
42+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<CheckboxInput Label="Default checkbox" @bind-Value="isChecked" />
2+
<CheckboxInput Label="Checked checkbox" @bind-Value="isChecked2" />
3+
4+
@code
5+
{
6+
private bool isChecked;
7+
private bool isChecked2 = true;
8+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_A.razor

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<CheckboxInput Label="Default checkbox" @bind-Value="isChecked" Disabled="disabled" />
2+
<CheckboxInput Label="Checked checkbox" @bind-Value="isChecked2" Disabled="disabled" />
3+
4+
<div class="mt-3">
5+
<Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
6+
<Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
7+
<Button Color="ButtonColor.Warning" Size="ButtonSize.ExtraSmall" @onclick="Toggle"> Toggle </Button>
8+
</div>
9+
10+
@code
11+
{
12+
private bool isChecked;
13+
private bool isChecked2 = true;
14+
15+
private bool disabled = true;
16+
17+
private void Enable() => disabled = false;
18+
19+
private void Disable() => disabled = true;
20+
21+
private void Toggle() => disabled = !disabled;
22+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_B.razor

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<CheckboxInput @ref="checkboxInputRef1" Label="Default checkbox" @bind-Value="isChecked" />
2+
<CheckboxInput @ref="checkboxInputRef2" Label="Checked checkbox" @bind-Value="isChecked2" />
3+
4+
<div class="mt-3">
5+
<Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
6+
<Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
7+
</div>
8+
9+
@code
10+
{
11+
private CheckboxInput? checkboxInputRef1;
12+
private CheckboxInput? checkboxInputRef2;
13+
14+
private bool isChecked;
15+
private bool isChecked2 = true;
16+
17+
private void Disable()
18+
{
19+
checkboxInputRef1.Disable();
20+
checkboxInputRef2.Disable();
21+
}
22+
23+
private void Enable()
24+
{
25+
checkboxInputRef1.Enable();
26+
checkboxInputRef2.Enable();
27+
}
28+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_03_Events_ValueChanged.razor

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<CheckboxInput Label="Default checkbox" Value="isChecked" ValueExpression="() => isChecked" ValueChanged="(value) => CheckboxValueChanged(value)" />
2+
Current value: @isChecked
3+
@code
4+
{
5+
private bool isChecked;
6+
7+
private void CheckboxValueChanged(bool value)
8+
{
9+
isChecked = value;
10+
11+
// do something
12+
}
13+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@page "/radio-input"
2+
3+
@attribute [Route(pageUrl)]
4+
5+
<PageMetaTags PageUrl="@pageUrl"
6+
Title="@metaTitle"
7+
Description="@metaDescription"
8+
ImageUrl="@imageUrl" />
9+
10+
<PageHero Heading="@pageTitle">
11+
<LeadSection>@pageDescription</LeadSection>
12+
</PageHero>
13+
14+
<CarbonAds />
15+
16+
<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
17+
<Demo Type="typeof(RadioInput_Demo_01_Basic_Usage)" Tabs="true" />
18+
</Section>
19+
20+
<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
21+
<div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>RadioInput</code>.</div>
22+
<Demo Type="typeof(RadioInput_Demo_02_Disable_A)" Tabs="false" />
23+
<div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>RadioInput</code>.</div>
24+
<Callout Color="CalloutColor.Warning" Heading="NOTE">
25+
Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
26+
</Callout>
27+
<Demo Type="typeof(RadioInput_Demo_02_Disable_B)" Tabs="false" />
28+
</Section>
29+
30+
<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
31+
<div class="mb-3">This event fires when the <code>RadioInput</code> value changes, but not on every keystroke.</div>
32+
<Demo Type="typeof(RadioInput_Demo_03_Events_ValueChanged)" Tabs="true" />
33+
</Section>
34+
35+
@code {
36+
private const string pageUrl = RouteConstants.Demos_RadioInput_Documentation;
37+
private const string pageTitle = "Blazor RadioInput";
38+
private const string pageDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'.";
39+
private const string metaTitle = "Blazor RadioInput Component";
40+
private const string metaDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'.";
41+
private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
42+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<p>Would you like to receive notifications?</p>
2+
<RadioInput Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" />
3+
<RadioInput Name="EnableNotifications" Label="No" @bind-Value="isChecked2" />
4+
5+
@code
6+
{
7+
private bool isChecked;
8+
private bool isChecked2 = true;
9+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<p>Would you like to receive notifications?</p>
2+
<RadioInput Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" Disabled="disabled" />
3+
<RadioInput Name="EnableNotifications" Label="No" @bind-Value="isChecked2" Disabled="disabled" />
4+
5+
<div class="mt-3">
6+
<Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
7+
<Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
8+
<Button Color="ButtonColor.Warning" Size="ButtonSize.ExtraSmall" @onclick="Toggle"> Toggle </Button>
9+
</div>
10+
11+
@code
12+
{
13+
private bool isChecked;
14+
private bool isChecked2 = true;
15+
16+
private bool disabled = true;
17+
18+
private void Enable() => disabled = false;
19+
20+
private void Disable() => disabled = true;
21+
22+
private void Toggle() => disabled = !disabled;
23+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<p>Would you like to receive notifications?</p>
2+
<RadioInput @ref="radioInputRef" Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" />
3+
<RadioInput @ref="radioInputRef2" Name="EnableNotifications" Label="No" @bind-Value="isChecked2" />
4+
5+
<div class="mt-3">
6+
<Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
7+
<Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
8+
</div>
9+
10+
@code
11+
{
12+
private RadioInput? radioInputRef;
13+
private RadioInput? radioInputRef2;
14+
15+
private bool isChecked;
16+
private bool isChecked2 = true;
17+
18+
private void Disable()
19+
{
20+
radioInputRef.Disable();
21+
radioInputRef2.Disable();
22+
}
23+
24+
private void Enable()
25+
{
26+
radioInputRef.Enable();
27+
radioInputRef2.Enable();
28+
}
29+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<RadioInput Name="EnableNotifications" Label="Yes" Value="isYesChecked" ValueExpression="() => isYesChecked" ValueChanged="(value) => YesOptionSelectionChanged(value)" />
2+
<RadioInput Name="EnableNotifications" Label="No" Value="isNoChecked" ValueExpression="() => isNoChecked" ValueChanged="(value) => NoOptionSelectionChanged(value)" />
3+
4+
@code
5+
{
6+
private bool isYesChecked;
7+
private bool isNoChecked;
8+
9+
private void YesOptionSelectionChanged(bool value)
10+
{
11+
isYesChecked = value;
12+
13+
// do something
14+
}
15+
16+
private void NoOptionSelectionChanged(bool value)
17+
{
18+
isYesChecked = value;
19+
20+
// do something
21+
}
22+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@page "/text-area-input"
2+
3+
@attribute [Route(pageUrl)]
4+
5+
<PageMetaTags PageUrl="@pageUrl"
6+
Title="@metaTitle"
7+
Description="@metaDescription"
8+
ImageUrl="@imageUrl" />
9+
10+
<PageHero Heading="@pageTitle">
11+
<LeadSection>@pageDescription</LeadSection>
12+
</PageHero>
13+
14+
<CarbonAds />
15+
16+
<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
17+
<Demo Type="typeof(TextAreaInput_Demo_01_Basic_Usage)" Tabs="true" />
18+
</Section>
19+
20+
<Section Size="HeadingSize.H2" Name="Text alignment" PageUrl="@pageUrl" Link="text-alignment">
21+
<div class="mb-3">You can change the text alignment according to your need. Use the <code>TextAlignment</code> parameter to set the alignment. In the below example, alignment is set to center and end.</div>
22+
<Demo Type="typeof(TextAreaInput_Demo_02_Text_Alignment)" Tabs="true" />
23+
</Section>
24+
25+
<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
26+
<div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>TextAreaInput</code>.</div>
27+
<Demo Type="typeof(TextAreaInput_Demo_03_Disable_A)" Tabs="false" />
28+
<div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>TextAreaInput</code>.</div>
29+
<Callout Color="CalloutColor.Warning" Heading="NOTE">
30+
Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
31+
</Callout>
32+
<Demo Type="typeof(TextAreaInput_Demo_03_Disable_B)" Tabs="false" />
33+
</Section>
34+
35+
<Section Size="HeadingSize.H2" Name="Max length" PageUrl="@pageUrl" Link="max-length">
36+
<Demo Type="typeof(TextAreaInput_Demo_04_MaxLength)" Tabs="true" />
37+
</Section>
38+
39+
<Section Size="HeadingSize.H2" Name="Valdations" PageUrl="@pageUrl" Link="validations">
40+
<div class="mb-3">
41+
Like any other blazor input component, <code>TextAreaInput</code> supports validations.
42+
Add the DataAnnotations on the <code>TextAreaInput</code> component to validate the user input before submitting the form.
43+
In the below example, we used <b>Required</b> attribute.
44+
</div>
45+
<Demo Type="typeof(TextAreaInput_Demo_05_Validations)" Tabs="true" />
46+
</Section>
47+
48+
<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
49+
<div class="mb-3">This event fires when the <code>TextAreaInput</code> value changes, but not on every keystroke.</div>
50+
<Demo Type="typeof(TextAreaInput_Demo_06_Events_ValueChanged)" Tabs="true" />
51+
</Section>
52+
53+
@code {
54+
private const string pageUrl = RouteConstants.Demos_TextAreaInput_Documentation;
55+
private const string pageTitle = "Blazor TextAreaInput";
56+
private const string pageDescription = "The Blazor Bootstrap TextAreaInput component provides a multi-line plain-text editing control, ideal for scenarios requiring users to input substantial amounts of free-form text. Common use cases include comment sections on reviews or feedback forms.";
57+
private const string metaTitle = "Blazor TextAreaInput Component";
58+
private const string metaDescription = "The Blazor Bootstrap TextAreaInput component provides a multi-line plain-text editing control, ideal for scenarios requiring users to input substantial amounts of free-form text. Common use cases include comment sections on reviews or feedback forms.";
59+
private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
60+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_01_Basic_Usage.razor

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="mb-3">
2+
<TextAreaInput @bind-Value="@enteredText" Rows="3" />
3+
</div>
4+
<div class="mb-3">Entered text: @enteredText</div>
5+
6+
@code {
7+
private string? enteredText = null;
8+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_02_Text_Alignment.razor

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="mb-3">
2+
<TextAreaInput @bind-Value="@enteredText" Rows="3" TextAlignment="Alignment.Center" />
3+
</div>
4+
<div class="mb-3">Entered text: @enteredText</div>
5+
<div class="mb-3">
6+
<TextAreaInput @bind-Value="@enteredText2" Rows="3" TextAlignment="Alignment.End" />
7+
</div>
8+
<div class="mb-3">Entered text: @enteredText2</div>
9+
10+
@code {
11+
private string? enteredText = "sample text";
12+
private string? enteredText2 = "sample text 2";
13+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_A.razor

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="mb-3">
2+
<TextAreaInput @bind-Value="@enteredText" Rows="3" Disabled="@disabled" Placeholder="Enter text" />
3+
</div>
4+
<div class="mb-3">Entered text: @enteredText</div>
5+
6+
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
7+
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
8+
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
9+
10+
@code {
11+
private string? enteredText = null;
12+
13+
private bool disabled = true;
14+
15+
private void Enable() => disabled = false;
16+
17+
private void Disable() => disabled = true;
18+
19+
private void Toggle() => disabled = !disabled;
20+
}

0 commit comments

Comments
 (0)