Accent color
# PullToRefresh
## Description
The PullToRefresh component is used to add the pull down to refresh feature to a page or a specific element.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Anchor | `RenderFragment?` | null | The anchor element that the pull to refresh component adheres to (alias of ChildContent). |
| ChildContent | `RenderFragment?` | null | The anchor element that the pull to refresh component adheres to. |
| Classes | `BitPullToRefreshClassStyles?` | null | Custom CSS classes for different parts of the BitPullToRefresh. |
| Factor | `decimal` | 2 | The factor to balance the pull height out. |
| Loading | `RenderFragment?` | null | The custom loading template to replace the default loading svg. |
| Margin | `int` | 30 | The value in pixel to add to the top of pull element as a margin for the pull height. |
| OnRefresh | `EventCallback` | | The callback for when the threshold of the pull-down happens. |
| OnPullStart | `EventCallback<BitPullToRefreshPullStartArgs>` | | The callback for the starting of the pull-down. |
| OnPullMove | `EventCallback<decimal>` | | The callback for when the pull-down is in progress. |
| OnPullEnd | `EventCallback<decimal>` | | The callback for the ending of the pull-down. |
| ScrollerElement | `ElementReference?` | null | The element that is the scroller in the anchor to control the behavior of the pull to refresh. |
| ScrollerSelector | `string?` | null | The CSS selector of the element that is the scroller in the anchor to control the behavior of the pull to refresh. |
| Styles | `BitPullToRefreshClassStyles?` | null | Custom CSS styles for different parts of the BitPullToRefresh. |
| Threshold | `int` | 0 | The threshold in pixel for pulling height that starts the pull to refresh process. |
| Trigger | `int` | 80 | The pulling height in pixel that triggers the refresh. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitPullToRefreshPullStartArgs Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Top | `decimal` | | The top offset of the pull to refresh element in pixels. |
| Left | `decimal` | | The left offset of the pull to refresh element in pixels. |
| Width | `decimal` | | The width of the pull to refresh element in pixels. |
### BitPullToRefreshClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the PullToRefresh. |
| Loading | `string?` | null | Custom CSS classes/styles for the loading element. |
| SpinnerWrapper | `string?` | null | Custom CSS classes/styles for the spinner wrapper element. |
| SpinnerWrapperRefreshing | `string?` | null | Custom CSS classes/styles for the spinner wrapper element in refreshing mode. |
| Spinner | `string?` | null | Custom CSS classes/styles for the spinner element. |
| SpinnerRefreshing | `string?` | null | Custom CSS classes/styles for the spinner element in refreshing mode. |
## Examples
\n**Basic**:
```razor
```
```csharp
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();
}
```
\n**Custom loading**:
```razor
```
```csharp
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();
}
```
\n**Multiple**:
```razor
```
```csharp
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();
}
```
\n**Advanced**:
```razor
BlazorUI
```
```csharp
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();
}
```
\n**Style & Class**:
```razor
```
```csharp
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();
}
```
@foreach (var (idx, i) in basicItems)
{
@(idx.ToString().PadLeft(2, '0')). Item @i
}
@foreach (var (idx, i) in customItems)
{
@(idx.ToString().PadLeft(2, '0')). Item @i
}
@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
}
@foreach (var (idx, i) in advancedItems)
{
@(idx.ToString().PadLeft(2, '0')). Item @i
}
@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
}