From 7b93ec2d0f37e22864fb00575e1878c18958b119 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sun, 26 Jan 2025 19:41:01 +0530 Subject: [PATCH 01/11] 3.3.0 - Demos update --- .../PasswordInputDocumentation.razor | 2 +- .../RadioInput/RadioInputDocumentation.razor | 5 ----- ...dioInput_Demo_03_Events_ValueChanged.razor | 22 ------------------- .../TextAreaInputDocumentation.razor | 5 +++-- .../TextInput/TextInputDocumentation.razor | 1 + blazorbootstrap/BlazorBootstrap.csproj | 4 ++-- 6 files changed, 7 insertions(+), 32 deletions(-) delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor index d8dcab10c..137678498 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor @@ -20,7 +20,7 @@
Use the Disabled parameter to disable the TextInput.
-
Also, use Enable() and Disable() methods to enable and disable the TextInput.
+
Also, use Enable() and Disable() methods to enable and disable the PasswordInput.
Do not use both the Disabled parameter and Enable() & Disable() methods. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor index e597dcf66..d3927dae0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor @@ -27,11 +27,6 @@
-
-
This event fires when the RadioInput value changes, but not on every keystroke.
- -
- @code { private const string pageUrl = RouteConstants.Demos_RadioInput_Documentation; private const string pageTitle = "Blazor RadioInput"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor deleted file mode 100644 index db9459ad1..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor +++ /dev/null @@ -1,22 +0,0 @@ - - - -@code -{ - private bool isYesChecked; - private bool isNoChecked; - - private void YesOptionSelectionChanged(bool value) - { - isYesChecked = value; - - // do something - } - - private void NoOptionSelectionChanged(bool value) - { - isYesChecked = value; - - // do something - } -} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor index abd8a76bc..61c53d70a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor @@ -33,6 +33,7 @@
+
Use the MaxLength parameter to set the maximum length of the TextAreaInput.
@@ -53,8 +54,8 @@ @code { private const string pageUrl = RouteConstants.Demos_TextAreaInput_Documentation; private const string pageTitle = "Blazor TextAreaInput"; - 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."; + 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 review descriptions, or feedback forms."; private const string metaTitle = "Blazor TextAreaInput Component"; - 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."; + 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 review descriptions, or feedback forms."; private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor index 59c2a3cb3..548cf2804 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor @@ -33,6 +33,7 @@
+
Use the MaxLength parameter to set the maximum length of the TextInput.
diff --git a/blazorbootstrap/BlazorBootstrap.csproj b/blazorbootstrap/BlazorBootstrap.csproj index dde59ea39..59fce4d46 100644 --- a/blazorbootstrap/BlazorBootstrap.csproj +++ b/blazorbootstrap/BlazorBootstrap.csproj @@ -3,8 +3,8 @@ Blazor.Bootstrap - 3.2.0 - 3.2.0 + 3.3.0 + 3.3.0 Apache-2.0 From c8eb1969e9d07872ac0cb8528b7c44b618969d6e Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sun, 26 Jan 2025 22:22:00 +0530 Subject: [PATCH 02/11] 3.3.0 - Docs update - WIP --- .../CheckboxInputDocumentation.razor | 2 +- .../PasswordInputDocumentation.razor | 2 +- .../RadioInput/RadioInputDocumentation.razor | 2 +- .../TextAreaInputDocumentation.razor | 2 +- .../TextInput/TextInputDocumentation.razor | 2 +- docs/docs/04-forms/checkbox-input.mdx | 157 ++++++++++++++++++ docs/docs/04-forms/currency-input.mdx | 2 +- docs/docs/04-forms/date-input.mdx | 2 +- docs/docs/04-forms/number-input.mdx | 2 +- docs/docs/04-forms/password-input.mdx | 73 ++++++++ docs/docs/04-forms/radio-input.mdx | 73 ++++++++ docs/docs/04-forms/range-input.mdx | 2 +- docs/docs/04-forms/switch.mdx | 2 +- docs/docs/04-forms/text-input.mdx | 73 ++++++++ docs/docs/04-forms/textarea-input.mdx | 73 ++++++++ docs/docs/04-forms/time-input.mdx | 2 +- 16 files changed, 460 insertions(+), 11 deletions(-) create mode 100644 docs/docs/04-forms/checkbox-input.mdx create mode 100644 docs/docs/04-forms/password-input.mdx create mode 100644 docs/docs/04-forms/radio-input.mdx create mode 100644 docs/docs/04-forms/text-input.mdx create mode 100644 docs/docs/04-forms/textarea-input.mdx diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor index cbea8ebf1..f733a2f70 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor @@ -38,5 +38,5 @@ private const string pageDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'."; private const string metaTitle = "Blazor CheckboxInput Component"; private const string metaDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'."; - private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL + private const string imageUrl = "https://i.imgur.com/kqSggFK.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor index 137678498..1b0c49022 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor @@ -47,5 +47,5 @@ private const string pageDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'."; private const string metaTitle = "Blazor PasswordInput Component"; private const string metaDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'."; - private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL + private const string imageUrl = "https://i.imgur.com/0k1C2XS.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor index d3927dae0..94fc47fcf 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor @@ -33,5 +33,5 @@ private const string pageDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'."; private const string metaTitle = "Blazor RadioInput Component"; private const string metaDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'."; - private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL + private const string imageUrl = "https://i.imgur.com/8koE00q.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor index 61c53d70a..362dbf695 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor @@ -57,5 +57,5 @@ 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 review descriptions, or feedback forms."; private const string metaTitle = "Blazor TextAreaInput Component"; 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 review descriptions, or feedback forms."; - private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL + private const string imageUrl = "https://i.imgur.com/aSVKMqv.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor index 548cf2804..721f4de6e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor @@ -57,5 +57,5 @@ private const string pageDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text'."; private const string metaTitle = "Blazor TextInput Component"; private const string metaDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text'."; - private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL + private const string imageUrl = "https://i.imgur.com/N2VUHIn.png"; } diff --git a/docs/docs/04-forms/checkbox-input.mdx b/docs/docs/04-forms/checkbox-input.mdx new file mode 100644 index 000000000..0182bca16 --- /dev/null +++ b/docs/docs/04-forms/checkbox-input.mdx @@ -0,0 +1,157 @@ +--- +title: Blazor Checkbox Input Component +description: The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'. +image: https://i.imgur.com/kqSggFK.png + +sidebar_label: Checkbox Input +sidebar_position: 2 +--- + +import CarbonAd from '/carbon-ad.mdx' + +# Blazor Checkbox Input + +The Blazor Bootstrap `CheckboxInput` component is constructed using an HTML input of type *checkbox*. + + + +Blazor Bootstrap: Checkbox Input Component + +## Parameters +| Name | Type | Default | Required | Description | Added Version | +|:--|:--|:--|:--|:--|:--| + +## Methods + +| Name | Returns | Description | Added Version | +|:--|:--|:--|:--| +| Disable() | void | Disables autocomplete. | 3.3.0 | +| Enable() | void | Enables autocomplete. | 3.3.0 | + +## Events + +| Name | Description | Added Version | +|:--|:--|:--| +| ValueChanged | This event fires on every user keystroke that changes the textbox value. | 3.3.0 | + +## Examples + +### Basic Usage + +Blazor Bootstrap Checkbox Input Component - Basic Usage + +```cshtml {} showLineNumbers + + +``` + +```cs {} showLineNumbers +@code +{ + private bool isChecked; + private bool isChecked2 = true; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/forms/checkbox-input#basic-usage) + +### Disable + +Use the `Disabled` parameter to disable the `CheckboxInput`. + +Blazor Bootstrap Checkbox Input Component - Disable + +```cshtml {} showLineNumbers + + + +
+ + + +
+``` + +```cs {} showLineNumbers +@code +{ + private bool isChecked; + private bool isChecked2 = true; + + private bool disabled = true; + + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/forms/checkbox-input#disable) + +Also, use `Enable()` and `Disable()` methods to enable and disable the CheckboxInput. + +:::caution NOTE +Do not use both the `Disabled` parameter and `Enable()` & `Disable()` methods. +::: + +```cshtml {} showLineNumbers + + + +
+ + +
+``` + +```cs {} showLineNumbers +@code +{ + private CheckboxInput? checkboxInputRef1; + private CheckboxInput? checkboxInputRef2; + + private bool isChecked; + private bool isChecked2 = true; + + private void Disable() + { + checkboxInputRef1.Disable(); + checkboxInputRef2.Disable(); + } + + private void Enable() + { + checkboxInputRef1.Enable(); + checkboxInputRef2.Enable(); + } +} +``` + +### Events: ValueChanged + +This event fires when the `CheckboxInput` value changes, but not on every keystroke. + +Blazor Bootstrap Checkbox Input Component - Events: ValueChanged + +```cshtml {} showLineNumbers + +Current value: @isChecked +``` + +```cs {} showLineNumbers +@code +{ + private bool isChecked; + + private void CheckboxValueChanged(bool value) + { + isChecked = value; + + // do something + } +} +``` + +[See demo here](https://demos.blazorbootstrap.com/forms/checkbox-input#events-value-changed) diff --git a/docs/docs/04-forms/currency-input.mdx b/docs/docs/04-forms/currency-input.mdx index d2103d685..fd826e76b 100644 --- a/docs/docs/04-forms/currency-input.mdx +++ b/docs/docs/04-forms/currency-input.mdx @@ -4,7 +4,7 @@ description: Use the Blazor Bootstrap `CurrencyInput` component to show the numb image: https://i.imgur.com/mihpoXk.png sidebar_label: Currency Input -sidebar_position: 2 +sidebar_position: 3 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/04-forms/date-input.mdx b/docs/docs/04-forms/date-input.mdx index b804dc624..177465030 100644 --- a/docs/docs/04-forms/date-input.mdx +++ b/docs/docs/04-forms/date-input.mdx @@ -4,7 +4,7 @@ description: Blazor Bootstrap `DateInput` component is constructed using an HTML image: https://i.imgur.com/1mVjqQv.png sidebar_label: Date Input -sidebar_position: 3 +sidebar_position: 4 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/04-forms/number-input.mdx b/docs/docs/04-forms/number-input.mdx index 30489ecb0..6e532c083 100644 --- a/docs/docs/04-forms/number-input.mdx +++ b/docs/docs/04-forms/number-input.mdx @@ -4,7 +4,7 @@ description: Blazor Bootstrap `NumberInput` component is built around HTML input image: https://i.imgur.com/iUNBkki.png sidebar_label: Number Input -sidebar_position: 4 +sidebar_position: 5 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/04-forms/password-input.mdx b/docs/docs/04-forms/password-input.mdx new file mode 100644 index 000000000..50b3c3bea --- /dev/null +++ b/docs/docs/04-forms/password-input.mdx @@ -0,0 +1,73 @@ +--- +title: Blazor Password Input Component +description: The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'. +image: https://i.imgur.com/0k1C2XS.png + +sidebar_label: Password Input +sidebar_position: 6 +--- + +import CarbonAd from '/carbon-ad.mdx' + +# Blazor Password Input + +The Blazor Bootstrap `PasswordInput` component is constructed using an HTML input of type *password*. + + + +Blazor Bootstrap: Password Input Component + +## Parameters +| Name | Type | Default | Required | Description | Added Version | +|:--|:--|:--|:--|:--|:--| + +## Methods + +| Name | Returns | Description | Added Version | +|:--|:--|:--|:--| +| Disable() | void | Disables autocomplete. | 3.3.0 | +| Enable() | void | Enables autocomplete. | 3.3.0 | + +## Events + +| Name | Description | Added Version | +|:--|:--|:--| +| ValueChanged | This event fires on every user keystroke that changes the textbox value. | 3.3.0 | + +## Examples + +### Basic Usage + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) + +### Disable + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) + +### Events: ValueChanged + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) diff --git a/docs/docs/04-forms/radio-input.mdx b/docs/docs/04-forms/radio-input.mdx new file mode 100644 index 000000000..31556dc73 --- /dev/null +++ b/docs/docs/04-forms/radio-input.mdx @@ -0,0 +1,73 @@ +--- +title: Blazor Radio Input Component +description: The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'. +image: https://i.imgur.com/8koE00q.png + +sidebar_label: Radio Input +sidebar_position: 7 +--- + +import CarbonAd from '/carbon-ad.mdx' + +# Blazor Radio Input + +The Blazor Bootstrap `RadioInput` component is constructed using an HTML input of type *radio*. + + + +Blazor Bootstrap: Radio Input Component + +## Parameters +| Name | Type | Default | Required | Description | Added Version | +|:--|:--|:--|:--|:--|:--| + +## Methods + +| Name | Returns | Description | Added Version | +|:--|:--|:--|:--| +| Disable() | void | Disables autocomplete. | 3.3.0 | +| Enable() | void | Enables autocomplete. | 3.3.0 | + +## Events + +| Name | Description | Added Version | +|:--|:--|:--| +| ValueChanged | This event fires on every user keystroke that changes the textbox value. | 3.3.0 | + +## Examples + +### Basic Usage + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) + +### Disable + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) + +### Events: ValueChanged + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) diff --git a/docs/docs/04-forms/range-input.mdx b/docs/docs/04-forms/range-input.mdx index 2c0c54259..306fcbde9 100644 --- a/docs/docs/04-forms/range-input.mdx +++ b/docs/docs/04-forms/range-input.mdx @@ -4,7 +4,7 @@ description: Blazor Bootstrap `NumberInput` component is built around HTML input image: https://i.imgur.com/rWDDHaf.png sidebar_label: Range Input -sidebar_position: 5 +sidebar_position: 8 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/04-forms/switch.mdx b/docs/docs/04-forms/switch.mdx index 25cdba66c..6d7f0b3e5 100644 --- a/docs/docs/04-forms/switch.mdx +++ b/docs/docs/04-forms/switch.mdx @@ -4,7 +4,7 @@ description: Use the Blazor Bootstrap `Switch` component to show the consistent image: https://i.imgur.com/ALKzreq.png sidebar_label: Switch -sidebar_position: 6 +sidebar_position: 9 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/04-forms/text-input.mdx b/docs/docs/04-forms/text-input.mdx new file mode 100644 index 000000000..a4193324c --- /dev/null +++ b/docs/docs/04-forms/text-input.mdx @@ -0,0 +1,73 @@ +--- +title: Blazor Text Input Component +description: The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text'. +image: https://i.imgur.com/N2VUHIn.png + +sidebar_label: Text Input +sidebar_position: 10 +--- + +import CarbonAd from '/carbon-ad.mdx' + +# Blazor Text Input + +The Blazor Bootstrap `TextInput` component is constructed using an HTML input of type *text*. + + + +Blazor Bootstrap: Text Input Component + +## Parameters +| Name | Type | Default | Required | Description | Added Version | +|:--|:--|:--|:--|:--|:--| + +## Methods + +| Name | Returns | Description | Added Version | +|:--|:--|:--|:--| +| Disable() | void | Disables autocomplete. | 3.3.0 | +| Enable() | void | Enables autocomplete. | 3.3.0 | + +## Events + +| Name | Description | Added Version | +|:--|:--|:--| +| ValueChanged | This event fires on every user keystroke that changes the textbox value. | 3.3.0 | + +## Examples + +### Basic Usage + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) + +### Disable + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) + +### Events: ValueChanged + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) diff --git a/docs/docs/04-forms/textarea-input.mdx b/docs/docs/04-forms/textarea-input.mdx new file mode 100644 index 000000000..3e4e0e249 --- /dev/null +++ b/docs/docs/04-forms/textarea-input.mdx @@ -0,0 +1,73 @@ +--- +title: Blazor TextArea Input Component +description: 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 review descriptions, or feedback forms. +image: https://i.imgur.com/aSVKMqv.png + +sidebar_label: TextArea Input +sidebar_position: 11 +--- + +import CarbonAd from '/carbon-ad.mdx' + +# Blazor TextArea Input + +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 review descriptions, or feedback forms. + + + +Blazor Bootstrap: TextArea Input Component + +## Parameters +| Name | Type | Default | Required | Description | Added Version | +|:--|:--|:--|:--|:--|:--| + +## Methods + +| Name | Returns | Description | Added Version | +|:--|:--|:--|:--| +| Disable() | void | Disables autocomplete. | 3.3.0 | +| Enable() | void | Enables autocomplete. | 3.3.0 | + +## Events + +| Name | Description | Added Version | +|:--|:--|:--| +| ValueChanged | This event fires on every user keystroke that changes the textbox value. | 3.3.0 | + +## Examples + +### Basic Usage + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) + +### Disable + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) + +### Events: ValueChanged + +Blazor Bootstrap Component - + +```cshtml {} showLineNumbers +``` + +```cs {} showLineNumbers +``` + +[See demo here](https://demos.blazorbootstrap.com/) diff --git a/docs/docs/04-forms/time-input.mdx b/docs/docs/04-forms/time-input.mdx index 3943c5472..8ec62b9f1 100644 --- a/docs/docs/04-forms/time-input.mdx +++ b/docs/docs/04-forms/time-input.mdx @@ -4,7 +4,7 @@ description: The Blazor Bootstrap `TimeInput` component is constructed using an image: https://i.imgur.com/TlvjRlP.png sidebar_label: Time Input -sidebar_position: 7 +sidebar_position: 12 --- import CarbonAd from '/carbon-ad.mdx' From d2dc764f5dc74fe757d856ce4f2e34bf768b7088 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sun, 26 Jan 2025 22:38:04 +0530 Subject: [PATCH 03/11] Password Input - docs update --- .../PasswordInputDocumentation.razor | 2 +- docs/docs/04-forms/password-input.mdx | 179 +++++++++++++++++- 2 files changed, 174 insertions(+), 7 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor index 1b0c49022..8052ee149 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor @@ -18,7 +18,7 @@
-
Use the Disabled parameter to disable the TextInput.
+
Use the Disabled parameter to disable the PasswordInput.
Also, use Enable() and Disable() methods to enable and disable the PasswordInput.
diff --git a/docs/docs/04-forms/password-input.mdx b/docs/docs/04-forms/password-input.mdx index 50b3c3bea..c4d494b90 100644 --- a/docs/docs/04-forms/password-input.mdx +++ b/docs/docs/04-forms/password-input.mdx @@ -38,36 +38,203 @@ The Blazor Bootstrap `PasswordInput` component is constructed using an HTML inpu ### Basic Usage -Blazor Bootstrap Component - +Blazor Bootstrap Password Input Component - Basic Usage ```cshtml {} showLineNumbers +
+ +
+
Entered password: @enteredPassword
``` ```cs {} showLineNumbers +@code { + private string? enteredPassword = null; +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/password-input#basic-usage) ### Disable -Blazor Bootstrap Component - +Use the `Disabled` parameter to disable the `PasswordInput`. + +Blazor Bootstrap Password Input Component - Disable + +```cshtml {} showLineNumbers +
+ +
+
Entered password: @enteredPassword
+ + + + +``` + +```cs {} showLineNumbers +@code { + private string? enteredPassword = null; + + private bool disabled = true; + + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; +} +``` + +Also, use `Enable()` and `Disable()` methods to enable and disable the PasswordInput. + +:::caution NOTE +Do not use both the `Disabled` parameter and `Enable()` & `Disable()` methods. +::: + +```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredPassword
+ + + +``` + +```cs {} showLineNumbers +@code { + private PasswordInput? passwordInputRef; + + private string? enteredPassword = null; + + private void Disable() => passwordInputRef.Disable(); + + private void Enable() => passwordInputRef.Enable(); +} +``` + +[See demo here](https://demos.blazorbootstrap.com/form/password-input#disable) + +### Valdations + +Like any other blazor input component, `PasswordInput` supports validations. +Add the DataAnnotations on the `PasswordInput` component to validate the user input before submitting the form. +In the below example, we used **Required** attribute. + +Blazor Bootstrap Password Input Component - Events: ValueChanged ```cshtml {} showLineNumbers +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+
+ + +
+
+ + ``` ```cs {} showLineNumbers +@code { + private UserLogin userLogin = new(); + private EditContext? editContext; + + protected override void OnInitialized() + { + editContext = new EditContext(userLogin); + base.OnInitialized(); + } + + public void HandleOnValidSubmit() + { + // additional check + if (editContext.Validate()) + { + // do something + // submit the form + Console.WriteLine("Login successful"); + } + } + + private void ResetForm() + { + userLogin = new(); + editContext = new EditContext(userLogin); + } + + public class UserLogin + { + [Required(ErrorMessage = "User name required.")] + public string? UserName { get; set; } + + [Required(ErrorMessage = "Password required.")] + public string? Password { get; set; } + } +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/password-input#validations) ### Events: ValueChanged -Blazor Bootstrap Component - +This event fires when the `PasswordInput` value changes, but not on every keystroke. + +Blazor Bootstrap Password Input Component - Events: ValueChanged ```cshtml {} showLineNumbers +
+ +
+
Entered password: @enteredPassword
``` ```cs {} showLineNumbers +@code { + private string? enteredPassword = null; + + private void PasswordChanged(string? value) + { + enteredPassword = value; + + // do something + } +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/password-input#events-value-changed) From f9e4c213d84b55c851c683ecde7da1c10ea9fd62 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sun, 26 Jan 2025 22:45:10 +0530 Subject: [PATCH 04/11] RadioInput - docs update --- docs/docs/04-forms/radio-input.mdx | 76 ++++++++++++++++++++++++++---- 1 file changed, 68 insertions(+), 8 deletions(-) diff --git a/docs/docs/04-forms/radio-input.mdx b/docs/docs/04-forms/radio-input.mdx index 31556dc73..890dd90dd 100644 --- a/docs/docs/04-forms/radio-input.mdx +++ b/docs/docs/04-forms/radio-input.mdx @@ -38,36 +38,96 @@ The Blazor Bootstrap `RadioInput` component is constructed using an HTML input o ### Basic Usage -Blazor Bootstrap Component - +Blazor Bootstrap Radio Input Component - Basic Usage ```cshtml {} showLineNumbers +

Would you like to receive notifications?

+ + ``` ```cs {} showLineNumbers +@code +{ + private bool isChecked; + private bool isChecked2 = true; +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/radio-input#basic-usage) ### Disable -Blazor Bootstrap Component - +Use the `Disabled` parameter to disable the `RadioInput`. + +Blazor Bootstrap Radio Input Component - Disable ```cshtml {} showLineNumbers +

Would you like to receive notifications?

+ + + +
+ + + +
``` ```cs {} showLineNumbers -``` +@code +{ + private bool isChecked; + private bool isChecked2 = true; + + private bool disabled = true; -[See demo here](https://demos.blazorbootstrap.com/) + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; +} +``` -### Events: ValueChanged +Also, use `Enable()` and `Disable()` methods to enable and disable the RadioInput. -Blazor Bootstrap Component - +:::caution NOTE +Do not use both the `Disabled` parameter and `Enable()` & `Disable()` methods. +::: ```cshtml {} showLineNumbers +

Would you like to receive notifications?

+ + + +
+ + +
``` ```cs {} showLineNumbers +@code +{ + private RadioInput? radioInputRef; + private RadioInput? radioInputRef2; + + private bool isChecked; + private bool isChecked2 = true; + + private void Disable() + { + radioInputRef.Disable(); + radioInputRef2.Disable(); + } + + private void Enable() + { + radioInputRef.Enable(); + radioInputRef2.Enable(); + } +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/radio-input#disable) From 0181951a5cdad70b5f039f55762d0a3bb7d12932 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 27 Jan 2025 21:46:43 +0530 Subject: [PATCH 05/11] radio input & text input - docs update --- docs/docs/04-forms/radio-input.mdx | 2 +- docs/docs/04-forms/text-input.mdx | 226 ++++++++++++++++++++++++++++- 2 files changed, 221 insertions(+), 7 deletions(-) diff --git a/docs/docs/04-forms/radio-input.mdx b/docs/docs/04-forms/radio-input.mdx index 890dd90dd..b365a078b 100644 --- a/docs/docs/04-forms/radio-input.mdx +++ b/docs/docs/04-forms/radio-input.mdx @@ -60,7 +60,7 @@ The Blazor Bootstrap `RadioInput` component is constructed using an HTML input o Use the `Disabled` parameter to disable the `RadioInput`. -Blazor Bootstrap Radio Input Component - Disable +Blazor Bootstrap Radio Input Component - Disable ```cshtml {} showLineNumbers

Would you like to receive notifications?

diff --git a/docs/docs/04-forms/text-input.mdx b/docs/docs/04-forms/text-input.mdx index a4193324c..46fc39e2b 100644 --- a/docs/docs/04-forms/text-input.mdx +++ b/docs/docs/04-forms/text-input.mdx @@ -38,36 +38,250 @@ The Blazor Bootstrap `TextInput` component is constructed using an HTML input of ### Basic Usage -Blazor Bootstrap Component - +Blazor Bootstrap Text Input Component - Basic Usage ```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
``` ```cs {} showLineNumbers +@code { + private string? enteredText = null; +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/text-input#basic-usage) + +### Text alignment + +You can change the text alignment according to your need. +Use the `TextAlignment` parameter to set the alignment. +In the below example, alignment is set to **center** and **end**. + +Blazor Bootstrap Text Input Component - Text alignment + +```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
+
+ +
+
Entered text: @enteredText2
+``` + +```cs {} showLineNumbers +@code { + private string? enteredText = "sample text"; + private string? enteredText2 = "sample text 2"; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/form/text-input#text-alignment) ### Disable -Blazor Bootstrap Component - +Use the `Disabled` parameter to disable the `TextInput`. + +Blazor Bootstrap Text Input Component - Disable + +```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
+ + + + +``` + +```cs {} showLineNumbers +@code { + private string? enteredText = null; + + private bool disabled = true; + + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; +} +``` + +Also, use `Enable()` and `Disable()` methods to enable and disable the PasswordInput. + +:::caution NOTE +Do not use both the `Disabled` parameter and `Enable()` & `Disable()` methods. +::: ```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
+ + + ``` ```cs {} showLineNumbers +@code { + private TextInput? textInputRef; + + private string? enteredText = null; + + private void Disable() => textInputRef.Disable(); + + private void Enable() => textInputRef.Enable(); +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/text-input#disable) + +### Max length + +Blazor Bootstrap Text Input Component - Max length + +```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
+``` + +```cs {} showLineNumbers +@code { + private string? enteredText = null; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/form/text-input#max-length) + +### Valdations + +Like any other blazor input component, `TextInput` supports validations. +Add the DataAnnotations on the `TextInput` component to validate the user input before submitting the form. +In the below example, we used **Required** attribute. + +Blazor Bootstrap Text Input Component - Valdations + +```cshtml {} showLineNumbers +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +``` + +```cs {} showLineNumbers +@code { + private Employee employee = new(); + private EditContext? editContext; + + protected override void OnInitialized() + { + editContext = new EditContext(employee); + base.OnInitialized(); + } + + public void HandleOnValidSubmit() + { + // additional check + if (editContext.Validate()) + { + // do something + // submit the form + Console.WriteLine("Form submitted successfully"); + } + } + + private void ResetForm() + { + employee = new(); + editContext = new EditContext(employee); + } + + public class Employee + { + [Required(ErrorMessage = "First name required.")] + public string? FirstName { get; set; } + + [Required(ErrorMessage = "Last name required.")] + public string? LastName { get; set; } + } +} +``` + +[See demo here](https://demos.blazorbootstrap.com/form/text-input#validations) ### Events: ValueChanged -Blazor Bootstrap Component - +This event fires when the `TextInput` value changes, but not on every keystroke. + +Blazor Bootstrap Text Input Component - Events: ValueChanged ```cshtml {} showLineNumbers +
+ +
+
Entered employee name: @employeeName
``` ```cs {} showLineNumbers +@code { + private string? employeeName = null; + + private void EmployeeNameChanged(string? value) + { + employeeName = value; + + // do something + } +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/text-input#events-value-changed) From 6cf82ce0a46960aa34136a3a25eedac1d61e39aa Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 27 Jan 2025 22:10:38 +0530 Subject: [PATCH 06/11] textarea input - docs update --- docs/docs/04-forms/textarea-input.mdx | 226 +++++++++++++++++++++++++- 1 file changed, 220 insertions(+), 6 deletions(-) diff --git a/docs/docs/04-forms/textarea-input.mdx b/docs/docs/04-forms/textarea-input.mdx index 3e4e0e249..c9e09baef 100644 --- a/docs/docs/04-forms/textarea-input.mdx +++ b/docs/docs/04-forms/textarea-input.mdx @@ -38,36 +38,250 @@ The Blazor Bootstrap `TextAreaInput` component provides a multi-line plain-text ### Basic Usage -Blazor Bootstrap Component - +Blazor Bootstrap TextArea Input Component - Basic Usage ```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
``` ```cs {} showLineNumbers +@code { + private string? enteredText = null; +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/text-area-input#basic-usage) + +### Text alignment + +You can change the text alignment according to your need. +Use the `TextAlignment` parameter to set the alignment. +In the below example, alignment is set to **center** and **end**. + +Blazor Bootstrap TextArea Input Component - Text alignment + +```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
+
+ +
+
Entered text: @enteredText2
+``` + +```cs {} showLineNumbers +@code { + private string? enteredText = "sample text"; + private string? enteredText2 = "sample text 2"; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/form/text-area-input#text-alignment) ### Disable -Blazor Bootstrap Component - +Use the **Disabled** parameter to disable the `TextAreaInput`. + +Blazor Bootstrap TextArea Input Component - Disable + +```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
+ + + + +``` + +```cs {} showLineNumbers +@code { + private string? enteredText = null; + + private bool disabled = true; + + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; +} +``` + +Also, use `Enable()` and `Disable()` methods to enable and disable the PasswordInput. + +:::caution NOTE +Do not use both the `Disabled` parameter and `Enable()` & `Disable()` methods. +::: ```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
+ + + ``` ```cs {} showLineNumbers +@code { + private TextAreaInput? textAreaInputRef; + + private string? enteredText = null; + + private void Disable() => textAreaInputRef.Disable(); + + private void Enable() => textAreaInputRef.Enable(); +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/text-area-input#disable) + +### Max length + +Use the `MaxLength` parameter to set the maximum length of the `TextAreaInput`. + +Blazor Bootstrap TextArea Input Component - Max length + +```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
+``` + +```cs {} showLineNumbers +@code { + private string? enteredText = null; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/form/text-area-input#max-length) + +### Valdations + +Like any other blazor input component, `TextAreaInput` supports validations. +Add the DataAnnotations on the `TextAreaInput` component to validate the user input before submitting the form. +In the below example, we used **Required** attribute. + +Blazor Bootstrap TextArea Input Component - Valdations + +```cshtml {} showLineNumbers +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +``` + +```cs {} showLineNumbers +@code { + private Product product = new(); + private EditContext? editContext; + + protected override void OnInitialized() + { + editContext = new EditContext(product); + base.OnInitialized(); + } + + public void HandleOnValidSubmit() + { + // additional check + if (editContext.Validate()) + { + // do something + // submit the form + Console.WriteLine("Form submitted successfully"); + } + } + + private void ResetForm() + { + product = new(); + editContext = new EditContext(product); + } + + public class Product + { + [Required(ErrorMessage = "Product name required.")] + public string? Name { get; set; } + + [Required(ErrorMessage = "Product description required.")] + public string? Description { get; set; } + } +} +``` + +[See demo here](https://demos.blazorbootstrap.com/form/text-area-input#validations) ### Events: ValueChanged -Blazor Bootstrap Component - +Blazor Bootstrap TextArea Input Component - Events: ValueChanged ```cshtml {} showLineNumbers +
+ +
+
Entered text: @enteredText
``` ```cs {} showLineNumbers +@code { + private string? enteredText = null; + + private void TextChanged(string? value) + { + enteredText = value; + + // do something + } +} ``` -[See demo here](https://demos.blazorbootstrap.com/) +[See demo here](https://demos.blazorbootstrap.com/form/text-area-input#events-value-changed) From 1b03e70afbb1d65f6b5889cc60dd5f2699700d4b Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 27 Jan 2025 22:38:14 +0530 Subject: [PATCH 07/11] CheckboxInput and PasswordInput docs update --- .../Form/CheckboxInput/CheckboxInput.razor.cs | 6 +++--- docs/docs/04-forms/checkbox-input.mdx | 13 ++++++++----- docs/docs/04-forms/password-input.mdx | 9 ++++++--- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs index 3916ba00d..0c9588f8a 100644 --- a/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs +++ b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs @@ -20,12 +20,12 @@ protected override void OnInitialized() } /// - /// Disables number input. + /// Disables checkbox input. /// public void Disable() => Disabled = true; /// - /// Enables number input. + /// Enables checkbox input. /// public void Enable() => Disabled = false; @@ -78,7 +78,7 @@ private async Task OnChange(ChangeEventArgs e) public bool Value { get; set; } /// - /// This event fired on every user keystroke that changes the NumberInput value. + /// This event fires when the value changes. /// [Parameter] public EventCallback ValueChanged { get; set; } diff --git a/docs/docs/04-forms/checkbox-input.mdx b/docs/docs/04-forms/checkbox-input.mdx index 0182bca16..204649ff5 100644 --- a/docs/docs/04-forms/checkbox-input.mdx +++ b/docs/docs/04-forms/checkbox-input.mdx @@ -20,25 +20,28 @@ The Blazor Bootstrap `CheckboxInput` component is constructed using an HTML inpu ## Parameters | Name | Type | Default | Required | Description | Added Version | |:--|:--|:--|:--|:--|:--| +| Disabled | bool | false | | Gets or sets the disabled state. | 3.3.0 | +| Label | string | null | | Gets or sets the label. | 3.3.0 | +| Value | bool | false | ✔️ | Gets or sets the value. | 3.3.0 | ## Methods | Name | Returns | Description | Added Version | |:--|:--|:--|:--| -| Disable() | void | Disables autocomplete. | 3.3.0 | -| Enable() | void | Enables autocomplete. | 3.3.0 | +| Disable() | void | Disables checkbox input. | 3.3.0 | +| Enable() | void | Enables checkbox input. | 3.3.0 | ## Events | Name | Description | Added Version | |:--|:--|:--| -| ValueChanged | This event fires on every user keystroke that changes the textbox value. | 3.3.0 | +| ValueChanged | This event fires when the `CheckboxInput` value changes. | 3.3.0 | ## Examples ### Basic Usage -Blazor Bootstrap Checkbox Input Component - Basic Usage +Blazor Bootstrap Checkbox Input Component - Basic Usage ```cshtml {} showLineNumbers @@ -131,7 +134,7 @@ Do not use both the `Disabled` parameter and `Enable()` & `Disable()` methods. ### Events: ValueChanged -This event fires when the `CheckboxInput` value changes, but not on every keystroke. +This event fires when the `CheckboxInput` value change. Blazor Bootstrap Checkbox Input Component - Events: ValueChanged diff --git a/docs/docs/04-forms/password-input.mdx b/docs/docs/04-forms/password-input.mdx index c4d494b90..8b5eb5f64 100644 --- a/docs/docs/04-forms/password-input.mdx +++ b/docs/docs/04-forms/password-input.mdx @@ -20,19 +20,22 @@ The Blazor Bootstrap `PasswordInput` component is constructed using an HTML inpu ## Parameters | Name | Type | Default | Required | Description | Added Version | |:--|:--|:--|:--|:--|:--| +| Disabled | bool | false | | Gets or sets the disabled state. | 3.3.0 | +| ShowHidePasswordButtonCssClass | string | `btn border-top border-end border-bottom border border-start-0` | | Gets or sets the show/hide password button CSS class. | 3.3.0 | +| Value | string | null | ✔️ | Gets or sets the value. | 3.3.0 | ## Methods | Name | Returns | Description | Added Version | |:--|:--|:--|:--| -| Disable() | void | Disables autocomplete. | 3.3.0 | -| Enable() | void | Enables autocomplete. | 3.3.0 | +| Disable() | void | Disables checkbox input. | 3.3.0 | +| Enable() | void | Enables checkbox input. | 3.3.0 | ## Events | Name | Description | Added Version | |:--|:--|:--| -| ValueChanged | This event fires on every user keystroke that changes the textbox value. | 3.3.0 | +| ValueChanged | This event is fired when the `PasswordInput` value changes. | 3.3.0 | ## Examples From 078276bcd850599c37cdddc52b7fc12f118f6aaa Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Tue, 28 Jan 2025 22:26:10 +0530 Subject: [PATCH 08/11] 3.3.0 release updates --- .../Client/wwwroot/appsettings.json | 4 ++-- BlazorBootstrap.Demo.Server/appsettings.json | 4 ++-- .../wwwroot/appsettings.json | 4 ++-- .../Components/Form/TextAreaInput/TextAreaInput.razor.cs | 6 +++--- .../Components/Form/TextInput/TextInput.razor.cs | 8 ++++---- .../01-a-getting-started-webassembly-NET-8.mdx | 2 +- .../01-b-getting-started-webapp-server-global-NET-8.mdx | 2 +- .../01-c-getting-started-webapp-auto-global-NET-8.mdx | 4 ++-- .../01-d-getting-started-maui-blazor-NET-8.mdx | 2 +- .../02-a-getting-started-webassembly-NET-7.mdx | 2 +- .../02-b-getting-started-server-NET-7.mdx | 2 +- .../02-c-getting-started-maui-blazor-NET-7.mdx | 2 +- .../03-a-getting-started-webassembly-NET-6.mdx | 2 +- .../03-b-getting-started-server-NET-6.mdx | 2 +- docs/docs/04-forms/radio-input.mdx | 6 +++++- docs/docs/04-forms/text-input.mdx | 6 ++++++ docs/docs/04-forms/textarea-input.mdx | 9 ++++++++- docs/package.json | 4 ++-- 18 files changed, 44 insertions(+), 27 deletions(-) diff --git a/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json b/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json index 06039eb6d..a7b313cc1 100644 --- a/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json +++ b/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json @@ -1,7 +1,7 @@ { - "version": "3.2.0", + "version": "3.3.0", "release": { - "short_description": "New MainLayout and Theme Switcher components, along with other enhancements!!!" + "short_description": "New CheckboxInput, PasswordInput, RadioInput, TextInput, TextAreaInput components, along with other enhancements!!!" }, "urls": { "docs": "//docs.blazorbootstrap.com/docs/getting-started/blazor-webassembly", diff --git a/BlazorBootstrap.Demo.Server/appsettings.json b/BlazorBootstrap.Demo.Server/appsettings.json index d2c683608..6d0ce6968 100644 --- a/BlazorBootstrap.Demo.Server/appsettings.json +++ b/BlazorBootstrap.Demo.Server/appsettings.json @@ -6,9 +6,9 @@ } }, "AllowedHosts": "*", - "version": "3.2.0", + "version": "3.3.0", "release": { - "short_description": "New MainLayout and Theme Switcher components, along with other enhancements!!!" + "short_description": "New CheckboxInput, PasswordInput, RadioInput, TextInput, TextAreaInput components, along with other enhancements!!!" }, "urls": { "docs": "//docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8", diff --git a/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json b/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json index bb6e7f911..1dd6ae31a 100644 --- a/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json +++ b/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json @@ -1,7 +1,7 @@ { - "version": "3.2.0", + "version": "3.3.0", "release": { - "short_description": "New MainLayout and Theme Switcher components, along with other enhancements!!!" + "short_description": "New CheckboxInput, PasswordInput, RadioInput, TextInput, TextAreaInput components, along with other enhancements!!!" }, "urls": { "docs": "//docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8", diff --git a/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs b/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs index fff52731f..e0ca5cfcd 100644 --- a/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs +++ b/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs @@ -81,13 +81,13 @@ private async Task OnChange(ChangeEventArgs e) private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; /// - /// Gets or sets the maximum length of the input. + /// Gets or sets the maximum number of characters that can be entered. /// [Parameter] public int? MaxLength { get; set; } /// - /// Gets or sets the placeholder. + /// Gets or sets the placeholder text. /// /// /// Default value is null. @@ -117,7 +117,7 @@ private async Task OnChange(ChangeEventArgs e) public string Value { get; set; } = default!; /// - /// This event fired on every user keystroke that changes the NumberInput value. + /// This event fires when the value changes. /// [Parameter] public EventCallback ValueChanged { get; set; } diff --git a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs index 535ade3d5..2a03fe4e8 100644 --- a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs +++ b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs @@ -53,7 +53,7 @@ private async Task OnChange(ChangeEventArgs e) private string autoComplete => AutoComplete ? "true" : "false"; /// - /// If , NumberInput can complete the values automatically by the browser. + /// If , TextInput can complete the values automatically by the browser. /// /// /// Default value is false. @@ -75,13 +75,13 @@ private async Task OnChange(ChangeEventArgs e) private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; /// - /// Gets or sets the maximum length of the input. + /// Gets or sets the maximum number of characters that can be entered. /// [Parameter] public int? MaxLength { get; set; } /// - /// Gets or sets the placeholder. + /// Gets or sets the placeholder text. /// /// /// Default value is null. @@ -105,7 +105,7 @@ private async Task OnChange(ChangeEventArgs e) public string Value { get; set; } = default!; /// - /// This event fired on every user keystroke that changes the NumberInput value. + /// This event fires when the value changes. /// [Parameter] public EventCallback ValueChanged { get; set; } diff --git a/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx b/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx index 86a3047b5..64d07d93a 100644 --- a/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx +++ b/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx @@ -18,7 +18,7 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o Looking to quickly add **Blazor Bootstrap** to your project? Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.2.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ## Add CSS references diff --git a/docs/docs/01-getting-started/01-b-getting-started-webapp-server-global-NET-8.mdx b/docs/docs/01-getting-started/01-b-getting-started-webapp-server-global-NET-8.mdx index 0fb862666..3e3caae48 100644 --- a/docs/docs/01-getting-started/01-b-getting-started-webapp-server-global-NET-8.mdx +++ b/docs/docs/01-getting-started/01-b-getting-started-webapp-server-global-NET-8.mdx @@ -18,7 +18,7 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o Looking to quickly add **Blazor Bootstrap** to your project? Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.2.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ## Add CSS references diff --git a/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx b/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx index 3c4071cad..178b04323 100644 --- a/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx +++ b/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx @@ -20,7 +20,7 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.1.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ### Add CSS references @@ -87,7 +87,7 @@ The default Blazor template includes demonstration code and Bootstrap. To remove Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.2.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ### Register services diff --git a/docs/docs/01-getting-started/01-d-getting-started-maui-blazor-NET-8.mdx b/docs/docs/01-getting-started/01-d-getting-started-maui-blazor-NET-8.mdx index 4a4e514e2..39611413e 100644 --- a/docs/docs/01-getting-started/01-d-getting-started-maui-blazor-NET-8.mdx +++ b/docs/docs/01-getting-started/01-d-getting-started-maui-blazor-NET-8.mdx @@ -18,7 +18,7 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o Looking to quickly add **Blazor Bootstrap** to your project? Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.2.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ## Add CSS references diff --git a/docs/docs/01-getting-started/02-a-getting-started-webassembly-NET-7.mdx b/docs/docs/01-getting-started/02-a-getting-started-webassembly-NET-7.mdx index 9e7d0604f..28a7c9801 100644 --- a/docs/docs/01-getting-started/02-a-getting-started-webassembly-NET-7.mdx +++ b/docs/docs/01-getting-started/02-a-getting-started-webassembly-NET-7.mdx @@ -18,7 +18,7 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o Looking to quickly add **Blazor Bootstrap** to your project? Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.2.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ## Add CSS references diff --git a/docs/docs/01-getting-started/02-b-getting-started-server-NET-7.mdx b/docs/docs/01-getting-started/02-b-getting-started-server-NET-7.mdx index c739ee518..5b21d3f7f 100644 --- a/docs/docs/01-getting-started/02-b-getting-started-server-NET-7.mdx +++ b/docs/docs/01-getting-started/02-b-getting-started-server-NET-7.mdx @@ -18,7 +18,7 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o Looking to quickly add **Blazor Bootstrap** to your project? Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.2.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ## Add CSS references diff --git a/docs/docs/01-getting-started/02-c-getting-started-maui-blazor-NET-7.mdx b/docs/docs/01-getting-started/02-c-getting-started-maui-blazor-NET-7.mdx index 06d1be8b3..cb0476e80 100644 --- a/docs/docs/01-getting-started/02-c-getting-started-maui-blazor-NET-7.mdx +++ b/docs/docs/01-getting-started/02-c-getting-started-maui-blazor-NET-7.mdx @@ -18,7 +18,7 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o Looking to quickly add **Blazor Bootstrap** to your project? Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.2.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ## Add CSS references diff --git a/docs/docs/01-getting-started/03-a-getting-started-webassembly-NET-6.mdx b/docs/docs/01-getting-started/03-a-getting-started-webassembly-NET-6.mdx index 302fa993d..64edd878e 100644 --- a/docs/docs/01-getting-started/03-a-getting-started-webassembly-NET-6.mdx +++ b/docs/docs/01-getting-started/03-a-getting-started-webassembly-NET-6.mdx @@ -18,7 +18,7 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o Looking to quickly add **Blazor Bootstrap** to your project? Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.2.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ## Add CSS references diff --git a/docs/docs/01-getting-started/03-b-getting-started-server-NET-6.mdx b/docs/docs/01-getting-started/03-b-getting-started-server-NET-6.mdx index 87fd31796..0738d1262 100644 --- a/docs/docs/01-getting-started/03-b-getting-started-server-NET-6.mdx +++ b/docs/docs/01-getting-started/03-b-getting-started-server-NET-6.mdx @@ -18,7 +18,7 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o Looking to quickly add **Blazor Bootstrap** to your project? Use NuGet package manager. ```shell -Install-Package Blazor.Bootstrap -Version 3.2.0 +Install-Package Blazor.Bootstrap -Version 3.3.0 ``` ## Add CSS references diff --git a/docs/docs/04-forms/radio-input.mdx b/docs/docs/04-forms/radio-input.mdx index b365a078b..a4103d046 100644 --- a/docs/docs/04-forms/radio-input.mdx +++ b/docs/docs/04-forms/radio-input.mdx @@ -20,6 +20,10 @@ The Blazor Bootstrap `RadioInput` component is constructed using an HTML input o ## Parameters | Name | Type | Default | Required | Description | Added Version | |:--|:--|:--|:--|:--|:--| +| Disabled | bool | false | | Gets or sets the disabled state. | 3.3.0 | +| Label | string | null | | Gets or sets the label. | 3.3.0 | +| Name | string | null | | Gets or sets the name. | 3.3.0 | +| Value | bool | false | ✔️ | Gets or sets the value. | 3.3.0 | ## Methods @@ -32,7 +36,7 @@ The Blazor Bootstrap `RadioInput` component is constructed using an HTML input o | Name | Description | Added Version | |:--|:--|:--| -| ValueChanged | This event fires on every user keystroke that changes the textbox value. | 3.3.0 | +| ValueChanged | This event fires when the `RadioInput` value changes. | 3.3.0 | ## Examples diff --git a/docs/docs/04-forms/text-input.mdx b/docs/docs/04-forms/text-input.mdx index 46fc39e2b..228c77be6 100644 --- a/docs/docs/04-forms/text-input.mdx +++ b/docs/docs/04-forms/text-input.mdx @@ -20,6 +20,12 @@ The Blazor Bootstrap `TextInput` component is constructed using an HTML input of ## Parameters | Name | Type | Default | Required | Description | Added Version | |:--|:--|:--|:--|:--|:--| +| AutoComplete | bool | false | | If `true`, TextInput can complete the values automatically by the browser. | 3.3.0 | +| Disabled | bool | false | | Gets or sets the disabled state. | 3.3.0 | +| MaxLength | int | null | | Gets or sets the maximum number of characters that can be entered. | 3.3.0 | +| Placeholder | string | null | | Gets or sets the placeholder text. | 3.3.0 | +| TextAlignment | `Alignment` | `Alignment.None` | | Gets or sets the text alignment. | 3.3.0 | +| Value | string | null | ✔️ | Gets or sets the value. | 3.3.0 | ## Methods diff --git a/docs/docs/04-forms/textarea-input.mdx b/docs/docs/04-forms/textarea-input.mdx index c9e09baef..7ed140258 100644 --- a/docs/docs/04-forms/textarea-input.mdx +++ b/docs/docs/04-forms/textarea-input.mdx @@ -20,6 +20,13 @@ The Blazor Bootstrap `TextAreaInput` component provides a multi-line plain-text ## Parameters | Name | Type | Default | Required | Description | Added Version | |:--|:--|:--|:--|:--|:--| +| AutoComplete | bool | false | | If `true`, TextInput can complete the values automatically by the browser. | 3.3.0 | +| Cols | int | null | | Gets or sets the number of columns. | 3.3.0 | +| Disabled | bool | false | | Gets or sets the disabled state. | 3.3.0 | +| MaxLength | int | null | | Gets or sets the maximum number of characters that can be entered. | 3.3.0 | +| Placeholder | string | null | | Gets or sets the placeholder text. | 3.3.0 | +| TextAlignment | `Alignment` | `Alignment.None` | | Gets or sets the text alignment. | 3.3.0 | +| Value | string | null | ✔️ | Gets or sets the value. | 3.3.0 | ## Methods @@ -32,7 +39,7 @@ The Blazor Bootstrap `TextAreaInput` component provides a multi-line plain-text | Name | Description | Added Version | |:--|:--|:--| -| ValueChanged | This event fires on every user keystroke that changes the textbox value. | 3.3.0 | +| ValueChanged | This event fires when the `TextAreaInput` value changes. | 3.3.0 | ## Examples diff --git a/docs/package.json b/docs/package.json index 0a03a89a9..bcdfda58e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "blazorbootstrap", - "version": "3.2.0", + "version": "3.3.0", "private": true, "scripts": { "docusaurus": "docusaurus", @@ -41,4 +41,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file From 41ba201f20f19d54bbae1e81cda5c4107693a7b9 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Tue, 28 Jan 2025 22:38:37 +0530 Subject: [PATCH 09/11] Grid - docs update --- docs/docs/05-components/grid.mdx | 190 +++++++++++++++++++++++++++++++ 1 file changed, 190 insertions(+) diff --git a/docs/docs/05-components/grid.mdx b/docs/docs/05-components/grid.mdx index 72d339839..5b18ef707 100644 --- a/docs/docs/05-components/grid.mdx +++ b/docs/docs/05-components/grid.mdx @@ -1949,6 +1949,93 @@ Set `AllowSelection="true"` to enable the selection on the Grid. By default, Sel [See demo here](https://demos.blazorbootstrap.com/grid/selection#selection) +### Default selection + +Set `AllowSelection="true"` to enable the selection on the Grid. By default, `SelectionMode` is **Single**. + +Blazor Bootstrap: Grid Component - Default selection + +```cshtml {} showLineNumbers + + + + + @context.Id + + + @context.Name + + + @context.Designation + + + @context.DOJ + + + @context.IsActive + + + + + +
+ Selected Items Count: @selectedEmployees.Count +
+ +
+ Selected Employees: +
    + @foreach (var emp in selectedEmployees) + { +
  • @emp.Name
    • + } +
+
+``` + +```cs {} showLineNumbers +@code { + private IEnumerable employees = default!; + + private HashSet selectedEmployees = new(){ + new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true } + }; + + private async Task> EmployeesDataProvider(GridDataProviderRequest request) + { + Console.WriteLine("EmployeesDataProvider called..."); + + if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging + employees = GetEmployees(); // call a service or an API to pull the employees + + return await Task.FromResult(request.ApplyTo(employees)); + } + + private IEnumerable GetEmployees() + { + return new List + { + new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, + new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, + new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, + new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, + new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, + new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, + new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, + new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, + new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, + }; + } +} +``` + +[See demo here](https://demos.blazorbootstrap.com/grid/selection#default-selection) + ### Multiple selection To select multiple rows, set `SelectionMode="GridSelectionMode.Multiple"`. @@ -2046,6 +2133,109 @@ Selected items are removed from the selection if they are not rendered after pag [See demo here](https://demos.blazorbootstrap.com/grid/selection#multiple-selection) +### Select all or unselect all programmatically + +**Select** or **unselect** all the items programatically by calling the `SelectAllItemsAsync()` and `UnSelectAllItemsAsync()` methods. Also, set `SelectionMode="GridSelectionMode.Multiple"`. + +Blazor Bootstrap: Grid Component - Select all or unselect all programmatically + +```cshtml {} showLineNumbers +
+ + +
+ + + + + + @context.Id + + + @context.Name + + + @context.Designation + + + @context.DOJ + + + @context.IsActive + + + + + +
+ Selected Items Count: @selectedEmployees.Count +
+ +
+ Selected Employees: +
    + @foreach (var emp in selectedEmployees) + { +
  • @emp.Name
    • + } +
+
+``` + +```cs {} showLineNumbers +@code { + private Grid gridRef; + private IEnumerable employees = default!; + + private HashSet selectedEmployees = new(); + + private async Task> EmployeesDataProvider(GridDataProviderRequest request) + { + Console.WriteLine("EmployeesDataProvider called..."); + + if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging + employees = GetEmployees(); // call a service or an API to pull the employees + + return await Task.FromResult(request.ApplyTo(employees)); + } + + private IEnumerable GetEmployees() + { + return new List + { + new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, + new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, + new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, + new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, + new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, + new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, + new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, + new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, + new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, + }; + } + + private Task OnSelectedItemsChanged(HashSet employees) + { + selectedEmployees = employees is not null && employees.Any() ? employees : new(); + return Task.CompletedTask; + } + + private Task SelectAllEmployees() => gridRef.SelectAllItemsAsync(); + + private Task UnselectAllEmployees() => gridRef.UnSelectAllItemsAsync(); +} +``` + +[See demo here](https://demos.blazorbootstrap.com/grid/selection#select-all-or-unselect-all-programmatically) + ### Disable selection We can disable the header checkbox or row level checkbox based on a condition. From 6d5e16cabd8ba91558d151d72356cd6fc0155efa Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Tue, 28 Jan 2025 23:17:16 +0530 Subject: [PATCH 10/11] Docs update --- README.md | 7 +++- docs/blog/2025-01-28-blazorbootstrap-3.3.0.md | 32 +++++++++++++++++++ nuget/README.md | 7 +++- 3 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 docs/blog/2025-01-28-blazorbootstrap-3.3.0.md diff --git a/README.md b/README.md index 2f1571f1f..479b2ddb7 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ ## Install -Install with [NuGet](https://www.nuget.org/): `Install-Package Blazor.Bootstrap -Version 3.2.0` +Install with [NuGet](https://www.nuget.org/): `Install-Package Blazor.Bootstrap -Version 3.3.0` ## Install Blazor Bootstrap templates @@ -71,6 +71,7 @@ Install [Blazor Bootstrap templates](https://github.com/vikramlearning/blazorboo | Charts: Polar Area chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/polar-area-chart) | [Demos](https://demos.blazorbootstrap.com/charts/polar-area-chart) | | Charts: Radar chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/radar-chart) | [Demos](https://demos.blazorbootstrap.com/charts/radar-chart) | | Charts: Scatter chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/scatter-chart) | [Demos](https://demos.blazorbootstrap.com/charts/scatter-chart) | +| Checkbox Input | [Docs](https://docs.blazorbootstrap.com/forms/checkbox-input) | [Demos](https://demos.blazorbootstrap.com/form/checkbox-input) | | Collapse | [Docs](https://docs.blazorbootstrap.com/components/collapse) | [Demos](https://demos.blazorbootstrap.com/collapse) | | Confirm Dialog | [Docs](https://docs.blazorbootstrap.com/components/confirm-dialog) | [Demos](https://demos.blazorbootstrap.com/confirm-dialog) | | Currency Input | [Docs](https://docs.blazorbootstrap.com/forms/currency-input) | [Demos](https://demos.blazorbootstrap.com/form/currency-input) | @@ -85,10 +86,12 @@ Install [Blazor Bootstrap templates](https://github.com/vikramlearning/blazorboo | Number Input | [Docs](https://docs.blazorbootstrap.com/forms/number-input) | [Demos](https://demos.blazorbootstrap.com/form/number-input) | | Offcanvas | [Docs](https://docs.blazorbootstrap.com/components/offcanvas) | [Demos](https://demos.blazorbootstrap.com/offcanvas) | | Pagination | [Docs](https://docs.blazorbootstrap.com/components/pagination) | [Demos](https://demos.blazorbootstrap.com/pagination) | +| Password Input | [Docs](https://docs.blazorbootstrap.com/forms/password-input) | [Demos](https://demos.blazorbootstrap.com/form/password-input) | | PDF Viewer | [Docs](https://docs.blazorbootstrap.com/components/pdf-viewer) | [Demos](https://demos.blazorbootstrap.com/pdf-viewer) | | Placeholders | [Docs](https://docs.blazorbootstrap.com/components/placeholders) | [Demos](https://demos.blazorbootstrap.com/placeholders) | | Preload | [Docs](https://docs.blazorbootstrap.com/components/preload) | [Demos](https://demos.blazorbootstrap.com/preload) | | Progress | [Docs](https://docs.blazorbootstrap.com/components/progress) | [Demos](https://demos.blazorbootstrap.com/progress) | +| Radio Input | [Docs](https://docs.blazorbootstrap.com/forms/radio-input) | [Demos](https://demos.blazorbootstrap.com/form/radio-input) | | RangeInput | [Docs](https://docs.blazorbootstrap.com/forms/range-input) | [Demos](https://demos.blazorbootstrap.com/form/range-input) | | Ribbon | [Docs](https://docs.blazorbootstrap.com/components/ribbon) | [Demos](https://demos.blazorbootstrap.com/ribbon) | | Script Loader | [Docs](https://docs.blazorbootstrap.com/components/script-loader) | [Demos](https://demos.blazorbootstrap.com/script-loader) | @@ -98,6 +101,8 @@ Install [Blazor Bootstrap templates](https://github.com/vikramlearning/blazorboo | Spinners | [Docs](https://docs.blazorbootstrap.com/components/spinners) | [Demos](https://demos.blazorbootstrap.com/spinners) | | Switch | [Docs](https://docs.blazorbootstrap.com/forms/switch) | [Demos](https://demos.blazorbootstrap.com/form/switch) | | Tabs | [Docs](https://docs.blazorbootstrap.com/components/tabs) | [Demos](https://demos.blazorbootstrap.com/tabs) | +| Text Input | [Docs](https://docs.blazorbootstrap.com/forms/text-input) | [Demos](https://demos.blazorbootstrap.com/form/text-input) | +| TextArea Input | [Docs](https://docs.blazorbootstrap.com/forms/textarea-input) | [Demos](https://demos.blazorbootstrap.com/form/text-area-input) | | Theme Switcher | [Docs](https://docs.blazorbootstrap.com/components/theme-switcher) | [Demos](https://demos.blazorbootstrap.com/theme-switcher) | | Time Input | [Docs](https://docs.blazorbootstrap.com/forms/time-input) | [Demos](https://demos.blazorbootstrap.com/form/time-input) | | Toasts | [Docs](https://docs.blazorbootstrap.com/components/toasts) | [Demos](https://demos.blazorbootstrap.com/toasts) | diff --git a/docs/blog/2025-01-28-blazorbootstrap-3.3.0.md b/docs/blog/2025-01-28-blazorbootstrap-3.3.0.md new file mode 100644 index 000000000..981ceebb2 --- /dev/null +++ b/docs/blog/2025-01-28-blazorbootstrap-3.3.0.md @@ -0,0 +1,32 @@ +--- +title: Blazor Bootstrap v3.3.0 +authors: + name: Vikram Reddy + title: Creator + url: https://github.com/gvreddy04 + image_url: https://avatars.githubusercontent.com/u/2337067 +tags: [v3.3.0, blazor, bootstrap, blazorbootstrap, checkbox, grid, password, radio, text, textarea] +--- + +We are excited to release version 3.3.0, which includes new CheckboxInput, PasswordInput, RadioInput, TextInput, TextAreaInput components, along with other enhancements + +![image](https://i.imgur.com/opicd0P.png "Blazor Bootstrap: Select all or unselect all programmatically") + + + +## What's new +- Form components + - CheckboxInput + - PasswordInput + - RadioInput + - TextInput + - TextAreaInput + +## What's changed +- Grid component + - Select all or unselect all programmatically + - Default selection support added + +## Links +- [Docs Website - Blazor Bootstrap](https://docs.blazorbootstrap.com/) +- [Demos Website - Blazor Bootstrap](https://demos.blazorbootstrap.com/) diff --git a/nuget/README.md b/nuget/README.md index 5a7143d70..93bf85549 100644 --- a/nuget/README.md +++ b/nuget/README.md @@ -18,7 +18,7 @@ Get started any way you want - Clone the repo: `git clone https://github.com/vikramlearning/blazorbootstrap.git` -- Install with [NuGet](https://www.nuget.org/): `Install-Package Blazor.Bootstrap -Version 3.2.0` +- Install with [NuGet](https://www.nuget.org/): `Install-Package Blazor.Bootstrap -Version 3.3.0` - Install [Blazor Bootstrap templates](https://github.com/vikramlearning/blazorbootstrap-project-templates) with **.NET CLI**: `dotnet new install Blazor.Bootstrap.Templates::1.10.0` ![image](https://user-images.githubusercontent.com/2337067/233800604-43986ae7-27dd-4f17-9af6-c2f1a6f07097.png) @@ -50,6 +50,7 @@ Get started any way you want | Charts: Polar Area chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/polar-area-chart) | [Demos](https://demos.blazorbootstrap.com/charts/polar-area-chart) | | Charts: Radar chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/radar-chart) | [Demos](https://demos.blazorbootstrap.com/charts/radar-chart) | | Charts: Scatter chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/scatter-chart) | [Demos](https://demos.blazorbootstrap.com/charts/scatter-chart) | +| Checkbox Input | [Docs](https://docs.blazorbootstrap.com/forms/checkbox-input) | [Demos](https://demos.blazorbootstrap.com/form/checkbox-input) | | Collapse | [Docs](https://docs.blazorbootstrap.com/components/collapse) | [Demos](https://demos.blazorbootstrap.com/collapse) | | Confirm Dialog | [Docs](https://docs.blazorbootstrap.com/components/confirm-dialog) | [Demos](https://demos.blazorbootstrap.com/confirm-dialog) | | Currency Input | [Docs](https://docs.blazorbootstrap.com/forms/currency-input) | [Demos](https://demos.blazorbootstrap.com/form/currency-input) | @@ -64,10 +65,12 @@ Get started any way you want | Number Input | [Docs](https://docs.blazorbootstrap.com/forms/number-input) | [Demos](https://demos.blazorbootstrap.com/form/number-input) | | Offcanvas | [Docs](https://docs.blazorbootstrap.com/components/offcanvas) | [Demos](https://demos.blazorbootstrap.com/offcanvas) | | Pagination | [Docs](https://docs.blazorbootstrap.com/components/pagination) | [Demos](https://demos.blazorbootstrap.com/pagination) | +| Password Input | [Docs](https://docs.blazorbootstrap.com/forms/password-input) | [Demos](https://demos.blazorbootstrap.com/form/password-input) | | PDF Viewer | [Docs](https://docs.blazorbootstrap.com/components/pdf-viewer) | [Demos](https://demos.blazorbootstrap.com/pdf-viewer) | | Placeholders | [Docs](https://docs.blazorbootstrap.com/components/placeholders) | [Demos](https://demos.blazorbootstrap.com/placeholders) | | Preload | [Docs](https://docs.blazorbootstrap.com/components/preload) | [Demos](https://demos.blazorbootstrap.com/preload) | | Progress | [Docs](https://docs.blazorbootstrap.com/components/progress) | [Demos](https://demos.blazorbootstrap.com/progress) | +| Radio Input | [Docs](https://docs.blazorbootstrap.com/forms/radio-input) | [Demos](https://demos.blazorbootstrap.com/form/radio-input) | | RangeInput | [Docs](https://docs.blazorbootstrap.com/forms/range-input) | [Demos](https://demos.blazorbootstrap.com/form/range-input) | | Ribbon | [Docs](https://docs.blazorbootstrap.com/components/ribbon) | [Demos](https://demos.blazorbootstrap.com/ribbon) | | Script Loader | [Docs](https://docs.blazorbootstrap.com/components/script-loader) | [Demos](https://demos.blazorbootstrap.com/script-loader) | @@ -77,6 +80,8 @@ Get started any way you want | Spinners | [Docs](https://docs.blazorbootstrap.com/components/spinners) | [Demos](https://demos.blazorbootstrap.com/spinners) | | Switch | [Docs](https://docs.blazorbootstrap.com/forms/switch) | [Demos](https://demos.blazorbootstrap.com/form/switch) | | Tabs | [Docs](https://docs.blazorbootstrap.com/components/tabs) | [Demos](https://demos.blazorbootstrap.com/tabs) | +| Text Input | [Docs](https://docs.blazorbootstrap.com/forms/text-input) | [Demos](https://demos.blazorbootstrap.com/form/text-input) | +| TextArea Input | [Docs](https://docs.blazorbootstrap.com/forms/textarea-input) | [Demos](https://demos.blazorbootstrap.com/form/text-area-input) | | Theme Switcher | [Docs](https://docs.blazorbootstrap.com/components/theme-switcher) | [Demos](https://demos.blazorbootstrap.com/theme-switcher) | | Time Input | [Docs](https://docs.blazorbootstrap.com/forms/time-input) | [Demos](https://demos.blazorbootstrap.com/form/time-input) | | Toasts | [Docs](https://docs.blazorbootstrap.com/components/toasts) | [Demos](https://demos.blazorbootstrap.com/toasts) | From ad21bf80594d50f6f4c43265dc83823cff7607bd Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Tue, 28 Jan 2025 23:19:28 +0530 Subject: [PATCH 11/11] Tags updated --- blazorbootstrap/BlazorBootstrap.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazorbootstrap/BlazorBootstrap.csproj b/blazorbootstrap/BlazorBootstrap.csproj index 59fce4d46..4c3607f9c 100644 --- a/blazorbootstrap/BlazorBootstrap.csproj +++ b/blazorbootstrap/BlazorBootstrap.csproj @@ -10,7 +10,7 @@ Apache-2.0 https://docs.blazorbootstrap.com/ https://github.com/vikramlearning/blazorbootstrap - Blazor, WebAssembly, BlazorWebAssembly, Bootstrap, Bootstrap5, BlazorBootstrap, BlazorAlert, BlazorAutoComplete, BlazorButtons, BlazorCallout, BlazorCharts, BlazorConfirmDialog, BlazorGrid, BlazorIcon, BlazorImage, BlazorModal, BlazorCurrencyInput, BlazorNumberInput, BlazorInput, BlazorNumber, BlazorDate, BlazorDateInput, BlazorDatePicker, BlazorTime, BlazorTimeInput, BlazorTimePicker, BlazorOffcanvas, BlazorPagination, BlazorPdfViewer, BlazorPlaceholders, BlazorPreload, BlazorProgress, BlazorRibbon, BlazorScriptLoader, BlazorSidebar, BlazorSidebar2, BlazorSortableList, BlazorSwitch, BlazorSpinners, BlazorTabs, BlazorToasts, BlazorTooltips, BlazorTooltips, BlazorBarChart, BlazorDoughnutChart, BlazorLineChart, BlazorPieChart, BlazorPolarAreaChart, BlazorRadarChart, BlazorScatterChart, BlazorMarkdown + Blazor, WebAssembly, BlazorWebAssembly, Bootstrap, Bootstrap5, BlazorBootstrap, BlazorAlert, BlazorAutoComplete, BlazorButtons, BlazorCallout, BlazorCharts, BlazorConfirmDialog, BlazorGrid, BlazorIcon, BlazorImage, BlazorModal, BlazorCheckboxInput, BlazorCurrencyInput, BlazorNumberInput, BlazorInput, BlazorNumber, BlazorDate, BlazorDateInput, BlazorPasswordInput, BlazorDatePicker, BlazorRadioInput, BlazorTextInput, BlazortextAreaInput, BlazorTime, BlazorTimeInput, BlazorTimePicker, BlazorOffcanvas, BlazorPagination, BlazorPdfViewer, BlazorPlaceholders, BlazorPreload, BlazorProgress, BlazorRibbon, BlazorScriptLoader, BlazorSidebar, BlazorSidebar2, BlazorSortableList, BlazorSwitch, BlazorSpinners, BlazorTabs, BlazorToasts, BlazorTooltips, BlazorTooltips, BlazorBarChart, BlazorDoughnutChart, BlazorLineChart, BlazorPieChart, BlazorPolarAreaChart, BlazorRadarChart, BlazorScatterChart, BlazorMarkdown Blazor Bootstrap is a component library built on top of Blazor and Bootstrap5 CSS framework. Vikram Reddy