To set the Panel position on the page you can use the Position parameter.
-
-
-
- Left
- Right
-
-
- Top
- Bottom
-
+
+
+
+ Start
+ End
+
+
+ Top
+ Bottom
-
-
- BitPanel with custom position and size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
+
+
+ BitPanel with Start position and custom Size.
+
+
+
+
+ BitPanel with End position and custom Size.
+
+
+
+
+ BitPanel with Top position and custom Size.
+
+
+
+
+ BitPanel with Bottom position and custom Size.
+
+
@@ -183,42 +179,38 @@
Explore styling and class customization for BitPanel, including component styles, custom classes, and detailed styles.
-
-
-
Component's Style & Class:
-
Open styled panel
-
Open classed panel
-
-
-
-
Styles & Classes:
-
Open panel styles
-
Open panel classes
-
-
Component's Style & Class:
+ Open Styled panel
+
+ Open Classed panel
+
+ Styles & Classes:
+ Open panel Styles
+
+ Open panel Classes
-
- Content goes here.
+
+ BitPanel with custom style.
-
- Content goes here.
+
+ BitPanel with custom class:
Item 1
Item 2
Item 3
-
- Content goes here.
+
+ BitPanel with Styles to customize its elements.
-
- Content goes here.
+ BitPanel with Classes to customize its elements.
@@ -228,23 +220,33 @@
Use BitPanel in right-to-left (RTL).
-
- باز کردن پنل
-
-
-
-
+
+
+
+
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-
+
+
+
+
+
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+ چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+ کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+ در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+
+
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs
index 96d7f8169b..f1d64e297e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs
@@ -9,22 +9,29 @@ public partial class BitPanelDemo
Name = "AutoToggleScroll",
Type = "bool",
DefaultValue = "false",
- Description = "Enables the auto scrollbar toggle behavior of the Panel.",
+ Description = "Enables the auto scrollbar toggle behavior of the panel.",
+ },
+ new()
+ {
+ Name = "Blocking",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "Whether the panel can be dismissed by clicking outside of it on the overlay.",
},
new()
{
Name = "ChildContent",
Type = "RenderFragment?",
DefaultValue = "null",
- Description = "The content of Panel, It can be Any custom tag or a text.",
+ Description = "The content of the panel.",
},
new()
{
Name = "Classes",
Type = "BitPanelClassStyles?",
DefaultValue = "null",
- Description = "Custom CSS classes for different parts of the BitPanel component.",
- Href = "#panel-class-styles",
+ Description = "Custom CSS classes for different parts of the panel.",
+ Href = "#class-styles",
LinkType = LinkType.Link,
},
new()
@@ -32,42 +39,35 @@ public partial class BitPanelDemo
Name = "FooterTemplate",
Type = "RenderFragment?",
DefaultValue = "null",
- Description = "Used to customize how the footer inside the Panel is rendered.",
+ Description = "The template used to render the footer section of the panel.",
},
new()
{
Name = "HeaderTemplate",
Type = "RenderFragment?",
DefaultValue = "null",
- Description = "Used to customize how the header inside the Panel is rendered.",
+ Description = "The template used to render the header section of the panel.",
},
new()
{
Name = "HeaderText",
Type = "string?",
DefaultValue = "null",
- Description = "Header text of Panel.",
+ Description = "The text of the header section of the panel.",
},
new()
{
- Name = "IsBlocking",
- Type = "bool",
- DefaultValue = "false",
- Description = "Whether the dialog can be light dismissed by clicking outside the dialog (on the overlay).",
- },
- new()
- {
- Name = "IsModeless",
+ Name = "IsOpen",
Type = "bool",
DefaultValue = "false",
- Description = "Whether the dialog should be modeless (e.g. not dismiss when focusing/clicking outside of the dialog). if true: IsBlocking is ignored, there will be no overlay.",
+ Description = "Determines the openness of the panel.",
},
new()
{
- Name = "IsOpen",
+ Name = "Modeless",
Type = "bool",
DefaultValue = "false",
- Description = "Whether the dialog is displayed.",
+ Description = "Removes the overlay element of the panel.",
},
new()
{
@@ -76,42 +76,60 @@ public partial class BitPanelDemo
Description = "A callback function for when the Panel is dismissed.",
},
new()
+ {
+ Name = "OnSwipeStart",
+ Type = "EventCallback
",
+ Description = "The event callback for when the swipe action starts on the container of the panel.",
+ },
+ new()
+ {
+ Name = "OnSwipeMove",
+ Type = "EventCallback",
+ Description = "The event callback for when the swipe action moves on the container of the panel.",
+ },
+ new()
+ {
+ Name = "OnSwipeEnd",
+ Type = "EventCallback",
+ Description = "The event callback for when the swipe action ends on the container of the panel.",
+ },
+ new()
{
Name = "Position",
- Type = "BitPanelPosition",
+ Type = "BitPanelPosition?",
+ DefaultValue = "null",
+ Description = "The position of the panel to show on the screen.",
+ Href = "#position-enum",
LinkType = LinkType.Link,
- Href = "#component-position-enum",
- DefaultValue = "BitPanelPosition.Right",
- Description = "Position of the modal on the screen.",
},
new()
{
Name = "Size",
- Type = "double",
- DefaultValue = "0",
- Description = "Provides Height or Width for the Panel.",
+ Type = "double?",
+ DefaultValue = "null",
+ Description = "The value of the height or width (based on the position) of the Panel.",
},
new()
{
Name = "ScrollerSelector",
Type = "string",
- DefaultValue = "body",
- Description = "Set the element selector for which the Panel disables its scroll if applicable.",
+ DefaultValue = "null",
+ Description = "Specifies the element selector for which the Panel disables its scroll if applicable.",
},
new()
{
Name = "ShowCloseButton",
Type = "bool",
- DefaultValue = "true",
- Description = "Shows or hides the close button of the Panel.",
+ DefaultValue = "false",
+ Description = "Shows the close button of the Panel.",
},
new()
{
Name = "Styles",
Type = "BitPanelClassStyles?",
DefaultValue = "null",
- Description = "Custom CSS styles for different parts of the BitPanel component.",
- Href = "#panel-class-styles",
+ Description = "Custom CSS styles for different parts of the panel component.",
+ Href = "#class-styles",
LinkType = LinkType.Link,
},
new()
@@ -119,14 +137,21 @@ public partial class BitPanelDemo
Name = "SubtitleAriaId",
Type = "string?",
DefaultValue = "null",
- Description = "ARIA id for the subtitle of the Panel, if any.",
+ Description = "Specifies the id for the aria-describedby attribute of the panel.",
+ },
+ new()
+ {
+ Name = "SwipeTrigger",
+ Type = "decimal?",
+ DefaultValue = "null",
+ Description = "The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).",
},
new()
{
Name = "TitleAriaId",
Type = "string?",
DefaultValue = "null",
- Description = "ARIA id for the title of the Panel, if any.",
+ Description = "Specifies the id for the aria-labelledby attribute of the panel.",
},
];
@@ -134,7 +159,7 @@ public partial class BitPanelDemo
[
new()
{
- Id = "panel-class-styles",
+ Id = "class-styles",
Title = "BitPanelClassStyles",
Parameters =
[
@@ -209,13 +234,13 @@ public partial class BitPanelDemo
[
new()
{
- Id = "component-position-enum",
+ Id = "position-enum",
Name = "BitPanelPosition",
Description = "",
Items =
[
- new() { Name = "Right", Value = "0" },
- new() { Name = "Left", Value = "1" },
+ new() { Name = "Start", Value = "0" },
+ new() { Name = "End", Value = "1" },
new() { Name = "Top", Value = "2" },
new() { Name = "Bottom", Value = "3" }
]
@@ -224,60 +249,51 @@ public partial class BitPanelDemo
- private BitPanelClassStyles panelClassStyles = new() { Header = "header-margin" };
-
- private bool IsBasicPanelOpen = false;
-
- private bool IsPanelWithHeaderTextOpen = false;
- private bool IsPanelWithCustomHeaderOpen = false;
-
- private bool IsPanelWithFooterOpen = false;
-
- private bool IsBlockingPanelOpen = false;
- private bool IsModelessPanelOpen = false;
- private bool IsAutoToggleScrollPanelOpen = false;
+ private bool isBasicPanelOpen;
- private bool IsOpenInPosition = false;
+ private bool isPanelWithHeaderTextOpen;
+ private bool isPanelWithCustomHeaderOpen;
- private bool IsStyledPanelOpen = false;
- private bool IsClassedPanelOpen = false;
- private bool IsPanelStylesOpen = false;
- private bool IsPanelClassesOpen = false;
-
- private bool IsRtlPanelOpen = false;
+ private bool isPanelWithFooterOpen;
+ private bool isBlockingPanelOpen;
+ private bool isModelessPanelOpen;
+ private bool isAutoToggleScrollPanelOpen;
private BitPanel bitPanelRef = default!;
- private double CustomPanelSize = 320;
+ private double customPanelSize = 300;
+ private bool isOpenInPositionStart;
+ private bool isOpenPositionEnd;
+ private bool isOpenInPositionTop;
+ private bool isOpenInPositionBottom;
- private BitPanelPosition position;
+ private bool isStyledPanelOpen;
+ private bool isClassedPanelOpen;
+ private bool isPanelStylesOpen;
+ private bool isPanelClassesOpen;
- private void OpenPanelInPosition(BitPanelPosition positionValue)
- {
- IsOpenInPosition = true;
- position = positionValue;
- }
+ private bool isRtlPanelOpenStart;
+ private bool isRtlPanelOpenEnd;
private readonly string example1RazorCode = @"
- IsBasicPanelOpen = true"">Open Panel
-
-
- Content goes here.
+ isBasicPanelOpen = true"">Open Panel
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+ amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+ sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+ turpis.
+
";
private readonly string example1CsharpCode = @"
-private bool IsBasicPanelOpen = false;";
+private bool isBasicPanelOpen;";
private readonly string example2RazorCode = @"
-Panel with header text
- IsPanelWithHeaderTextOpen = true"">Open Panel
-
-Panel with custom header content
- IsPanelWithCustomHeaderOpen = true"">Open Panel
-
-
-
+ isPanelWithHeaderTextOpen = true"">Open Panel
+
+