diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor index af87cae66b..560fb61fbe 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor @@ -15,7 +15,7 @@ - @if (ShowNextPrev) + @if (HideNextPrev is false) {
@@ -26,14 +26,14 @@
} - @*@if (ShowDots) + @*@if (HideDots is false) { -
- @for (int i = 0; i < _pagesCount; i++) - { - int index = i; -
- } -
+
+ @for (int i = 0; i < _pagesCount; i++) + { + int index = i; +
+ } +
}*@ \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor.cs index 10aa973d7e..45fbf37d51 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor.cs @@ -32,10 +32,20 @@ public partial class BitSwiper : BitComponentBase, IAsyncDisposable + /// + /// Sets the duration of the scrolling animation in seconds (the default value is 0.5). + /// + [Parameter] public double AnimationDuration { get; set; } = 0.5; + ///// - ///// If enabled the swiper items will navigate in an infinite loop. + ///// Enables/disables the auto scrolling of the slides. ///// - //[Parameter] public bool InfiniteScrolling { get; set; } + //[Parameter] public bool AutoPlay { get; set; } + + ///// + ///// Sets the interval of the auto scrolling in milliseconds (the default value is 2000). + ///// + //[Parameter] public double AutoPlayInterval { get; set; } = 2000; /// /// Items of the swiper. @@ -43,41 +53,40 @@ public partial class BitSwiper : BitComponentBase, IAsyncDisposable [Parameter] public RenderFragment? ChildContent { get; set; } ///// - ///// Shows or hides the Dots indicator at the bottom of the BitSwiper. + ///// Hides the Dots indicator at the bottom of the BitSwiper. ///// - //[Parameter] public bool ShowDots { get; set; } = true; + //[Parameter] public bool HideDots { get; set; } /// - /// Shows or hides the Next/Prev buttons of the BitSwiper. + /// Hides the Next/Prev buttons of the BitSwiper. /// - [Parameter] public bool ShowNextPrev { get; set; } = true; + [Parameter] public bool HideNextPrev { get; set; } + + ///// + ///// If enabled the swiper items will navigate in an infinite loop. + ///// + //[Parameter] public bool InfiniteScrolling { get; set; } /// - /// Number of items that is going to be changed on navigation + /// Number of items that is going to be changed on navigation. /// [Parameter] public int ScrollItemsCount { get; set; } = 1; - ///// - ///// Enables/disables the auto scrolling of the slides. - ///// - //[Parameter] public bool AutoPlay { get; set; } - ///// - ///// Sets the interval of the auto scrolling in milliseconds (the default value is 2000). - ///// - //[Parameter] public double AutoPlayInterval { get; set; } = 2000; /// - /// Sets the duration of the scrolling animation in seconds (the default value is 0.5). + /// Navigates to the next swiper item. /// - [Parameter] public double AnimationDuration { get; set; } = 0.5; - - + public async Task GoNext() => await Go(true); + /// + /// Navigates to the previous swiper item. + /// public async Task GoPrev() => await Go(false); - public async Task GoNext() => await Go(true); - + /// + /// Navigates to the given swiper item index. + /// public async Task GoTo(int index) => await GotoPage(index - 1); @@ -120,7 +129,7 @@ internal void RegisterItem(BitSwiperItem item) _allItems.Add(item); } - internal void UnregisterItem(BitSwiperItem carouselItem) => _allItems.Remove(carouselItem); + internal void UnregisterItem(BitSwiperItem item) => _allItems.Remove(item); diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor index bcfabe37ea..49daf66b14 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor @@ -7,298 +7,81 @@ - +
- - -
1
- - - -
2
- - - -
3
- - - -
4
- - - -
5
- - - -
6
- - - -
7
- - - -
8
- - - -
9
- - - -
10
- - - -
11
- - - -
12
- - - -
13
- - - -
14
- - - -
15
- - - -
16
- - - -
17
- - - -
18
- - - -
19
- - - -
20
- - - -
21
- - - -
22
- - - -
23
- - - -
24
- - - -
25
- - - -
26
- - - -
27
- - - -
28
- - - -
29
- - - -
30
- - - -
31
- - - -
32
- - + + @for (int i = 1; i <= 32; i++) + { + var index = i; + var imageIndex = (index - 1) % 4 + 1; + +
Item @index
+ + + }
- + +
Configure BitSwiper to scroll multiple items at once.
+
- - -
یک
- - - -
دو
- - - -
سه
- - - -
چهار
- - - -
پنج
- - - -
شش
- - - -
هفت
- - - -
هشت
- - - -
نه
- - - -
ده
- - - -
11
- - - -
12
- - - -
13
- - - -
14
- - - -
15
- - - -
16
- - - -
17
- - - -
18
- - - -
19
- - - -
20
- - - -
21
- - - -
22
- - - -
23
- - - -
24
- - - -
25
- - - -
26
- - - -
27
- - - -
28
- - - -
29
- - - -
30
- - - -
31
- - - -
32
- - + + @for (int i = 1; i <= 32; i++) + { + var index = i; + var imageIndex = (index - 1) % 4 + 1; + +
Item @index
+ + + }
- - -@code { - //private int index; - //private BitSwiper swiper; - - //private void GoNext() - //{ - // swiper.GoNext(); - //} - - //private void GoPrev() - //{ - // swiper.GoPrev(); - //} + + +
Use BitSwiper without showing the next and previous navigation buttons.
+
+
+ + @for (int i = 1; i <= 32; i++) + { + var index = i; + var imageIndex = (index - 1) % 4 + 1; + +
Item @index
+ + + } + +
+ + - //private void GoTo() - //{ - // swiper.GoTo(index); - //} -} \ No newline at end of file + + +
Use BitSwiper in right-to-left (RTL).
+
+
+ + @for (int i = 1; i <= 32; i++) + { + var index = i; + var imageIndex = (index - 1) % 4 + 1; + +
مورد @index
+ + + } + +
+ + + \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor.cs index 1e9f5c4df5..9c2b2491b7 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor.cs @@ -4,6 +4,13 @@ public partial class BitSwiperDemo { private readonly List componentParameters = [ + new() + { + Name = "AnimationDuration", + Type = "double", + DefaultValue = "0.5", + Description = "Sets the duration of the scrolling animation in seconds (the default value is 0.5)." + }, new() { Name = "ChildContent", @@ -13,10 +20,10 @@ public partial class BitSwiperDemo }, new() { - Name = "ShowNextPrev", + Name = "HideNextPrev", Type = "bool", - DefaultValue = "true", - Description = "Shows or hides the Next/Prev buttons of the BitSwiper." + DefaultValue = "false", + Description = "Hides the Next/Prev buttons of the BitSwiper." }, new() { @@ -24,13 +31,6 @@ public partial class BitSwiperDemo Type = "int", DefaultValue = "1", Description = "Number of items that is going to be changed on navigation." - }, - new() - { - Name = "AnimationDuration", - Type = "double", - DefaultValue = "0.5", - Description = "Sets the duration of the scrolling animation in seconds (the default value is 0.5)." } ]; @@ -44,11 +44,12 @@ public partial class BitSwiperDemo } .number { - position: absolute; top: 0.75rem; + color: #D7D7D7; padding: 0.75rem; + position: absolute; font-size: 0.75rem; - color: #D7D7D7; + white-space: nowrap; } .image { @@ -57,135 +58,17 @@ public partial class BitSwiperDemo } - - -
1
- - - -
2
- - - -
3
- - - -
4
- - - -
5
- - - -
6
- - - -
7
- - - -
8
- - - -
9
- - - -
10
- - - -
11
- - - -
12
- - - -
13
- - - -
14
- - - -
15
- - - -
16
- - - -
17
- - - -
18
- - - -
19
- - - -
20
- - - -
21
- - - -
22
- - - -
23
- - - -
24
- - - -
25
- - - -
26
- - - -
27
- - - -
28
- - - -
29
- - - -
30
- - - -
31
- - - -
32
- - + + + @for (int i = 1; i <= 32; i++) + { + var index = i; + var imageIndex = (index - 1) % 4 + 1; + +
@index
+ + + } "; private readonly string example2RazorCode = @" @@ -196,11 +79,82 @@ public partial class BitSwiperDemo } .number { + top: 0.75rem; + color: #D7D7D7; + padding: 0.75rem; position: absolute; + font-size: 0.75rem; + white-space: nowrap; + } + + .image { + width: 100%; + height: 100%; + } + + + + + @for (int i = 1; i <= 32; i++) + { + var index = i; + var imageIndex = (index - 1) % 4 + 1; + +
@index
+ + + } +"; + + private readonly string example3RazorCode = @" + + + + + @for (int i = 1; i <= 32; i++) + { + var index = i; + var imageIndex = (index - 1) % 4 + 1; + +
@index
+ + + } +"; + + private readonly string example4RazorCode = @" + + - -
یک
- - - -
دو
- - - -
سه
- - - -
چهار
- - - -
پنج
- - - -
شش
- - - -
هفت
- - - -
هشت
- - - -
نه
- - - -
ده
- - - -
11
- - - -
12
- - - -
13
- - - -
14
- - - -
15
- - - -
16
- - - -
17
- - - -
18
- - - -
19
- - - -
20
- - - -
21
- - - -
22
- - - -
23
- - - -
24
- - - -
25
- - - -
26
- - - -
27
- - - -
28
- - - -
29
- - - -
30
- - - -
31
- - - -
32
- - + @for (int i = 1; i <= 32; i++) + { + var index = i; + var imageIndex = (index - 1) % 4 + 1; + +
مورد @index
+ + + } "; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor.scss index 17f332cc7f..dbe796a64f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Swiper/BitSwiperDemo.razor.scss @@ -6,6 +6,7 @@ color: $Gray3; position: absolute; padding: rem2(12px); + white-space: nowrap; font-size: rem2(12px); }