feat(blazorui): add Responsive parameter to BitDropMenu #8774 (#8778)

bitfoundation · Sep 27, 2024 · 2102b4c · 2102b4c
1 parent e9dcecb
commit 2102b4c
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 9 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
@@ -49,6 +49,11 @@ public partial class BitDropMenu : BitComponentBase
     /// </summary>
     [Parameter] public EventCallback OnClick { get; set; }
 
+    /// <summary>
+    /// Renders the drop menu in responsive mode on small screens.
+    /// </summary>
+    [Parameter] public bool Responsive { get; set; }
+
     /// <summary>
     /// Custom CSS styles for different parts of the drop menu.
     /// </summary>
@@ -143,7 +148,7 @@ await _js.ToggleCallout(_dotnetObj,
                                 _calloutId,
                                 null,
                                 IsOpen,
-                                BitResponsiveMode.None,
+                                Responsive ? BitResponsiveMode.Panel : BitResponsiveMode.None,
                                 BitDropDirection.TopAndBottom,
                                 Dir is BitDir.Rtl,
                                 "",

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss
@@ -26,6 +26,12 @@
             cursor: default;
         }
     }
+
+    &.bit-rtl {
+        .bit-drm-rsp {
+            animation-name: bit-fade-show, bit-drp-trans-x-reverse;
+        }
+    }
 }
 
 .bit-drm-btn {
@@ -79,3 +85,10 @@
     animation-name: bit-fade-show, bit-slide-down;
     animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
 }
+
+.bit-drm-rsp {
+    height: 100%;
+    max-height: unset;
+    box-shadow: $box-shadow-callout;
+    animation-name: bit-fade-show, bit-drp-trans-x;
+}
diff --git a/...Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor b/...Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
@@ -53,7 +53,21 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Template" RazorCode="@example3RazorCode" Id="example3">
+    <ComponentExampleBox Title="Responsive" RazorCode="@example3RazorCode" Id="example3">
+        <ExamplePreview>
+            <div>Rendering the callout in responsive mode on small screens.</div><br />
+            <BitDropMenu Text="Responsive" Responsive>
+                <BitStack Gap="1rem" Style="padding:0.5rem">
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                </BitStack>
+            </BitDropMenu>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Template" RazorCode="@example4RazorCode" Id="example4">
         <ExamplePreview>
             <div>Here is an example of customizing the drop menu.</div><br />
             <BitDropMenu Text="Add Icon" IconName="@BitIconName.Emoji2">
@@ -73,7 +87,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Events" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+    <ComponentExampleBox Title="Events" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
         <ExamplePreview>
             <div>Utilizing the drop menu OnClick event:</div><br />
             <BitDropMenu Text="@($"Click me ({clickCounter})")" OnClick="() => clickCounter++">
@@ -84,7 +98,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example6RazorCode" Id="example6">
         <ExamplePreview>
             <div>Further customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
             <br /><br />
@@ -126,7 +140,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="RTL" RazorCode="@example6RazorCode" Id="example6">
+    <ComponentExampleBox Title="RTL" RazorCode="@example7RazorCode" Id="example7">
         <ExamplePreview>
             <div>Use BitDropMenu in right-to-left (RTL).</div>
             <br />

diff --git a/...ent/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs b/...ent/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs
@@ -56,6 +56,13 @@ public partial class BitDropMenuDemo
             Description = "The callback is called when the drop menu is clicked."
         },
         new()
+        {
+            Name = "Responsive",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Renders the drop menu in responsive mode on small screens."
+        },
+        new()
         {
             Name = "Styles",
             Type = "BitDropMenuClassStyles?",

diff --git a/...BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs b/...BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
@@ -41,6 +41,16 @@ public partial class BitDropMenuDemo
 </BitDropMenu>";
 
     private readonly string example3RazorCode = @"
+<BitDropMenu Text=""Responsive"" Responsive>
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+    </BitStack>
+</BitDropMenu>";
+
+    private readonly string example4RazorCode = @"
 <BitDropMenu Text=""Add Icon"" IconName=""@BitIconName.Emoji2"">
     <Template>
         <div style=""display:flex;gap:10px;"">
@@ -56,16 +66,16 @@ public partial class BitDropMenuDemo
     </Body>
 </BitDropMenu>";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example5RazorCode = @"
 <BitDropMenu Text=""@($""Click me ({clickCounter})"")"" OnClick=""() => clickCounter++"">
     <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
         <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
     </BitStack>
 </BitDropMenu>";
-    private readonly string example4CsharpCode = @"
+    private readonly string example5CsharpCode = @"
 private int clickCounter;";
 
-    private readonly string example5RazorCode = @"
+    private readonly string example6RazorCode = @"
 <style>
     .custom-class {
         border-radius: 1rem;
@@ -131,7 +141,7 @@ public partial class BitDropMenuDemo
     </BitStack>
 </BitDropMenu>";
 
-    private readonly string example6RazorCode = @"
+    private readonly string example7RazorCode = @"
 <BitDropMenu Text=""منو"" Dir=""BitDir.Rtl"">
     <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
         <BitText Typography=""BitTypography.Subtitle1"">این یک محتوای تستی می باشد.</BitText>