mpvue-ripple
mpvue-ripple is a ripple component for mpvue.
Screenshots
Install
npm install mpvue-ripple --save
Usage
<template>
<div>
<ripple ripple-class="ripple-test">
<div>ripple fill</div>
</ripple>
<ripple ripple-class="ripple-test" type="circle">
<div>ripple circle</div>
</ripple>
</div>
</template>
<script>
import ripple from 'mpvue-ripple'
export default {
components: {
ripple
}
}
</script>
<style>
page {
background: #f0f0f0;
}
.ripple-test {
margin-top: 10px;
background: #fff;
text-align: center;
padding: 12px;
border-top: 0.5px solid #ddd;
border-bottom: 0.5px solid #ddd;
}
</style>
Props
参数 |
说明 |
类型 |
可选值 |
默认值 |
duration |
水波纹持续时间 |
Number |
- |
1000 |
ripple-class |
外层包裹器的class |
String |
- |
- |
type |
水波纹类型 |
String |
fill circle |
fill |
Slot
TODO
Other Component