diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Navs/Pivot/BitPivotTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Navs/Pivot/BitPivotTests.cs index 4fac73e7b0..c533d466be 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Navs/Pivot/BitPivotTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Navs/Pivot/BitPivotTests.cs @@ -71,8 +71,8 @@ public void BitPivotAriaLabelTest(string ariaLabel) [DataTestMethod, DataRow(BitPivotPosition.Top), DataRow(BitPivotPosition.Bottom), - DataRow(BitPivotPosition.Left), - DataRow(BitPivotPosition.Right) + DataRow(BitPivotPosition.Start), + DataRow(BitPivotPosition.End) ] public void BitPivotShouldRespectPosition(BitPivotPosition position) { @@ -85,8 +85,8 @@ public void BitPivotShouldRespectPosition(BitPivotPosition position) { BitPivotPosition.Top => "bit-pvt-top", BitPivotPosition.Bottom => "bit-pvt-btm", - BitPivotPosition.Left => "bit-pvt-lft", - BitPivotPosition.Right => "bit-pvt-rgt", + BitPivotPosition.Start => "bit-pvt-sta", + BitPivotPosition.End => "bit-pvt-end", _ => string.Empty }; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor index bce261375d..609dfb69da 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor @@ -29,7 +29,6 @@ @(item?.Body ?? item?.ChildContent) } - } else { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs index 68fb7a17cf..7644a02eb8 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs @@ -123,8 +123,8 @@ protected override void RegisterCssClasses() { BitPivotPosition.Top => "bit-pvt-top", BitPivotPosition.Bottom => "bit-pvt-btm", - BitPivotPosition.Left => "bit-pvt-lft", - BitPivotPosition.Right => "bit-pvt-rgt", + BitPivotPosition.Start => "bit-pvt-sta", + BitPivotPosition.End => "bit-pvt-end", _ => "bit-pvt-top" }); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss index 18f1fa6f7d..bd87f88080 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss @@ -53,16 +53,16 @@ flex-flow: column-reverse; } -.bit-pvt-lft { +.bit-pvt-sta { flex-flow: row; } -.bit-pvt-rgt { +.bit-pvt-end { flex-flow: row-reverse; } -.bit-pvt-left, -.bit-pvt-right { +.bit-pvt-sta, +.bit-pvt-end { .bit-pvt-hct { height: unset; flex-flow: column; @@ -88,8 +88,7 @@ @media(hover:hover) { &:hover { &::before { - left: 0; - right: 0; + inset-inline: 0; } } } @@ -195,6 +194,7 @@ font-weight: 600; border-radius: 0; user-select: none; + color: $clr-fg-pri; position: relative; text-align: center; height: spacing(5.5); @@ -206,29 +206,42 @@ margin-right: spacing(1); line-height: spacing(5.5); background-color: transparent; - color: $clr-fg-pri; &:before { bottom: 0; content: ""; - left: spacing(1); - right: spacing(1); position: absolute; height: spacing(0.25); + inset-inline-end: spacing(1); background-color: transparent; - transition: left 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s, right 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s; - } - - &:after { - display: block; - overflow: hidden; - font-weight: 700; - color: transparent; - visibility: hidden; - height: spacing(0.125); + inset-inline-start: spacing(1); + transition: inset-inline-start 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s, inset-inline-end 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s; } span { font-size: spacing(2); } } + +.bit-pvt-sta, +.bit-pvt-end { + .bit-pvti-sel { + &:before { + bottom: auto; + top: spacing(1); + width: spacing(0.25); + inset-inline-start: 0; + height: calc(100% - spacing(2)); + transition: top 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s, height 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s; + } + + @media(hover:hover) { + &:hover { + &::before { + top: 0; + height: 100%; + } + } + } + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotPosition.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotPosition.cs index 3e69467a92..eb4cf295d7 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotPosition.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotPosition.cs @@ -3,22 +3,22 @@ public enum BitPivotPosition { /// - /// Display header at the top + /// Display header at the top. /// Top, /// - /// Display header at the bottom + /// Display header at the bottom. /// Bottom, /// - /// Display header at the Left + /// Display header at the start (Left for LTR and Right for RTL). /// - Left, + Start, /// - /// Display header at the right + /// Display header at the end (Right for LTR and Left for RTL). /// - Right, + End, } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor index 82a649ba1a..3d5093f590 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor @@ -459,9 +459,9 @@


-
Pivot Position: Left

+
Pivot Position: Start

- +

Pivot #1: File

@@ -496,9 +496,9 @@



-
Pivot Position: Right

+
Pivot Position: End

- +

Pivot #1: File

@@ -677,27 +677,77 @@ - - -
+
+ + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. -
- - -
+ + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. -
-
- -
+ + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد -
-
- + + +
+


+
+ + + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و + برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و + برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + + + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها + شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها + شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + + + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای + اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای + اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. + + +
+


+
+ + + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و + برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و + برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + + + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها + شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها + شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + + + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای + اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای + اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. + + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs index f9ca588a43..cb9db5bff7 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs @@ -420,14 +420,14 @@ public partial class BitPivotDemo }, new() { - Name= "Left", - Description="Display header at the Left.", + Name= "Start", + Description="Display header at the start (Left for LTR and Right for RTL).", Value="2", }, new() { - Name= "Right", - Description="Display header at the Right.", + Name= "End", + Description="Display header at the end (Right for LTR and Left for RTL).", Value="3", }, ] @@ -878,7 +878,7 @@ These placeholder words symbolize the beginning—a moment of possibility where - +

Pivot #1: File

@@ -912,7 +912,7 @@ These placeholder words symbolize the beginning—a moment of possibility where - +

Pivot #1: File

@@ -1109,24 +1109,68 @@ These placeholder words symbolize the beginning—a moment of possibility where private readonly string example12RazorCode = @" -
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. - چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و - برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. -
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و + برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-
- کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها - شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. -
+ کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها + شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
-
- در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه - راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای - اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد -
+ در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای + اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد +
+
+ + + + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و + برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و + برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + + + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها + شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها + شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + + + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای + اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای + اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. + + + + + + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و + برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و + برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + + + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها + شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها + شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + + + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای + اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای + اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. "; }