mp-components

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>

mp-expand

• properties

custom: Boolean 可以自定义 默认显示的内容

direction: "top"、"bottom"、"left"、"right"; default is "top"

duration: Number; default is 300ms

• events

toggle

• slot

default 默认显示的内容 custom 自定义显示的内容 (properties 传入 custom="{{true}}" 时生效)

<view class="add-feed-box">
	<mp-expand catch:toggle="toggle">
		<view class="add-feed-icon-2 {{expandVisible ? 'expand' : ''}}">
			<image class="icon-item" mode="aspectFill"
			       src="https://sit-app-h5-1306106726.cos.ap-shanghai.myqcloud.com/prod/feed-image-icon.png"></image>
			<image class="icon-item" mode="aspectFill"
			       src="https://sit-app-h5-1306106726.cos.ap-shanghai.myqcloud.com/prod/feed-video-icon.png"></image>
			<view class="icon-item"></view>
		</view>
	</mp-expand>
</view>

Page({
	data: {
		expandVisible: false
	},
	toggle({detail}) {
		this.setData({expandVisible: detail.visible})
	}
})

.add-feed-icon-2 {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    transition: height 0.3s ease;
    background-color: rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.add-feed-icon-2.expand {
    height: 364rpx;
}

.icon-item {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    margin-bottom: 32rpx;
}