跳到主要内容

分享面板 ShareSheet

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

安装使用

import { TiShareSheet } from '@titian-design/mobile-react'

用法示例

基础用法

const App: React.FC = () => {
const options = [
{ name: "微信", icon: "share-wechat", color: "#f5f5f5", bgc: "#26c85a" },
{ name: "朋友圈", icon: "link" },
{ name: "QQ", icon: "picture" },
{ name: "微博", icon: "goods" }
];
const [visible, setVisible] = useState(true);
const onClose = () => {
setVisible(false);
};
return (
<>
<TiShareSheet visible={visible} options={options} onClose={onClose} />
</>
)
}

多行模式

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

const App: React.FC = () => {
const options = [
[
{ name: "微信", icon: "share-wechat", color: "#f5f5f5", bgc: "#26c85a" },
{ name: "朋友圈", icon: "link" },
],
[
{ name: "QQ", icon: "picture" },
{ name: "微博", icon: "goods" },
],
];
const [visible, setVisible] = useState(true);
const onClose = () => {
setVisible(false);
};
return (
<>
<TiShareSheet visible={visible} options={options} onClose={onClose} />
</>
)
}

TiShareSheet API

属性 Properties

名称类型必填默认值说明备注
optionsArray<Option>-数据配置项,使用多行模式的情况需配置成二维数组,Option类型-
visibleboolean-是否显示
titlestring-顶部标题
subTitlestring-顶部副标题
cancelTextstring取消取消文案-
closeOnMaskbooleantrue同popup/close-on-mask-
extStylestring | Record<string, string>-容器样式
teleportElementdocument.bodyDOM 挂载节点-

Option

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

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

事件 Events

名称参数列表描述备注
onSelect(e: CustomEvent) => void选中选项时触发-
onCancel(e: CustomEvent) => void取消按钮点击时触发-
onClose(e: CustomEvent) => void点击遮罩时触发-

外部样式类 External Classes

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

CSS 变量 CSS Variable

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