ShareSheet sharing panel

introduce

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.

Basic usage

The sharing panel defines sharing options through the options attribute. Each item in the array is an object. For the object format, see the table at the bottom of the document.

<z-cell is-link title="Show sharing panel" @click="showBasic = true" />
<z-share-sheet
   v-model:show="showBasic"
   title="Share with friends now"
   :options="options"
   @select="onSelect"
/>

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const showBasic = ref(false)
const options = computed(() => [
   { name: 'WeChat', icon: 'wechat' },
   { name: 'Weibo', icon: 'weibo' },
   { name: 'Copy link', icon: 'link' },
   { name: 'Share poster', icon: 'poster' },
   { name: 'QR code', icon: 'qrcode' }
])
const onSelect = (option: any) => {
   toast.showToast(option.name)
   showBasic.value = false
}

Show multi-line options

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

<z-share-sheet
   v-model:show="showMultiLine"
   title="Share with friends now"
   :options="multiLineOptions"
   @select="onSelect"
/>

const multiLineOptions = computed(() => [
   [
     { name: 'WeChat', icon: 'wechat' },
     { name: 'Moments', icon: 'wechat-moments' },
     { name: 'Weibo', icon: 'weibo' },
     { name: 'QQ', icon: 'qq' }
   ],
   [
     { name: 'Copy link', icon: 'link' },
     { name: 'Share poster', icon: 'poster' },
     { name: 'QR code', icon: 'qrcode' },
     { name: 'small program code', icon: 'weapp-qrcode' }
   ]
])

Custom icon

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

<z-share-sheet
   v-model:show="showCustomIcon"
   :options="customIconOptions"
   @select="onSelect"
/>

const customIconOptions = computed(() => [
   {
     name: 'name',
     icon: 'https://cdn.zebraui.com/zebra-ui/images/assets/demo-select.png'
   },
   {
     name: 'name',
     icon: 'zhihu'
   },
   {
     name: 'name',
     icon: 'linkedin'
   },
   { name: 'name', icon: 'facebook' }
])

Display description information

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

<z-share-sheet
   v-model:show="showWithDesc"
   title="Share with friends now"
   :options="optionsWithDesc"
   description="Description information"
   @select="onSelect"
/>

const optionsWithDesc = computed(() => [
   { 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' }
])

Props

Option data structure

The options property is an array of objects. Each object in the array is configured with a column. The objects can contain the following values:

Events

Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.