跳到主要内容

分享面板 ShareSheet

底部弹起的分享面板,用于展示各分享渠道对应的操作按钮,不含具体的分享逻辑

安装使用

{
// 原生小程序
"usingComponents": {
"ti-share-sheet": "@titian-design/weapp/share-sheet/index"
},
// titan-cli搭建的项目
"usingComponents": {
"ti-share-sheet": "platform://titian-mp/ti-share-sheet"
}
}

用法示例

基础用法

<ti-share-sheet visible="{{ visible }}" options="{{ options }}" />

多行模式

数据项配置成二位数据,即展示多行

Page({
data: {
visible: false,
options:[
[
{ name: "微信", icon: "share-wechat", color: "#f5f5f5", bgc: "#26c85a" },
{ name: "朋友圈", icon: "link" },
],
[
{ name: "QQ", icon: "picture" },
{ name: "微博", icon: "goods" },
],
]
});

ti-share-sheet API

属性 Properties

名称类型必填默认值说明备注
optionsArray<Option>-数据配置项,使用多行模式的情况需配置成二维数组,Option类型-
visibleboolean-是否显示
titlestring-顶部标题
sub-titlestring-顶部副标题
cancel-textstring取消取消文案-
close-on-maskbooleantrue同popup/close-on-mask-
ext-stylestring | Record<string, string>-容器样式

Option

API 属性中的 options 为一个数组或者二维数组,数组中的每一个对象有以下 key:

名称类型是否必填默认值说明备注
namestring-文案-
iconstring-字体图标(支持传入图片 URL )-
bgcstring-图标背景色-
colorstring-字体图标颜色-
sizenumber48字体图标颜大小-
isSvgPathbooleanfalse是否是加载 TiSvgPathView 组件-

事件 Events

名称参数列表描述备注
bind:select(e: WechatMiniprogram.CustomEvent) => void选中选项时触发-
bind:cancel(e: WechatMiniprogram.CustomEvent) => void取消按钮点击时触发-
bind:close(e: WechatMiniprogram.CustomEvent) => void点击遮罩时触发-

外部样式类 External Classes

名称说明备注
ext-class根节点可扩展的类名-
ext-popup-class同popup组件的ext-class----
ext-popup-mask-class同popup组件的ext-mask-class----
ext-popup-content-class同popup组件的ext-content-class----
ext-title-class折叠面板标题样式-

CSS 变量 CSS Variable

变量默认值说明备注
--share-sheet-cancel-height108rpx分享面板取消按钮高度-
--share-sheet-content-margin-v60rpx内容区垂直方向的内边距-
--share-sheet-content-margin-h0rpx内容区水平方向的内边距-
--share-sheet-row-offset36rpx多行面板每行之间下外边距-
--share-sheet-item-text-offset12rpx分享面板文字上外边距-
--share-sheet-item-text-color#212121分享面板文字颜色-
--share-sheet-item-icon-size96rpx分享面板 icon 尺寸-
--share-sheet-item-icon-bg-color#f5f5f5分享面板 icon 背景色-
--share-sheet-item-icon-radius50%分享面板 icon 圆角-
--share-sheet-item-min-width168rpx分享面板单项最小宽度-
--share-sheet-cancel-bg-color#f5f5f5分享面板取消按钮背景颜色-
--share-sheet-cancel-color#757575分享面板取消按钮字体颜色-
--share-sheet-cancel-placeholder-height20rpx分享面板取消按钮容器整体高度-
--share-sheet-popup-mask-bg-color#212121Popup 组件 --popup-mask-bg-color-
--share-sheet-popup-radiuscalc(var(--base-radius-size, 0rpx) + 16rpx)popup的圆角,默认跟随全局圆角风格-
--share-sheet-popup-box-bg-color#ffffffPopup 组件 --popup-box-bg-color-