MazPullToRefresh

MazPullToRefresh is a standalone component to add pull to refresh feature

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Demo

Basic usage

Wrap your app inside this component

<template>
  <MazPullToRefresh
    header-class="maz-bg-bg-dark maz-text-color-light"
    class="maz-flex maz-min-h-screen maz-w-full maz-flex-col"
    :action="pullToRefreshAction"
    spinner-color="white"
    standalone-mode
    :disabled="false"
  >
    <div>
      App Content
    </div>
  </MazPullToRefresh>
</template>

<script lang="ts" setup>
  import MazPullToRefresh from 'maz-ui/components/MazPullToRefresh'

  async function pullToRefreshAction() {
    // do promise or just `window.location.reload()`
  }
</script>

WARNING

More documentation to come

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
distance		number	-	100
offset		number	-	0
action		TSFunctionType	-	undefined
containerSelector		string	-	undefined
headerClass		string	-	undefined
spinnerColor		Color	-	'theme'
disabled		boolean	-	false
standaloneMode		boolean	-	false

Events

Event name	Properties	Description
loaded
start
error
finish
response

Slots

Name	Description	Bindings
pull-before
pull-ready
pull-loading
default