diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor index 7fd4783c85..0c69aa05e6 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor @@ -46,7 +46,7 @@ -
+
@@ -72,4 +72,65 @@ + + + + +
An illustrative example of integrating this component into a straightforward mobile application.
+
+
+
+ +
+ + + + + bit BlazorUI + + + +
+
+ + @foreach (var (idx, i) in advancedItems) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } + +
+ +
+
+ + + + + +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
+

+
+ +
+ @foreach (var (idx, i) in styleItems) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } +
+ + + +
+ @foreach (var (idx, i) in classItems) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } +
+ +
+ + + \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.cs index 75e72ebc52..76641be9a9 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.cs @@ -19,6 +19,15 @@ public partial class BitPullToRefreshDemo Description = "The anchor element that the pull to refresh component adheres to.", }, new() + { + Name = "Classes", + Type = "BitPullToRefreshClassStyles?", + DefaultValue = "null", + Description = "Custom CSS classes for different parts of the BitPullToRefresh.", + LinkType = LinkType.Link, + Href = "#class-styles", + }, + new() { Name = "Factor", Type = "decimal", @@ -84,6 +93,15 @@ public partial class BitPullToRefreshDemo Description = "The CSS selector of the element that is the scroller in the anchor to control the behavior of the pull to refresh.", }, new() + { + Name = "Styles", + Type = "BitPullToRefreshClassStyles?", + DefaultValue = "null", + Description = "Custom CSS styles for different parts of the BitPullToRefresh.", + LinkType = LinkType.Link, + Href = "#class-styles", + }, + new() { Name = "Threshold", Type = "int", @@ -96,7 +114,7 @@ public partial class BitPullToRefreshDemo Type = "int", DefaultValue = "80", Description = "The pulling height in pixel that triggers the refresh.", - }, + } ]; private readonly List componentSubClasses = @@ -127,6 +145,56 @@ public partial class BitPullToRefreshDemo }, ] }, + new() + { + Id = "class-styles", + Title = "BitPullToRefreshClassStyles", + Parameters = + [ + new() + { + Name = "Root", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the root element of the PullToRefresh." + }, + new() + { + Name = "Loading", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the loading element." + }, + new() + { + Name = "SpinnerWrapper", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the spinner wrapper element." + }, + new() + { + Name = "SpinnerWrapperRefreshing", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the spinner wrapper element in refreshing mode." + }, + new() + { + Name = "Spinner", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the spinner element." + }, + new() + { + Name = "SpinnerRefreshing", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the spinner element in refreshing mode." + }, + ] + } ]; @@ -154,6 +222,7 @@ private async Task HandleOnRefresh1() multiItems1 = GenerateRandomNumbers(1, 51); _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); } + private (int, int)[] multiItems2 = GenerateRandomNumbers(51, 101); private async Task HandleOnRefresh2() { @@ -162,152 +231,34 @@ private async Task HandleOnRefresh2() _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); } - - private static (int, int)[] GenerateRandomNumbers(int min, int max) + private (int, int)[] advancedItems = GenerateRandomNumbers(1, 51); + private async Task HandleOnRefreshAdvanced() { - var random = new Random(); - return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray(); + await Task.Delay(2000); + advancedItems = GenerateRandomNumbers(1, 51); + _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); } - - private readonly string example1RazorCode = @" - - -
- @foreach (var (idx, i) in basicItems) - { -
@(idx.ToString().PadLeft(2, '0')). Item @i
- } -
-"; - private readonly string example1CsharpCode = @" -private (int, int)[] basicItems = GenerateRandomNumbers(1, 51); -private async Task HandleOnRefreshBasic() -{ - await Task.Delay(2000); - basicItems = GenerateRandomNumbers(1, 51); - _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); -} - -private static (int, int)[] GenerateRandomNumbers(int min, int max) -{ - var random = new Random(); - return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray(); -}"; - - private readonly string example2RazorCode = @" - - - -
- @foreach (var (idx, i) in customItems) - { -
@(idx.ToString().PadLeft(2, '0')). Item @i
- } -
- - - - - - - - - -"; - private readonly string example2CsharpCode = @" -private (int, int)[] customItems = GenerateRandomNumbers(1, 51); -private async Task HandleOnRefreshCustom() -{ - await Task.Delay(2000); - customItems = GenerateRandomNumbers(1, 51); - _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); -} - -private static (int, int)[] GenerateRandomNumbers(int min, int max) -{ - var random = new Random(); - return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray(); -}"; - private readonly string example3RazorCode = @" - - -
-
- -
- @foreach (var (idx, i) in multiItems1) - { -
@(idx.ToString().PadLeft(2, '0')). Item @i
- } -
- -
- -
- -
- @foreach (var (idx, i) in multiItems2) - { -
@(idx.ToString().PadLeft(2, '0')). Item @i
- } -
- -
-
"; - private readonly string example3CsharpCode = @" -private (int, int)[] multiItems1 = GenerateRandomNumbers(0, 50); -private async Task HandleOnRefresh1() -{ - await Task.Delay(2000); - multiItems1 = GenerateRandomNumbers(1, 51); - _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); -} -private (int, int)[] multiItems2 = GenerateRandomNumbers(51, 101); -private async Task HandleOnRefresh2() -{ - await Task.Delay(2000); - multiItems2 = GenerateRandomNumbers(51, 101); - _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); -} - -private static (int, int)[] GenerateRandomNumbers(int min, int max) -{ - var random = new Random(); - return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray(); -}"; - } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.samples.cs new file mode 100644 index 0000000000..a45c60d618 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.samples.cs @@ -0,0 +1,282 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Utilities.PullToRefresh; + +public partial class BitPullToRefreshDemo +{ + private readonly string example1RazorCode = @" + + + +
+ @foreach (var (idx, i) in basicItems) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } +
+"; + private readonly string example1CsharpCode = @" +private (int, int)[] basicItems = GenerateRandomNumbers(1, 51); +private async Task HandleOnRefreshBasic() +{ + await Task.Delay(2000); + basicItems = GenerateRandomNumbers(1, 51); + _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); +} + +private static (int, int)[] GenerateRandomNumbers(int min, int max) +{ + var random = new Random(); + return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray(); +}"; + + private readonly string example2RazorCode = @" + + + + +
+ @foreach (var (idx, i) in customItems) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } +
+ + + + + + + + + +"; + private readonly string example2CsharpCode = @" +private (int, int)[] customItems = GenerateRandomNumbers(1, 51); +private async Task HandleOnRefreshCustom() +{ + await Task.Delay(2000); + customItems = GenerateRandomNumbers(1, 51); + _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); +} + +private static (int, int)[] GenerateRandomNumbers(int min, int max) +{ + var random = new Random(); + return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray(); +}"; + + private readonly string example3RazorCode = @" + + +
+
+ +
+ @foreach (var (idx, i) in multiItems1) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } +
+ +
+ +
+ +
+ @foreach (var (idx, i) in multiItems2) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } +
+ +
+
"; + private readonly string example3CsharpCode = @" +private (int, int)[] multiItems1 = GenerateRandomNumbers(0, 50); +private async Task HandleOnRefresh1() +{ + await Task.Delay(2000); + multiItems1 = GenerateRandomNumbers(1, 51); + _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); +} +private (int, int)[] multiItems2 = GenerateRandomNumbers(51, 101); +private async Task HandleOnRefresh2() +{ + await Task.Delay(2000); + multiItems2 = GenerateRandomNumbers(51, 101); + _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); +} + +private static (int, int)[] GenerateRandomNumbers(int min, int max) +{ + var random = new Random(); + return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray(); +}"; + + private readonly string example4RazorCode = @" + + +
+
+ +
+ + + + + bit BlazorUI + + + +
+
+ + @foreach (var (idx, i) in advancedItems) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } + +
+ +
+
"; + private readonly string example4CsharpCode = @" +private (int, int)[] advancedItems = GenerateRandomNumbers(1, 51); +private async Task HandleOnRefreshAdvanced() +{ + await Task.Delay(2000); + advancedItems = GenerateRandomNumbers(1, 51); + _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); +} + +private static (int, int)[] GenerateRandomNumbers(int min, int max) +{ + var random = new Random(); + return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray(); +}"; + + private readonly string example5RazorCode = @" + + +
+ +
+ @foreach (var (idx, i) in styleItems) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } +
+ + + +
+ @foreach (var (idx, i) in classItems) + { +
@(idx.ToString().PadLeft(2, '0')). Item @i
+ } +
+ +
"; + private readonly string example5CsharpCode = @" +private (int, int)[] styleItems = GenerateRandomNumbers(1, 51); +private async Task HandleOnRefreshStyle() +{ + await Task.Delay(2000); + styleItems = GenerateRandomNumbers(1, 51); + _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); +} + +private (int, int)[] classItems = GenerateRandomNumbers(51, 101); +private async Task HandleOnRefreshClass() +{ + await Task.Delay(2000); + classItems = GenerateRandomNumbers(51, 101); + _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged)); +} + +private static (int, int)[] GenerateRandomNumbers(int min, int max) +{ + var random = new Random(); + return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray(); +}"; + +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.scss index c11b6eeb5d..cb4b0b5d15 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.scss @@ -1,4 +1,9 @@ -.anchor { +.example-content { + gap: 1rem; + display: flex; +} + +.anchor { width: 150px; padding: 4px; cursor: grab; @@ -8,5 +13,42 @@ border: 1px gray solid; } +.mobile-frame { + width: 375px; + height: 712px; + overflow: hidden; + position: relative; + border-radius: 36px; + border: 16px solid #333; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: var(--bit-clr-fg-sec); + + .screen { + width: 100%; + height: 100%; + } +} + ::deep { + .custom-loading { + background-color: rgb(255, 106, 0, 0.1); + } + + .custom-spinner { + padding: 5px; + border-radius: 50%; + background-color: #ff6a00; + } + + .custom-main { + cursor: grab; + overflow: auto; + user-select: none; + } + + .row { + color: black; + padding: 10px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } }