From 5747d5f51caad53edfa040aac3239cb9c64c1c3d Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 23 Sep 2023 18:16:41 +0530 Subject: [PATCH 1/2] Add feature to disable Dropdown #373 --- .../Dropdowns/DropdownDocumentation.razor | 8 +- .../Dropdowns/Dropdown_Demo_04_A_Sizing.razor | 10 +- .../Dropdowns/Dropdown_Demo_04_B_Sizing.razor | 10 +- .../Dropdown_Demo_07_A_Disabled.razor | 19 ++++ ...azor => Dropdown_Demo_07_B_Disabled.razor} | 0 .../Components/Dropdown/Dropdown.razor | 18 ++-- .../Components/Dropdown/Dropdown.razor.cs | 18 +++- .../Dropdown/DropdownActionButton.razor | 7 +- .../Dropdown/DropdownActionButton.razor.cs | 10 +- .../Dropdown/DropdownToggleButton.razor | 7 +- .../Dropdown/DropdownToggleButton.razor.cs | 10 +- docs/docs/05-components/dropdown.md | 99 ++++++++++++------- 12 files changed, 151 insertions(+), 65 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_A_Disabled.razor rename BlazorBootstrap.Demo.RCL/Pages/Dropdowns/{Dropdown_Demo_07_Disabled.razor => Dropdown_Demo_07_B_Disabled.razor} (100%) diff --git a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/DropdownDocumentation.razor index ccdbf42e9..fa0ccd227 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/DropdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/DropdownDocumentation.razor @@ -56,9 +56,13 @@
- To style DropdownItem as disabled, add the Disabled="true" parameter to the DropdownItem element in the DropdownMenu component. + To disable the dropdown, set the Disabled parameter to true on the Dropdown component.
- + +
+ To style a dropdown item as disabled, set the Disabled parameter to true on the DropdownItem element in the DropdownMenu component. +
+
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor index 91f5aee69..d4bb5669f 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor @@ -1,15 +1,15 @@ 
- - Large button + + Large button Action Another action Something else here - - Large split button - + + Large split button + Action Another action diff --git a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor index 78ef2d4ea..d06e3bb71 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor @@ -1,15 +1,15 @@ 
- - Small button + + Small button Action Another action Something else here - - Small split button - + + Small split button + Action Another action diff --git a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_A_Disabled.razor b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_A_Disabled.razor new file mode 100644 index 000000000..47bc0e1fa --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_A_Disabled.razor @@ -0,0 +1,19 @@ + + Dropstart + + Action + Another action + Something else here + + + +
+ + +
+@code +{ + private bool isDropdownDisabled = true; + private void EnableDropdown() => isDropdownDisabled = false; + private void DisableDropdown() => isDropdownDisabled = true; +} diff --git a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_Disabled.razor b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_B_Disabled.razor similarity index 100% rename from BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_Disabled.razor rename to BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_B_Disabled.razor diff --git a/blazorbootstrap/Components/Dropdown/Dropdown.razor b/blazorbootstrap/Components/Dropdown/Dropdown.razor index 883bafa4d..d2620fe1f 100644 --- a/blazorbootstrap/Components/Dropdown/Dropdown.razor +++ b/blazorbootstrap/Components/Dropdown/Dropdown.razor @@ -1,12 +1,16 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase - - - -
- @ChildContent -
+ + + + + +
+ @ChildContent +
+ + - \ No newline at end of file + diff --git a/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs b/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs index 21a7f61c6..cc0dafdc1 100644 --- a/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs +++ b/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs @@ -1,4 +1,6 @@ -namespace BlazorBootstrap; +using System.Drawing; + +namespace BlazorBootstrap; public partial class Dropdown { @@ -102,11 +104,17 @@ protected override void OnInitialized() public RenderFragment ChildContent { get; set; } = default!; /// - /// Gets or sets the dropdown direction. + /// Gets or sets the direction of the dropdown menu. /// [Parameter] public DropdownDirection Direction { get; set; } = DropdownDirection.Dropdown; + /// + /// Gets or sets whether the dropdown menu is disabled. + /// + [Parameter] + public bool Disabled { get; set; } + /// /// This event is fired when an dropdown element has been hidden from the user (will wait for CSS transitions to complete). /// @@ -132,6 +140,12 @@ protected override void OnInitialized() [Parameter] public EventCallback OnShown { get; set; } + /// + /// Gets or sets the size of the . + /// + [Parameter] + public Size Size { get; set; } + /// /// Gets or sets the toggle button split behavior. /// diff --git a/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor b/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor index 080561ad1..16e36d4d8 100644 --- a/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor +++ b/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor @@ -1,6 +1,11 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase - \ No newline at end of file diff --git a/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor.cs b/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor.cs index 8d5a7e0c0..23b11da60 100644 --- a/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor.cs +++ b/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor.cs @@ -60,9 +60,15 @@ public ButtonColor Color } /// - /// Changes the size of a button. + /// Gets or sets the disabled. /// - [Parameter] + [CascadingParameter(Name = "Disabled")] + public bool Disabled { get; set; } + + /// + /// Gets or sets the size of the . + /// + [CascadingParameter(Name = "Size")] public Size Size { get => size; diff --git a/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor b/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor index 080561ad1..16e36d4d8 100644 --- a/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor +++ b/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor @@ -1,6 +1,11 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase - \ No newline at end of file diff --git a/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor.cs b/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor.cs index c318402fe..d8a02f9bb 100644 --- a/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor.cs +++ b/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor.cs @@ -99,9 +99,15 @@ public ButtonColor Color } /// - /// Gets or sets the button size. + /// Gets or sets the disabled. /// - [Parameter] + [CascadingParameter(Name = "Disabled")] + public bool Disabled { get; set; } + + /// + /// Gets or sets the size of the . + /// + [CascadingParameter(Name = "Size")] public Size Size { get => size; diff --git a/docs/docs/05-components/dropdown.md b/docs/docs/05-components/dropdown.md index 7ab676f4a..9ee00f64b 100644 --- a/docs/docs/05-components/dropdown.md +++ b/docs/docs/05-components/dropdown.md @@ -21,7 +21,9 @@ They are toggled by clicking, not by hovering; this is an intentional design dec | AutoClose | bool | Enables or disables the auto close. | | true | 1.10.0 | | AutoCloseBehavior | `DropdownAutoCloseBehavior` | Gets or sets the auto close behavior of the dropdown. | | `DropdownAutoCloseBehavior.Both` | 1.10.0 | | ChildContent | RenderFragment | Specifies the content to be rendered inside the Dropdown. | | | 1.10.0 | -| Direction | `DropdownDirection` | Gets or sets the dropdown direction. | | `DropdownDirection.Dropdown` | 1.10.0 | +| Direction | `DropdownDirection` | Gets or sets the direction of the dropdown menu. | | `DropdownDirection.Dropdown` | 1.10.0 | +| Disabled | bool | Gets or sets whether the dropdown menu is disabled. | | false | 1.10.3 | +| Size | `Size` | Gets or sets the size of the dropdown. | | `Size.None` | 1.10.3 | | Split | bool | Gets or sets the toggle button split behavior. | | false | 1.10.0 | ## DropdownToggleButton Parameters @@ -30,7 +32,6 @@ They are toggled by clicking, not by hovering; this is an intentional design dec |:--|:--|:--|:--|:--|:--| | ChildContent | RenderFragment | Specifies the content to be rendered inside the DropdownToggleButton. | | | 1.10.0 | | Color | `ButtonColor` | Gets or sets the button color. | | | 1.10.0 | -| Size | `Size` | Gets or sets the button size. | | | 1.10.0 | | TabIndex | `int?` | If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. | | | 1.10.0 | ## DropdownActionButton Parameters @@ -39,7 +40,6 @@ They are toggled by clicking, not by hovering; this is an intentional design dec |:--|:--|:--|:--|:--|:--| | ChildContent | RenderFragment | Specifies the content to be rendered inside the DropdownActionButton. | | | 1.10.0 | | Color | `ButtonColor` | Gets or sets the button color. | | | 1.10.0 | -| Size | `Size` | Gets or sets the button size. | | | 1.10.0 | | TabIndex | `int?` | If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. | | | 1.10.0 | ## DropdownMenu Parameters @@ -108,7 +108,7 @@ They are toggled by clicking, not by hovering; this is an intentional design dec Blazor Bootstrap: Dropdown Component - Color -```cshtml {} showLineNumbers +```cshtml {3,11,19,27,35,43} showLineNumbers
Primary @@ -167,7 +167,7 @@ They are toggled by clicking, not by hovering; this is an intentional design dec Blazor Bootstrap: Dropdown Component - Split button -```cshtml {} showLineNumbers +```cshtml {3-4,12-13,21-22,30-31,39-40,48-49} showLineNumbers
Primary @@ -232,19 +232,19 @@ They are toggled by clicking, not by hovering; this is an intentional design dec Blazor Bootstrap: Dropdown Component - Sizing - Large -```cshtml {} showLineNumbers +```cshtml {2,10} showLineNumbers
- - Large button + + Large button Action Another action Something else here - - Large split button - + + Large split button + Action Another action @@ -256,19 +256,19 @@ They are toggled by clicking, not by hovering; this is an intentional design dec Blazor Bootstrap: Dropdown Component - Sizing - Small -```cshtml {} showLineNumbers +```cshtml {2,10} showLineNumbers
- - Small button + + Small button Action Another action Something else here - - Small split button - + + Small split button + Action Another action @@ -288,7 +288,7 @@ To trigger **DropdownMenu** above elements, add the `Direction="DropdownDirectio Blazor Bootstrap: Dropdown Component - Dropup -```cshtml {} showLineNumbers +```cshtml {2,10} showLineNumbers
Dropup button with text @@ -318,7 +318,7 @@ To center the DropdownMenu above the toggle, add the Direction="DropdownDirectio Blazor Bootstrap: Dropdown Component - Dropup centered -```cshtml {} showLineNumbers +```cshtml {2} showLineNumbers
Centered dropup @@ -339,7 +339,7 @@ To trigger DropdownMenu at the right of elements, add the Direction="DropdownDir Blazor Bootstrap: Dropdown Component - Dropend -```cshtml {} showLineNumbers +```cshtml {2,10} showLineNumbers
Dropend @@ -369,7 +369,7 @@ To trigger DropdownMenu at the left of elements, you can add the Direction="Drop Blazor Bootstrap: Dropdown Component - Dropstart -```cshtml {} showLineNumbers +```cshtml {2,10} showLineNumbers
Dropstart @@ -399,7 +399,7 @@ To style DropdownItem as active, add the Active="true" parameter to the Dropdown Blazor Bootstrap: Dropdown Component - Active -```cshtml {} showLineNumbers +```cshtml {5} showLineNumbers Dropstart @@ -414,11 +414,37 @@ To style DropdownItem as active, add the Active="true" parameter to the Dropdown ### Disabled -To style DropdownItem as disabled, add the Disabled="true" parameter to the DropdownItem element in the DropdownMenu component. +To disable the dropdown, set the Disabled parameter to true on the Dropdown component. -Blazor Bootstrap: Dropdown Component - Disabled +Blazor Bootstrap: Dropdown Component - Disabled -```cshtml {} showLineNumbers +```cshtml {1} showLineNumbers + + Dropstart + + Action + Another action + Something else here + + + +
+ + +
+@code +{ + private bool isDropdownDisabled = true; + private void EnableDropdown() => isDropdownDisabled = false; + private void DisableDropdown() => isDropdownDisabled = true; +} +``` + +To style a dropdown item as disabled, set the Disabled parameter to true on the DropdownItem element in the DropdownMenu component. + +Blazor Bootstrap: Dropdown Component - Disabled (Dropdown Item) + +```cshtml {5} showLineNumbers Dropstart @@ -439,7 +465,7 @@ To right-align a DropdownMenu, add the Position="DropdownMenuPosition.End" param Blazor Bootstrap: Dropdown Component - Menu position -```cshtml {} showLineNumbers +```cshtml {3} showLineNumbers Right-aligned menu example @@ -460,7 +486,7 @@ Add a header to label sections of actions in any dropdown menu. Blazor Bootstrap: Dropdown Component - Header -```cshtml {} showLineNumbers +```cshtml {4} showLineNumbers Dropdown @@ -480,7 +506,7 @@ Separate groups of related menu items with a divider. Blazor Bootstrap: Dropdown Component - Dividers -```cshtml {} showLineNumbers +```cshtml {7} showLineNumbers Dropdown @@ -501,7 +527,7 @@ Place any freeform text within a dropdown menu with text and use spacing utiliti Blazor Bootstrap: Dropdown Component - Text -```cshtml {} showLineNumbers +```cshtml {3-6} showLineNumbers Dropdown @@ -519,7 +545,7 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use marg Blazor Bootstrap: Dropdown Component - Forms -```cshtml {} showLineNumbers +```cshtml {4-14,20-47} showLineNumbers @using System.ComponentModel.DataAnnotations