分享面板 ShareSheet

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

使用

API

安装使用

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

用法示例

基本使用

展示

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiButton, TiShareSheet } from 'titian-h5-react';

export default function App() {
  const ref = useRef<HTMLDivElement>();
  const options = [
    { name: '朋友圈', icon: 'share-wechat-moments', color: '#f5f5f5', bgc: '#26c85a' },
    { name: 'QQ', icon: 'qq', color: '#f5f5f5', bgc: '#2793ff' },
    { name: '微博', icon: 'weibo', color: '#f5f5f5', bgc: '#ff2f3b' },
  ];

  const [visible, setVisible] = useState(false);

  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}>展示</TiButton>
          <TiShareSheet teleport={ref.current} visible={visible} options={options} onClose={() => setVisible(false)} />
        </div>
      </div>
    </div>
  );
}

多行模式

展示

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

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiButton, TiShareSheet } from 'titian-h5-react';

export default function App() {
  const ref = useRef<HTMLDivElement>();
  const options = [
    [
      { name: '微信', icon: 'wechat', color: '#f5f5f5', bgc: '#26c85a' },
      { name: '朋友圈', icon: 'share-wechat-moments', color: '#f5f5f5', bgc: '#26c85a' },
    ],
    [
      { name: 'QQ', icon: 'qq', color: '#f5f5f5', bgc: '#2793ff' },
      { name: '微博', icon: 'weibo', color: '#f5f5f5', bgc: '#ff2f3b' },
    ],
  ];

  const [visible, setVisible] = useState(false);

  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}>展示</TiButton>
          <TiShareSheet teleport={ref.current} visible={visible} options={options} onClose={() => setVisible(false)} />
        </div>
      </div>
    </div>
  );
}

TiShareSheet API

属性 Properties

名称	类型	必填	默认值	说明	备注
options	Array<Option>	否	-	数据配置项，使用多行模式的情况需配置成二维数组，Option类型	-
visible	boolean	否	-	是否显示
title	string	否	-	顶部标题
subTitle	string	否	-	顶部副标题
cancelText	string	否	取消	取消文案	-
closeOnMask	boolean	否	true	同popup/close-on-mask	-
extStyle	string | Record<string, string>	否	-	容器样式
teleport	Element	否	document.body	DOM 挂载节点	-

Option

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

名称	类型	是否必填	默认值	说明	备注
name	string	否	-	文案	-
icon	string	否	-	字体图标(支持传入图片 URL )	-
bgc	string	否	-	图标背景色	-
color	string	否	-	字体图标颜色	-
size	number	否	48	字体图标颜大小	-
isSvgPath	boolean	否	false	是否是加载 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-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	-