活动面板

从底部浮出的模态，提供和当前场景相关的 2 个以上操作或者更多描述内容。

规则

提供清晰的退出按钮。
可高亮破坏性操作，eg：将『删除』处理成红色文本。
不要放置过多内容，避免面板纵向滚动。 eg.买入股票。

代码演示

活动面板

默认活动面板

分享功能

多行分享功能

默认活动面板

联合popup组件使用。

<div class="popup-mask  " >
	<div class="popup-wrapper popup-up-wrapper action-sheet-wrapper">
		<div class="popup">
			<div class="action-sheet">
				<div class="action-sheet-title">我是描述</div>
				<div class="action-sheet-btn-list">
					<div class="action-sheet-btn-item">操作一</div>
					<div class="action-sheet-btn-item">操作二</div>
					<div class="action-sheet-btn-item">操作三</div>
				</div>
				<div class="action-sheet-destructive-btn">删除</div>
				<div class="action-sheet-cancel-btn">取消</div>
			</div>
		</div>
	</div>
</div>

分享功能


<div class="popup-mask  " >
	<div class="popup-wrapper popup-up-wrapper action-sheet-wrapper" >
		<div class="popup">
			<div class="action-sheet">
				<div class="action-sheet-title">我是描述</div>
				<div class="action-sheet-share-list">
					<div class="action-sheet-share-content">
						<div class="action-sheet-share-item">
							<div class="action-sheet-share-icon icon-pic"></div>
							<div class="action-sheet-share-title">微信好友</div>
						</div>
						<div class="action-sheet-share-item">
							<div class="action-sheet-share-icon icon-pic"></div>
							<div class="action-sheet-share-title">朋友圈</div>
						</div>
						<div class="action-sheet-share-item">
							<div class="action-sheet-share-icon icon-pic"></div>
							<div class="action-sheet-share-title">新浪微博</div>
						</div>
						<div class="action-sheet-share-item">
							<div class="action-sheet-share-icon icon-pic"></div>
							<div class="action-sheet-share-title">QQ空间</div>
						</div>
						<div class="action-sheet-share-item">
							<div class="action-sheet-share-icon icon-pic"></div>
							<div class="action-sheet-share-title">微信好友</div>
						</div>
						<div class="action-sheet-share-item">
							<div class="action-sheet-share-icon icon-pic"></div>
							<div class="action-sheet-share-title">朋友圈</div>
						</div>
						<div class="action-sheet-share-item">
							<div class="action-sheet-share-icon icon-pic"></div>
							<div class="action-sheet-share-title">新浪微博</div>
						</div>
						<div class="action-sheet-share-item">
							<div class="action-sheet-share-icon icon-pic"></div>
							<div class="action-sheet-share-title">QQ空间</div>
						</div>
					</div>
				</div>
				<div class="action-sheet-share-btn">取消</div>
			</div>
		</div>
	</div>
</div>