# refresh
Pull-to-refresh (opens new window) mechanism.
# Children Elements
This element supports any element as children nodes.
# Attributes
In addition to the common attributes, this element may contain the following attributes.
# offset
Distance of the refresh element to the top of the viewport where the element is not moved.
- Type:
string
(length) - Default value:
132px
- Mandatory: no
# refreshing
Flag that indicates if an element is being refreshed.
- Type:
boolean
- Default value:
false
- Mandatory: no
# type
Type of the behavior of the system refresh action.
- Type:
string
(material
|overscroll
) - Default value:
material
- Mandatory: no
The value material
indicates that the page stops moving when a user continues pulling after the boundary is reached. On the other hand, overscroll
enables the page to move a little beyond that limit, showing a bouncing effect.
# indicator
Flag that indicates whether an item is an indicator.
- Type:
boolean
- Default value:
false
- Mandatory: no
# CSS Properties
In addition to the common styles, this element supports the following styling properties:
# background-color
Background color.
- Type:
<color>
- Default value:
white
- Mandatory: no
# progress-color
Loading animation foreground color.
- Type:
<color>
- Default value:
black
- Mandatory: no
# Events
In addition to the common events, this element supports the following events:
# refresh({refreshing})
Event triggered with a user pulls down a refresh element.
Additional parameters:
object
with the following attributes:{ refreshing: number }
# Methods
This element does not have additional methods.
# Example
<template>
<div class="container mt-item">
<refresh class="refresh" refreshing="{{isRefreshing}}" onrefresh="refresh">
<div class="item-container tip-container row-center column-center">
<text class="color-secondary">Pull down to refresh</text>
</div>
<div class="mlr-container row-center mt-btn">
<input type="button" value="Stop Refreshing" class="btn-blue" onclick="stopRefresh"/>
</div>
</refresh>
</div>
</template>
<style lang="sass">
.tip-container{
height: 400px;
background-color: transparent;
}
.refresh{
flex-direction: column;
}
</style>
<script>
module.exports = {
public: {
isRefreshing:false,
},
stopRefresh(){
this.isRefreshing = false;
},
refresh(e){
this.isRefreshing = e.refreshing;
setTimeout(() => {
this.isRefreshing = false;
},3000);
}
}
</script>