mp-components
v0.0.107
Published
wechat mini component
Downloads
437
Maintainers
Keywords
Readme
npm install mp-components
Components
mp-nav-bar
mp-tab
mp-ellipsis
mp-popup
mp-dropdown-menu
mp-dropdown-menu-item
mp-button
mp-button-group
mp-box
mp-dots
mp-pk-card
mp-pk-progress-bar
mp-image
mp-nav-bar-home
mp-line
mp-text-line
mp-tab-panel
mp-tab-panel-item
mp-nav-bar
- properties
bg: String、 zIndex: Number、 custom: Boolean
- events
height
- slots
left、title、 default
Tip: If the custom property is true, the left and title slots are invalid
Demo
<mp-nav-bar custom="{{true}}">
<view slot="left">back</view>
<view slot="title">title</view>
<view>custom</view>
</mp-nav-bar>
mp-ellipsis
- properties
content: String、 contentClass: String、 contentStyle: String、 rows: Number、 size: String、 lineHeight: String、ellipsisColor: String、forceShowSlot: Boolean, forceShowSlotPosition: 'end' | 'suffix', isAsync: Boolean, offset: Number
- slot
default
Demo
<mp-ellipsis content="what???" rows="{{2}}">
<view>Slot</view>
</mp-ellipsis>
mp-tab
- properties
data: Array、 labelField: String | null、 active: Number、 height: String、gap: String、size: String、activeSize: String、color: String、 activeColor: String、 activeLineHeight: String、 activeLineColor: String、 border: String、 borderColor: String、 justifyBetween: Boolean、itemStyle: String、activeItemStyle: String、 startSize: Number、endSize: Number => font-size animation scale from size to start and then end
- events
change
Demo
<comp data="{{['tab1', 'tab2']}}" height="120rpx" active="{{curTab}}" itemClass="item" catch:change='onChange'></comp>
mp-popup
- properties
visible: Boolean、 bg: String、 maskClosable: Boolean、 duration: Number、 type: String、 contentClass: String
type -> bottom、top、left、right、center、center-scale
- events
open、opened、close、 closed
- slot
default
mp-dropdown-menu
- properties
duration: Number、 bg: String、 maskClosable: Boolean
- events
open、opened、close、 closed、 change
- methods
close
- slot
default
mp-dropdown-menu-item
- slot
default、 title
<mp-dropdown-menu maskClosable="{{true}}" catch:change="onMenuChange" catch:close="close" catch:closed="closed"
catch:open="open" catch:opened="opened">
<mp-dropdown-menu-item>
<view slot="title" class="menu-item">One</view>
<view style="background: #ffffff;">Content</view>
</mp-dropdown-menu-item>
<mp-dropdown-menu-item>
<view slot="title" class="menu-item">Two</view>
<view style="background: #ffffff;">Content2</view>
</mp-dropdown-menu-item>
<mp-dropdown-menu-item>
<view slot="title" class="menu-item">Three</view>
<view style="background: #ffffff;">Content3</view>
</mp-dropdown-menu-item>
</mp-dropdown-menu>
.menu-item {
width: 100%;
padding: 20rpx 0;
}
mp-button
- properties
disabled: Boolean、 padding: String、 loading: Boolean、 loadingSize: Boolean、 dark: Boolean、 ghostDark: Boolean、 ghostLight: Boolean、borderWidth: String
- event
tap
<mp-button bindtap="handleTap">
填充按钮
</mp-button>
Effect
mp-button-group
- properties
gap: String
<mp-button-group>
<mp-button ghostLight>了解详情</mp-button>
<mp-button ghostDark>立即订购</mp-button>
</mp-button-group>
mp-box
- properties
ratio: Number
mp-dots
- properties
count: Number、current: Number、 radius: String、 gap: String、color: String、activeColor: String、 activeWidth: String、width: String、height: String、radius: String
- event
change
mp-pk-card
- properties
bg: String、bgOpacity: Number、 images: Array、 gap: String、 deg: Number、 pLeft: String
- slot
left、right
- events
offset
demo
<view style="height: 500rpx;">
<mp-pk-card deg="{{-10}}">
<view slot="left" style="height: 100%; width: 100%; color: red; display: flex; align-items: flex-end;">
Left
</view>
<view slot="right"
style="height: 100%; width: 100%; color: red; display: flex; align-items: flex-end; justify-content: flex-end;">
Right
</view>
</mp-pk-card>
</view>
mp-pk-progress-bar
- properties
height: String、 radius: String、 bg: String、 chunkWidth: String、 value: String、 left: String、 right: String、 deg: Number
mp-image
- properties
src: String、 lazy: Boolean、 mode: String、 radius: String、bg: String
mp-nav-bar-home
- properties
bg: String, iconStyle: String, backStyle: String, homeStyle: String, backIcon: String, homeIcon: String, homePath: String, homePathIsTabBar: Boolean, duration: Number, customBackEvent: Boolean
- events
height
back
<!-- bg, iconStyle, backStyle, homeStyle, backIcon, homeIcon, homePath, homePathIsTabBar, duration => default value -->
<mp-nav-bar-home>
<view>Title</view>
</mp-nav-bar-home>
<!-- with default value -->
<mp-nav-bar-home
bg="rgba(255, 255, 255, 1)"
iconStyle="margin-left: 32rpx;"
backStyle="width: 56rpx; height: 56rpx;"
homeStyle="width: 40rpx; height: 40rpx;"
backIcon="https://source-1259320891.cos.ap-shanghai.myqcloud.com/medias/nav-back.png"
homeIcon="https://source-1259320891.cos.ap-shanghai.myqcloud.com/medias/home-icon.png"
homePath=""
homePathIsTabBar="{{true}}"
duration="{{400}}"
>
<view>Title</view>
</mp-nav-bar-home>
mp-line
- properties
top: Boolean, right: Boolean, bottom: Boolean, left: Boolean, radius: String, color: String, shadow: String
<view style="width: 50%; margin: 0 auto;">
<mp-box>
<mp-line top right bottom left color="blue" shadow="0 8rpx 16rpx 0 blue" radius="8rpx">
<mp-box>
<view bindtap="log">???</view>
</mp-box>
</mp-line>
</mp-box>
</view>
<view style="height: 60rpx;"></view>
<mp-line top right bottom left color="blue" shadow="box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.06)">
<mp-box>
<view bindtap="log">???</view>
</mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<view style="border: 1rpx solid purple; border-radius: 8rpx;">
<mp-box></mp-box>
</view>
<view style="height: 20rpx;"></view>
<mp-line top color="red">
<mp-box ratio="{{3/4}}">
<view>???</view>
</mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<mp-line left color="blue">
<mp-box ratio="{{3/4}}">
<view>???</view>
</mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<mp-line bottom color="yellow">
<mp-box ratio="{{3/4}}">
<view>???</view>
</mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<mp-line right color="green">
<mp-box ratio="{{3/4}}">
<view>???</view>
</mp-box>
</mp-line>
mp-text-line
- properties
line: Number, text: String
mp-tab-panel、mp-tab-panel-item
有些场景只用到左右切换页面,并且不支持手势切换,可以用这个组件
- properties
height: String、 current: Number、 duration: Number
<mp-tab-panel current="{{current}}">
<mp-tab-panel-item>One</mp-tab-panel-item>
<mp-tab-panel-item>Two</mp-tab-panel-item>
<mp-tab-panel-item>Three</mp-tab-panel-item>
</mp-tab-panel>