Add feature to disable the Dropdown

BlazorBootstrap.Demo.RCL/Pages/Dropdowns/DropdownDocumentation.razor

@@ -56,9 +56,13 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Disabled" PageUrl="@pageUrl" HashTagName="disabled" />
 <div class="mb-3">
-    To style <b>DropdownItem</b> as disabled, add the <code>Disabled="true"</code> parameter to the <b>DropdownItem</b> element in the <b>DropdownMenu</b> component.
+    To disable the dropdown, set the <b>Disabled</b> parameter to <b>true</b> on the <b>Dropdown</b> component.
 </div>
-<Demo Type="typeof(Dropdown_Demo_07_Disabled)" Tabs="false" />
+<Demo Type="typeof(Dropdown_Demo_07_A_Disabled)" Tabs="false" />
+<div class="mb-3">
+    To style a dropdown item as disabled, set the <b>Disabled</b> parameter to <b>true</b> on the <b>DropdownItem</b> element in the <b>DropdownMenu</b> component.
+</div>
+<Demo Type="typeof(Dropdown_Demo_07_B_Disabled)" Tabs="false" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Menu position" PageUrl="@pageUrl" HashTagName="menu-position" />
 <div class="mb-3">

BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor

@@ -1,15 +1,15 @@
 <div class="d-flex gap-2 mb-4">
-    <Dropdown>
-        <DropdownToggleButton Color="ButtonColor.Secondary" Size="Size.Large">Large button</DropdownToggleButton>
+    <Dropdown Size="Size.Large">
+        <DropdownToggleButton Color="ButtonColor.Secondary">Large button</DropdownToggleButton>
         <DropdownMenu>
             <DropdownItem Size="Size.Large" To="#" Type="ButtonType.Link">Action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
         </DropdownMenu>
     </Dropdown>
-    <Dropdown Split="true">
-        <DropdownActionButton Color="ButtonColor.Secondary" Size="Size.Large">Large split button</DropdownActionButton>
-        <DropdownToggleButton Color="ButtonColor.Secondary" Size="Size.Large" />
+    <Dropdown Size="Size.Large" Split="true">
+        <DropdownActionButton Color="ButtonColor.Secondary">Large split button</DropdownActionButton>
+        <DropdownToggleButton Color="ButtonColor.Secondary" />
         <DropdownMenu>
             <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>

BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor

@@ -1,15 +1,15 @@
 <div class="d-flex gap-2 mb-4">
-    <Dropdown>
-        <DropdownToggleButton Color="ButtonColor.Secondary" Size="Size.Small">Small button</DropdownToggleButton>
+    <Dropdown Size="Size.Small">
+        <DropdownToggleButton Color="ButtonColor.Secondary">Small button</DropdownToggleButton>
         <DropdownMenu>
             <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
         </DropdownMenu>
     </Dropdown>
-    <Dropdown Split="true">
-        <DropdownActionButton Color="ButtonColor.Secondary" Size="Size.Small">Small split button</DropdownActionButton>
-        <DropdownToggleButton Color="ButtonColor.Secondary" Size="Size.Small" />
+    <Dropdown Size="Size.Small" Split="true">
+        <DropdownActionButton Color="ButtonColor.Secondary">Small split button</DropdownActionButton>
+        <DropdownToggleButton Color="ButtonColor.Secondary" />
         <DropdownMenu>
             <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>

BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_A_Disabled.razor

@@ -0,0 +1,19 @@
+<Dropdown Disabled="@isDropdownDisabled">
+    <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
+    <DropdownMenu>
+        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
+        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
+        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
+    </DropdownMenu>
+</Dropdown>
+
+<div class="mt-3">
+    <Button Color="ButtonColor.Primary" Size="Size.Small" @onclick="EnableDropdown">Enable</Button>
+    <Button Color="ButtonColor.Danger" Size="Size.Small" @onclick="DisableDropdown">Disable</Button>
+</div>
+@code
+{
+    private bool isDropdownDisabled = true;
+    private void EnableDropdown() => isDropdownDisabled = false;
+    private void DisableDropdown() => isDropdownDisabled = true;
+}

blazorbootstrap/Components/Dropdown/Dropdown.razor

@@ -1,12 +1,16 @@
 @namespace BlazorBootstrap
 @inherits BlazorBootstrapComponentBase
 
-<CascadingValue IsFixed="true" Value="@Split" Name="Split">
-    <CascadingValue IsFixed="true" Value="@AutoClose" Name="AutoClose">
-        <CascadingValue IsFixed="true" Value="@AutoCloseBehavior" Name="AutoCloseBehavior">
-            <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
-                @ChildContent
-            </div>
+<CascadingValue IsFixed="true" Value="@AutoClose" Name="AutoClose">
+    <CascadingValue IsFixed="true" Value="@AutoCloseBehavior" Name="AutoCloseBehavior">
+        <CascadingValue IsFixed="true" Value="@Disabled" Name="Disabled">
+            <CascadingValue IsFixed="true" Value="@Size" Name="Size">
+                <CascadingValue IsFixed="true" Value="@Split" Name="Split">
+                    <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+                        @ChildContent
+                    </div>
+                </CascadingValue>
+            </CascadingValue>
         </CascadingValue>
     </CascadingValue>
-</CascadingValue>
+</CascadingValue>

blazorbootstrap/Components/Dropdown/Dropdown.razor.cs

@@ -102,11 +102,17 @@ protected override void OnInitialized()
     public RenderFragment ChildContent { get; set; } = default!;
 
     /// <summary>
-    /// Gets or sets the dropdown direction.
+    /// Gets or sets the direction of the dropdown menu.
     /// </summary>
     [Parameter]
     public DropdownDirection Direction { get; set; } = DropdownDirection.Dropdown;
 
+    /// <summary>
+    /// Gets or sets whether the dropdown menu is disabled.
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; }
+
     /// <summary>
     /// This event is fired when an dropdown element has been hidden from the user (will wait for CSS transitions to complete).
     /// </summary>
@@ -132,6 +138,12 @@ protected override void OnInitialized()
     [Parameter]
     public EventCallback OnShown { get; set; }
 
+    /// <summary>
+    /// Gets or sets the size of the <see cref="Dropdown" />.
+    /// </summary>
+    [Parameter]
+    public Size Size { get; set; }
+
     /// <summary>
     /// Gets or sets the toggle button split behavior.
     /// </summary>

blazorbootstrap/Components/Dropdown/DropdownActionButton.razor

@@ -1,6 +1,11 @@
 @namespace BlazorBootstrap
 @inherits BlazorBootstrapComponentBase
 
-<button @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+<button @ref="@ElementRef"
+        @attributes="@Attributes"
+        class="@ClassNames"
+        disabled="@Disabled"
+        id="@ElementId"
+        style="@StyleNames">
     @ChildContent
 </button>

blazorbootstrap/Components/Dropdown/DropdownActionButton.razor.cs

@@ -60,9 +60,15 @@ public ButtonColor Color
     }
 
     /// <summary>
-    /// Changes the size of a button.
+    /// Gets or sets the disabled.
     /// </summary>
-    [Parameter]
+    [CascadingParameter(Name = "Disabled")]
+    public bool Disabled { get; set; }
+
+    /// <summary>
+    /// Gets or sets the size of the <see cref="DropdownActionButton" />.
+    /// </summary>
+    [CascadingParameter(Name = "Size")]
     public Size Size
     {
         get => size;

blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor

@@ -1,6 +1,11 @@
 @namespace BlazorBootstrap
 @inherits BlazorBootstrapComponentBase
 
-<button @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+<button @ref="@ElementRef"
+        @attributes="@Attributes"
+        class="@ClassNames"
+        disabled="@Disabled"
+        id="@ElementId"
+        style="@StyleNames">
     @ChildContent
 </button>

blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor.cs

@@ -99,9 +99,15 @@ public ButtonColor Color
     }
 
     /// <summary>
-    /// Gets or sets the button size.
+    /// Gets or sets the disabled.
     /// </summary>
-    [Parameter]
+    [CascadingParameter(Name = "Disabled")]
+    public bool Disabled { get; set; }
+
+    /// <summary>
+    /// Gets or sets the size of the <see cref="DropdownToggleButton" />.
+    /// </summary>
+    [CascadingParameter(Name = "Size")]
     public Size Size
     {
         get => size;