分享面板 ShareSheet
底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑
使用
API用法示例
基础用法
- index.html
- index.js
code
<ti-share-sheet id="share-sheet" />
const shareSheet = document.querySelector('#share-sheet')
shareSheet.visible = true
shareSheet.options = [
{ name: "微信", icon: "share-wechat", color: "#f5f5f5", bgc: "#26c85a" },
{ name: "朋友圈", icon: "link" },
{ name: "QQ", icon: "picture" },
{ name: "微博", icon: "goods" }
]
多行模式
数据项配置成二位数据，即展示多行
- index.html
- index.js
code
<ti-share-sheet id="share-sheet" />
const shareSheet = document.querySelector('#share-sheet')
shareSheet.visible = true
shareSheet.options = [
[
{ name: "微信", icon: "share-wechat", color: "#f5f5f5", bgc: "#26c85a" },
{ name: "朋友圈", icon: "link" },
],
[
{ name: "QQ", icon: "picture" },
{ name: "微博", icon: "goods" },
],
]
ti-share-sheet API
属性 Properties
| 名称 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| options | Array<Option> | 否 | - | 数据配置项，使用多行模式的情况需配置成二维数组，Option类型 | - |
| visible | boolean | 否 | - | 是否显示 | |
| title | string | 否 | - | 顶部标题 | |
| sub-title | string | 否 | - | 顶部副标题 | |
| cancel-text | string | 否 | 取消 | 取消文案 | - |
| close-on-mask | boolean | 否 | true | 同popup/close-on-mask | - |
| ext-style | string | Record<string, string> | 否 | - | 容器样式 |
Option
API 属性中的 options 为一个数组或者二维数组，数组中的每一个对象有以下 key：
| 名称 | 类型 | 是否必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| name | string | 否 | - | 文案 | - |
| icon | string | 否 | - | 字体图标(支持传入图片 URL ) | - |
| bgc | string | 否 | - | 图标背景色 | - |
| color | string | 否 | - | 字体图标颜色 | - |
| size | number | 否 | 48 | 字体图标颜大小 | - |
| isSvgPath | boolean | 否 | false | 是否是加载 TiSvgPathView 组件 | - |
事件 Events
| 名称 | 参数列表 | 描述 | 备注 |
|---|---|---|---|
| select | (e: CustomEvent) => void | 选中选项时触发 | - |
| cancel | (e: CustomEvent) => void | 取消按钮点击时触发 | - |
| close | (e: 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-content-padding-h | theme.spacing.vertical.v15 | 内容区垂直方向的内边距 | - |
--share-sheet-content-padding-h | theme.spacing.horizontal.h0 | 内容区水平方向的内边距 | - |
--share-sheet-row-offset | theme.spacing.gap.g9 | 每行之间下外边距 | - |
--share-sheet-item-text-offset | theme.spacing.gap.g3 | 文字上外边距 | - |
--share-sheet-item-text-color | theme.color.gray.texticon.900 | 文字颜色 | - |
--share-sheet-item-text-font-weight | theme.fontWeight.regular | 文字字重 | - |
--share-sheet-item-text-line-height | theme.lineHeight.single.t4 | 文字行高 | - |
--share-sheet-item-text-font-size | theme.fontSize.t4 | 文字字号 | - |
--share-sheet-item-icon-size | 96px | icon 尺寸 | - |
--share-sheet-item-icon-bg-color | theme.color.gray.background.40 | icon 背景色 | - |
--share-sheet-item-icon-radius | 50% | icon 圆角 | - |
--share-sheet-item-min-width | 168px | 单项最小宽度 | - |
--share-sheet-cancel-bg-color | theme.color.gray.background.40 | 取消按钮，背景颜色 | - |
--share-sheet-cancel-color | theme.color.gray.texticon.550 | 取消按钮，字体颜色 | - |
--share-sheet-cancel-font-size | theme.color.gray.texticon.900 | 取消按钮，字号 | - |
--share-sheet-cancel-line-height | theme.lineHeight.multiline.t3 | 取消按钮，行高 | - |
--share-sheet-cancel-padding-v | theme.spacing.vertical.v9 | 取消按钮，上下内边距 | - |
--share-sheet-cancel-top-gap | theme.spacing.gap.g5 | 取消按钮，上方间距 | - |
--share-sheet-cancel-placeholder-height | 20px | 取消按钮，容器整体高度 | - |
--share-sheet-popup-mask-bg-color | theme.color.gray.mask.800 | 同 Popup 组件 --popup-mask-bg-color | - |
--share-sheet-popup-radius | theme.borderRadius.r4 | popup的圆角，默认跟随全局圆角风格 | - |
--share-sheet-popup-box-bg-color | theme.color.gray.background.default | 同 Popup 组件 --popup-box-bg-color | - |