Float Board 浮动面板

查看 sn-float-board 的 2.0 版本差异

基础用法

固定吸附在屏幕四边之一的面板，始终显示，用户可通过手势拖拽在折叠与展开状态之间切换，松手后根据滑动距离自动归位
请注意区分 sn-drawer 和 sn-float-board：sn-drawer 是弹出层，需要调用方法才能显示；而 sn-float-board 则始终显示（可以把 sn-drawer 理解为关闭的浮动面板，sn-float-board 则是半开的浮动面板）
组件为 fixed 定位，不占据文档流空间，请在页面底部预留面板折叠后的空隙（如 sn-gap）

vue

<template>
	<sn-float-board>
		<sn-text text="Float Board 浮动面板"></sn-text>
	</sn-float-board>
</template>

更多演示请下载 demo 查看

参数	说明	类型	默认值	可选值
position	浮动面板吸附的位置，非法值回退为 `bottom`	String	`bottom`	`top` \| `right` \| `bottom` \| `left`
showLine	是否显示指示条	Boolean	`true`	`true` \| `false`
maxWidth	当 `position` 为 `left` \| `right` 且展开时浮动面板的宽度	String	`300px`	-
minWidth	当 `position` 为 `left` \| `right` 且折叠时浮动面板的宽度	String	`50px`	-
maxHeight	当 `position` 为 `top` \| `bottom` 且展开时浮动面板的高度	String	`500px`	-
minHeight	当 `position` 为 `top` \| `bottom` 且折叠时浮动面板的高度	String	`50px`	-
slideHeight	纵向滑动阈值，松手时滑动距离达到阈值则折叠或展开	String	`100px`	-
slideWidth	横向滑动阈值，松手时滑动距离达到阈值则折叠或展开	String	`100px`	-
bgColor	浮动面板背景颜色	String	`$infoActive`	-
lineColor	指示条颜色	String	`$lineText`	-
padding	面板内容区内边距（传给内部 sn-view）	String	`25px 15px 10px 15px`	-
borderRadius	面板圆角大小，为随圆角乘数计算的默认圆角（四个直角侧自动贴合屏幕边缘）	String \| Number	-	-
aniTime	展开/折叠动画时长，支持 `$` 动态时长语法	String \| Number	`$long`	-
disabled	是否禁用滑动手势	Boolean	`false`	`true` \| `false`
zIndex	面板层级	Number	`999`	-
customStyle	自定义浮动面板样式	UTSJSONObject \| String	`''`	-

名称	类型	说明
unfold	() => Void	展开浮动面板时触发
fold	() => Void	折叠浮动面板时触发

名称	参数	返回值	描述
unfold	-	-	展开浮动面板
fold	-	-	折叠浮动面板

名称	说明
default	在浮动面板内部放置组件