ShareSheet | Press UI

# ShareSheet

The sharing panel that pops up at the bottom is used to display the operation buttons corresponding to each sharing channel, without specific sharing logic.

# Code Demo

# Basic usage

The sharing panel defines the sharing options through the options attribute. Each item in the array is an object. The object format is shown in the table below the document.

<press-cell title="Show share panel" @click="onClick" />
<press-share-sheet
   :show="showShare"
   title="Share with friends now"
   :options="options"
   @select="onSelect"
   @close="onClose"
/>

export default {
   data() {
     return {
       showShare: false,
       options: [
         { name: 'WeChat', icon: 'wechat', openType: 'share' },
         { name: 'Weibo', icon: 'weibo' },
         { name: 'Copy link', icon: 'link' },
         { name: 'Share Poster', icon: 'poster' },
         { name: 'QR code', icon: 'qrcode' },
       ],
     }
   },
   methods: {
     onClick(event) {
       this.setData({ showShare: true });
     },

     onClose() {
       this.setData({ showShare: false });
     },

     onSelect(event) {
       Toast(event.detail.name);
       this. onClose();
     },
   },
};

# Show multi-line options

When the number of sharing options is large, options can be defined as an array nested format, and each sub-array will be displayed as a row of options.

<press-share-sheet
   :show="showShare"
   title="Share with friends now"
   :options="options"
/>

export default {
   data() {
     return {
       showShare: false,
       options: [
         [
           { name: 'WeChat', icon: 'wechat' },
           { name: 'Weibo', icon: 'weibo' },
           { name: 'QQ', icon: 'qq' },
         ],
         [
           { name: 'Copy link', icon: 'link' },
           { name: 'Share Poster', icon: 'poster' },
           { name: 'QR code', icon: 'qrcode' },
         ],
       ],
     }
   },
});

# Custom icon

In addition to using several built-in icons, you can directly pass in the image URL in icon to use a custom icon.

<press-share-sheet :show="showShare" :options="options" />

export default {
   data() {
     return {
       showShare: false,
       options: [
         {
           name: 'name',
           icon: 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fcustom-icon-fire.png',
         },
         {
           name: 'name',
           icon: 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fcustom-icon-light.png',
         },
         {
           name: 'name',
           icon: 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fcustom-icon-water.png',
         },
       ],
     }
   },
};

# Display description information

The description text below the title can be set through the description attribute, and the description of the sharing option can be added by setting the description attribute in options.

<press-share-sheet
   :show="showShare"
   :options="options"
   title="Share with friends now"
   description="Description information"
/>

export default {
   data() {
     return {
       showShare: false,
       options: [
         { name: 'WeChat', icon: 'wechat' },
         { name: 'Weibo', icon: 'weibo' },
         {
           name: 'Copy link',
           icon: 'link',
           description: 'Description information',
         },
         { name: 'Share Poster', icon: 'poster' },
         { name: 'QR code', icon: 'qrcode' },
       ],
     }
   },
};

# API

# Props

Parameter	Description	Type	Default
show	Whether to show the share panel	boolean	`false`
options	Share options	Option[]	`[]`
title	top title	string	-
cancel-text	cancel button text	string	`'cancel'`
description	Auxiliary description text below the title	string	-
duration	Animation duration, in milliseconds	number \| string	`300`
overlay	Whether to show the overlay	boolean	`true`
close-on-click-overlay	Whether to close the overlay on click	boolean	`true`
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	`true`

# Option Data Structure

The options attribute is an array of objects, each object in the array configures a column, and the object can contain the following values:

key name	description	type
name	sharing channel name	string
description	Description of sharing options	string
icon	Icon, optional values are `qq` `link` `weibo` `wechat` `poster` `qrcode` `weapp-qrcode` `wechat-moments`, support incoming image URL	string
openType	The button `open-type`, can be used to implement the sharing function, the optional value is `share`	string

# Events

Event Name	Description	Callback Parameters
select	Triggered when a share option is clicked	option: Option, index: number
close	fires when close	-
cancel	Fired when the cancel button is clicked	-
click-overlay	Triggered when the overlay is clicked	-

# Slots

Name	Description
title	custom top title
description	custom description text