Pull refresh

A container component that streamlines the implementation of pull-to-refresh functionality.
Used to detect pull-down gestures to initiate content updates. The pull-down gesture is only detected if the scrollbar is at the top most position.

Scroll basis

Is used to determine the scrollable element that the pull-refresh component will be attached to.

Window

This is the default scroll basis. Window scroll basis means that the pull-refresh component will be attached to the global window scrollbar.
Content
Content
Content
Content
Content
Content
Content
Content

Host

Host scroll basis means that the pull-refresh component will be attached to the host element. Simply means the pull-refresh component will become the scrollable container. The max-height of the component should be externally be set through CSS.
Content
Content
Content
Content
Content
Content
Content
Content
import { Component } from '@angular/core';
import { HeadingType } from '@freelancer/ui/heading';
import { UiModule } from '@freelancer/ui/ui.module';
import { PullRefreshComponent } from '../pull-refresh.component';

@Component({
  selector: 'fl-pull-refresh-scroll-basis-story',
  standalone: true,
  imports: [PullRefreshComponent, UiModule],
  template: `
    <fl-heading [headingType]="HeadingType.H1"> Scroll basis </fl-heading>
    <fl-text [flMarginBottom]="'small'">
      Is used to determine the scrollable element that the pull-refresh
      component will be attached to.
    </fl-text>

    <fl-heading [headingType]="HeadingType.H2"> Window </fl-heading>
    <fl-text [flMarginBottom]="'xsmall'">
      This is the default scroll basis. Window scroll basis means that the
      pull-refresh component will be attached to the global window scrollbar.
    </fl-text>
    <fl-pull-refresh
      class="PullRefresh"
      [flMarginBottom]="'small'"
      [type]="'drawer'"
      [scrollBasis]="'window'"
      (refresh)="handleRefresh()"
    >
      <fl-card
        *flRepeat="8"
        [flMarginBottom]="'xxsmall'"
      >
        <fl-text>Content</fl-text>
      </fl-card>
    </fl-pull-refresh>

    <fl-heading [headingType]="HeadingType.H2"> Host </fl-heading>
    <fl-text [flMarginBottom]="'xsmall'">
      Host scroll basis means that the pull-refresh component will be attached
      to the host element. Simply means the pull-refresh component will become
      the scrollable container. The max-height of the component should be
      externally be set through CSS.
    </fl-text>
    <fl-pull-refresh
      class="PullRefresh"
      [type]="'drawer'"
      [scrollBasis]="'host'"
      (refresh)="handleRefresh()"
    >
      <fl-card
        *flRepeat="8"
        [flMarginBottom]="'xxsmall'"
      >
        <fl-text>Content</fl-text>
      </fl-card>
    </fl-pull-refresh>
  `,
  styleUrls: ['./scroll-basis.story.scss'],
})
export class PullRefreshScrollBasisStoryComponent {
  HeadingType = HeadingType;

  handleRefresh(): void {
    window.location.reload();
  }
}
@use "settings/settings" as *;

.PullRefresh {
  border-top: 1px solid $neutral-light;
  max-height: 500px;
  padding-top: $spacing-xxsmall;
}
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.