Sard Uniapp

Appearance

在新窗口打开⤴

ShareSheet分享面板

介绍 ​

从底部向上弹出分享菜单。

引入 ​

js
import ShareSheet from 'sard-uniapp/components/share-sheet/share-sheet.vue'
import ShareSheetItem from 'sard-uniapp/components/share-sheet/share-sheet-item.vue'
import ShareSheetRow from 'sard-uniapp/components/share-sheet-row/share-sheet-row.vue'
import ShareSheetAgent from 'sard-uniapp/components/share-sheet-agent/share-sheet-agent.vue'
import { shareSheet } from 'sard-uniapp'

代码演示 ​

基础使用 ​

使用 v-model:visible 属性控制显隐，使用 itemList 属性配置分享项。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItemProps } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  {
    label: 'Wechat',
    color: '#fff',
    background: '#0bc15f',
    icon: 'wechat-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: 'Alipay',
    color: '#fff',
    background: '#1677ff',
    icon: 'alipay-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: 'Twitter',
    color: '#fff',
    background: '#1d9bf0',
    icon: 'twitter-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: 'Facebook',
    color: '#fff',
    background: '#1877f2',
    icon: 'facebook-circle-fill',
    iconFamily: 'demo-icons',
  },
]

const visible = ref(false)

const onSelect = (item: ShareSheetItemProps) => {
  toast(item.label)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  {
    label: "Wechat",
    color: "#fff",
    background: "#0bc15f",
    icon: "wechat-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "Alipay",
    color: "#fff",
    background: "#1677ff",
    icon: "alipay-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "Twitter",
    color: "#fff",
    background: "#1d9bf0",
    icon: "twitter-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "Facebook",
    color: "#fff",
    background: "#1877f2",
    icon: "facebook-circle-fill",
    iconFamily: "demo-icons"
  }
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.label);
};
</script>

取消按钮 1.30.3+ ​

设置 show-cancel 属性展示取消按钮，或者使用 cancel 属性在设置取消按钮文本的同时显示取消按钮。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    show-cancel
    :item-list="itemList"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItemProps } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  {
    label: 'Wechat',
    color: '#fff',
    background: '#0bc15f',
    icon: 'wechat-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: 'Alipay',
    color: '#fff',
    background: '#1677ff',
    icon: 'alipay-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: 'Twitter',
    color: '#fff',
    background: '#1d9bf0',
    icon: 'twitter-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: 'Facebook',
    color: '#fff',
    background: '#1877f2',
    icon: 'facebook-circle-fill',
    iconFamily: 'demo-icons',
  },
]

const visible = ref(false)

const onSelect = (item: ShareSheetItemProps) => {
  toast(item.label)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    show-cancel
    :item-list="itemList"
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  {
    label: "Wechat",
    color: "#fff",
    background: "#0bc15f",
    icon: "wechat-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "Alipay",
    color: "#fff",
    background: "#1677ff",
    icon: "alipay-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "Twitter",
    color: "#fff",
    background: "#1d9bf0",
    icon: "twitter-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "Facebook",
    color: "#fff",
    background: "#1877f2",
    icon: "facebook-circle-fill",
    iconFamily: "demo-icons"
  }
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.label);
};
</script>

多行 ​

itemList 属性值如果是二维数组则渲染成多行。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    show-cancel
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItemProps } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  [
    {
      label: 'Wechat',
      color: '#fff',
      background: '#0bc15f',
      iconFamily: 'demo-icons',
      icon: 'wechat-fill',
    },
    {
      label: 'Alipay',
      color: '#fff',
      background: '#1677ff',
      iconFamily: 'demo-icons',
      icon: 'alipay-fill',
    },
    {
      label: 'Twitter',
      color: '#fff',
      background: '#1d9bf0',
      iconFamily: 'demo-icons',
      icon: 'twitter-fill',
    },
    {
      label: 'Facebook',
      color: '#fff',
      background: '#1877f2',
      iconFamily: 'demo-icons',
      icon: 'facebook-circle-fill',
    },
  ],
  [
    {
      label: 'Spotify',
      color: '#fff',
      background: '#1ed760',
      iconFamily: 'demo-icons',
      icon: 'spotify-fill',
    },
    {
      label: 'Skype',
      color: '#fff',
      background: '#0b64a4',
      iconFamily: 'demo-icons',
      icon: 'skype-fill',
    },
    {
      label: 'Youtube',
      color: '#fff',
      background: '#ff0000',
      iconFamily: 'demo-icons',
      icon: 'youtube-fill',
    },
    {
      label: 'Paypal',
      color: '#fff',
      background: '#0070ba',
      iconFamily: 'demo-icons',
      icon: 'paypal-fill',
    },
    {
      label: 'Whatsapp',
      color: '#fff',
      background: '#128c7e',
      iconFamily: 'demo-icons',
      icon: 'whatsapp-fill',
    },
    {
      label: 'Telegram',
      color: '#fff',
      background: '#0088cc',
      iconFamily: 'demo-icons',
      icon: 'telegram-fill',
    },
    {
      label: 'Snapchat',
      color: '#000',
      background: '#fffc00',
      iconFamily: 'demo-icons',
      icon: 'snapchat-fill',
    },
  ],
]

const visible = ref(false)

const onSelect = (item: ShareSheetItemProps) => {
  toast(item.label)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    show-cancel
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  [
    {
      label: "Wechat",
      color: "#fff",
      background: "#0bc15f",
      iconFamily: "demo-icons",
      icon: "wechat-fill"
    },
    {
      label: "Alipay",
      color: "#fff",
      background: "#1677ff",
      iconFamily: "demo-icons",
      icon: "alipay-fill"
    },
    {
      label: "Twitter",
      color: "#fff",
      background: "#1d9bf0",
      iconFamily: "demo-icons",
      icon: "twitter-fill"
    },
    {
      label: "Facebook",
      color: "#fff",
      background: "#1877f2",
      iconFamily: "demo-icons",
      icon: "facebook-circle-fill"
    }
  ],
  [
    {
      label: "Spotify",
      color: "#fff",
      background: "#1ed760",
      iconFamily: "demo-icons",
      icon: "spotify-fill"
    },
    {
      label: "Skype",
      color: "#fff",
      background: "#0b64a4",
      iconFamily: "demo-icons",
      icon: "skype-fill"
    },
    {
      label: "Youtube",
      color: "#fff",
      background: "#ff0000",
      iconFamily: "demo-icons",
      icon: "youtube-fill"
    },
    {
      label: "Paypal",
      color: "#fff",
      background: "#0070ba",
      iconFamily: "demo-icons",
      icon: "paypal-fill"
    },
    {
      label: "Whatsapp",
      color: "#fff",
      background: "#128c7e",
      iconFamily: "demo-icons",
      icon: "whatsapp-fill"
    },
    {
      label: "Telegram",
      color: "#fff",
      background: "#0088cc",
      iconFamily: "demo-icons",
      icon: "telegram-fill"
    },
    {
      label: "Snapchat",
      color: "#000",
      background: "#fffc00",
      iconFamily: "demo-icons",
      icon: "snapchat-fill"
    }
  ]
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.label);
};
</script>

标题和描述 ​

使用 title 和 description 配置标题和描述。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    title="分享到"
    description="这是描述"
    show-cancel
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItemProps } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  {
    label: 'Wechat',
    color: '#fff',
    background: '#0bc15f',
    iconFamily: 'demo-icons',
    icon: 'wechat-fill',
  },
  {
    label: 'Alipay',
    color: '#fff',
    background: '#1677ff',
    iconFamily: 'demo-icons',
    icon: 'alipay-fill',
    description: '这是描述这是描述',
  },
  {
    label: 'Twitter',
    color: '#fff',
    background: '#1d9bf0',
    iconFamily: 'demo-icons',
    icon: 'twitter-fill',
  },
  {
    label: 'Facebook',
    color: '#fff',
    background: '#1877f2',
    iconFamily: 'demo-icons',
    icon: 'facebook-circle-fill',
  },
]

const visible = ref(false)

const onSelect = (item: ShareSheetItemProps) => {
  toast(item.label)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    title="分享到"
    description="这是描述"
    show-cancel
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  {
    label: "Wechat",
    color: "#fff",
    background: "#0bc15f",
    iconFamily: "demo-icons",
    icon: "wechat-fill"
  },
  {
    label: "Alipay",
    color: "#fff",
    background: "#1677ff",
    iconFamily: "demo-icons",
    icon: "alipay-fill",
    description: "\u8FD9\u662F\u63CF\u8FF0\u8FD9\u662F\u63CF\u8FF0"
  },
  {
    label: "Twitter",
    color: "#fff",
    background: "#1d9bf0",
    iconFamily: "demo-icons",
    icon: "twitter-fill"
  },
  {
    label: "Facebook",
    color: "#fff",
    background: "#1877f2",
    iconFamily: "demo-icons",
    icon: "facebook-circle-fill"
  }
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.label);
};
</script>

图片类型图标 ​

icon 属性可以是图片路径。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    show-cancel
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItemProps } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  {
    label: 'Sard',
    icon: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg',
  },
  {
    label: 'Wechat',
    color: '#fff',
    background: '#0bc15f',
    iconFamily: 'demo-icons',
    icon: 'wechat-fill',
  },
]

const visible = ref(false)

const onSelect = (item: ShareSheetItemProps) => {
  toast(item.label)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    show-cancel
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  {
    label: "Sard",
    icon: "https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg"
  },
  {
    label: "Wechat",
    color: "#fff",
    background: "#0bc15f",
    iconFamily: "demo-icons",
    icon: "wechat-fill"
  }
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.label);
};
</script>

禁用 ​

禁用的选项不可点击。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    show-cancel
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItemProps } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  {
    label: 'Wechat',
    color: '#fff',
    background: '#0bc15f',
    icon: 'wechat-fill',
    iconFamily: 'demo-icons',
    disabled: true,
  },
  {
    label: 'Alipay',
    color: '#fff',
    background: '#1677ff',
    icon: 'alipay-fill',
    iconFamily: 'demo-icons',
  },
]

const visible = ref(false)

const onSelect = (item: ShareSheetItemProps) => {
  toast(item.label)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    show-cancel
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  {
    label: "Wechat",
    color: "#fff",
    background: "#0bc15f",
    icon: "wechat-fill",
    iconFamily: "demo-icons",
    disabled: true
  },
  {
    label: "Alipay",
    color: "#fff",
    background: "#1677ff",
    icon: "alipay-fill",
    iconFamily: "demo-icons"
  }
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.label);
};
</script>

命令式 1.30.3+ ​

先在页面放置代理组件。

tsx
<sar-share-sheet-agent />

接着便可以使用 shareSheet 方法显示分享面板。

如果需要显示多个命令式分享面板，可以给代理组件设置 id，在调用 shareSheet 方法时传入相同的 id 来使用对应的代理组件。

vue
<template>
  <sar-button @click="onClick">显示分享面板</sar-button>
</template>

<script setup lang="ts">
import { shareSheet, toast } from 'sard-uniapp'

const onClick = () => {
  shareSheet({
    title: '分享到',
    showCancel: true,
    itemList: [
      {
        label: 'Wechat',
        color: '#fff',
        background: '#0bc15f',
        icon: 'wechat-fill',
        iconFamily: 'demo-icons',
      },
      {
        label: 'Alipay',
        color: '#fff',
        background: '#1677ff',
        icon: 'alipay-fill',
        iconFamily: 'demo-icons',
      },
    ],
    onSelect(item) {
      toast(item.label)
    },
  })
}
</script>
vue
<template>
  <sar-button @click="onClick">显示分享面板</sar-button>
</template>

<script setup lang="js">
import { shareSheet, toast } from "sard-uniapp";
const onClick = () => {
  shareSheet({
    title: "\u5206\u4EAB\u5230",
    showCancel: true,
    itemList: [
      {
        label: "Wechat",
        color: "#fff",
        background: "#0bc15f",
        icon: "wechat-fill",
        iconFamily: "demo-icons"
      },
      {
        label: "Alipay",
        color: "#fff",
        background: "#1677ff",
        icon: "alipay-fill",
        iconFamily: "demo-icons"
      }
    ],
    onSelect(item) {
      toast(item.label);
    }
  });
};
</script>

插槽 1.30.3+ ​

可以使用插槽自定义内容，包括标题、描述、取消按钮等。 也可以使用默认插槽自定义分享项，此时需要使用 share-sheet-item 和 share-sheet-row 组件来构建分享项的布局。

可使用 share-sheet 或者 share-sheet-agent 组件的插槽自定义内容。

vue
<template>
  <sar-button @click="showCustomShareSheet">显示分享面板</sar-button>

  <sar-share-sheet-agent id="custom-share-sheet">
    <template #title>
      <text
        style="color: var(--sar-primary); font-size: 32rpx; font-weight: bold"
      >
        自定义标题
      </text>
    </template>
    <template #description>
      <text style="color: var(--sar-danger); font-size: 26rpx">
        这是通过插槽自定义的描述
      </text>
    </template>
    <sar-share-sheet-row>
      <sar-share-sheet-item
        label="Wechat"
        color="#fff"
        background="#0bc15f"
        icon="wechat-fill"
        icon-family="demo-icons"
      />
      <sar-share-sheet-item
        label="Alipay"
        color="#fff"
        background="#1677ff"
        icon="alipay-fill"
        icon-family="demo-icons"
      />
      <sar-share-sheet-item
        label="Twitter"
        color="#fff"
        background="#1d9bf0"
        icon="twitter-fill"
        icon-family="demo-icons"
      />
    </sar-share-sheet-row>
    <template #cancel>
      <text style="color: var(--sar-danger)">关闭</text>
    </template>
  </sar-share-sheet-agent>
</template>

<script setup lang="ts">
import { shareSheet, toast } from 'sard-uniapp'

const showCustomShareSheet = () => {
  shareSheet({
    id: 'custom-share-sheet',
    onSelect(item) {
      toast(item.label)
    },
  })
}
</script>
vue
<template>
  <sar-button @click="showCustomShareSheet">显示分享面板</sar-button>

  <sar-share-sheet-agent id="custom-share-sheet">
    <template #title>
      <text
        style="color: var(--sar-primary); font-size: 32rpx; font-weight: bold"
      >
        自定义标题
      </text>
    </template>
    <template #description>
      <text style="color: var(--sar-danger); font-size: 26rpx">
        这是通过插槽自定义的描述
      </text>
    </template>
    <sar-share-sheet-row>
      <sar-share-sheet-item
        label="Wechat"
        color="#fff"
        background="#0bc15f"
        icon="wechat-fill"
        icon-family="demo-icons"
      />
      <sar-share-sheet-item
        label="Alipay"
        color="#fff"
        background="#1677ff"
        icon="alipay-fill"
        icon-family="demo-icons"
      />
      <sar-share-sheet-item
        label="Twitter"
        color="#fff"
        background="#1d9bf0"
        icon="twitter-fill"
        icon-family="demo-icons"
      />
    </sar-share-sheet-row>
    <template #cancel>
      <text style="color: var(--sar-danger)">关闭</text>
    </template>
  </sar-share-sheet-agent>
</template>

<script setup lang="js">
import { shareSheet, toast } from "sard-uniapp";
const showCustomShareSheet = () => {
  shareSheet({
    id: "custom-share-sheet",
    onSelect(item) {
      toast(item.label);
    }
  });
};
</script>

API ​

ShareSheetProps ​

继承 PopupProps 并有以下额外属性：

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
item-list面板选项列表ShareSheetItemProps[] | ShareSheetItemProps[][][]
title面板标题string-
description面板描述string-
cancel取消按钮内容string-
visible (v-model)面板是否可见boolean-
overlay-closable点击遮罩后是否关闭booleantrue
before-close关闭前的回调，返回 false 或 rejected 状态的 Promise 可阻止关闭(type: 'close' | 'cancel' | 'select') => boolean | Promise\<any>-
duration显隐动画时长，单位 msnumber300

ShareSheetSlots 1.30.3+ ​

插槽描述属性
default自定义默认内容-
description自定义描述-
title自定义标题-
cancel自定义取消按钮内容-

ShareSheetEmits ​

事件描述类型
update:visible分享面板显隐时触发(visible: boolean) => void
close点击遮罩时触发() => void
cancel点击取消按钮时触发() => void
select点击分享项时触发(item: ShareSheetItemProps) => void
visible-hook 1.22.1+入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.22.1+入场动画开始前触发() => void
enter 1.22.1+入场动画开始时触发() => void
after-enter 1.22.1+入场动画结束时触发() => void
enter-cancelled 1.22.1+入场动画取消时触发() => void
before-leave 1.22.1+退场动画开始前触发() => void
leave 1.22.1+退场动画开始时触发() => void
after-leave 1.22.1+退场动画结束时触发() => void
leave-cancelled 1.22.1+退场动画取消时触发() => void

ShareSheetRowProps 1.30.3+ ​

属性描述类型默认值
root-class行元素类名string-
root-style行元素样式StyleValue-

ShareSheetRowSlots 1.30.3+ ​

插槽描述属性
default行内容-

ShareSheetItemProps 1.30.3+ ​

属性描述类型默认值
name标签，同 label，建议使用 labelstring-
label 1.30.3+标签string-
value 1.30.3+值any-
description描述string-
color图标颜色string-
background图标背景颜色string-
icon图标名称，可以是图片路径string-
iconFamily图标字体string-
disabled禁用状态booleanfalse

ShareSheetItemSlots 1.30.3+ ​

插槽描述属性
default分享项内容-
description分享项描述-
icon分享项图标-
label分享项标签-

ShareSheetItemEmits 1.30.3+ ​

事件描述类型
click点击分享项时触发() => void

ShareSheetAgentProps / ShareSheetOptions 1.30.3+ ​

继承 ShareSheetProps 并有以下额外属性。

属性描述类型默认值
id分享面板组件的 idstring'shareSheet'
onClose点击遮罩时调用() => void
onCancel点击取消按钮时调用() => void
onSelect点击菜单项时调用(item: ShareSheetItemProps) => void
onVisibleHook入场/退场动画状态改变时调用(name: TransitionHookName) => void
onBeforeEnter入场动画开始前调用() => void
onEnter入场动画开始时调用() => void
onAfterEnter入场动画结束时调用() => void
onEnterCancelled入场动画取消时调用() => void
onBeforeLeave退场动画开始前调用() => void
onLeave退场动画开始时调用() => void
onAfterLeave退场动画结束时调用() => void
onLeaveCancelled退场动画取消时调用() => void

ShareSheetAgentSlots 1.30.3+ ​

继承 ShareSheetSlots。

ShareSheetAgentEmits 1.30.3+ ​

继承 ShareSheetEmits。

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-share-sheet-border-radius: var(--sar-rounded-xl);
  --sar-share-sheet-border-color: var(--sar-border-color);
  --sar-share-sheet-bg: var(--sar-emphasis-bg);

  --sar-share-sheet-header-padding: 32rpx;

  --sar-share-sheet-title-font-size: var(--sar-text-lg);

  --sar-share-sheet-description-margin-top: 16rpx;
  --sar-share-sheet-description-font-size: var(--sar-text-base);
  --sar-share-sheet-description-color: var(--sar-tertiary-color);

  --sar-share-sheet-row-padding-y: 32rpx;
  --sar-share-sheet-row-padding-x: 16rpx;

  --sar-share-sheet-item-width: 160rpx;
  --sar-share-sheet-item-active-opacity: var(--sar-active-opacity);

  --sar-share-sheet-icon-wrapper-size: 96rpx;
  --sar-share-sheet-icon-wrapper-border-radius: var(--sar-rounded-full);

  --sar-share-sheet-icon-font-size: 48rpx;
  --sar-share-sheet-icon-color: var(--sar-tertiary-color);
  --sar-share-sheet-icon-bg: var(--sar-secondary-bg);

  --sar-share-sheet-name-margin-top: 16rpx;
  --sar-share-sheet-name-padding-x: 8rpx;
  --sar-share-sheet-name-font-size: var(--sar-text-base);
  --sar-share-sheet-name-color: var(--sar-tertiary-color);

  --sar-share-sheet-item-description-margin-top: 0;
  --sar-share-sheet-item-description-padding-x: 8rpx;
  --sar-share-sheet-item-description-font-size: var(--sar-text-sm);
  --sar-share-sheet-item-description-color: var(--sar-fourth-color);

  --sar-share-sheet-gap-bg: var(--sar-body-bg);
  --sar-share-sheet-gap-height: 16rpx;

  --sar-share-sheet-cancel-min-height: 96rpx;
  --sar-share-sheet-cancel-padding: 16rpx 32rpx;
  --sar-share-sheet-cancel-font-size: var(--sar-text-lg);
  --sar-share-sheet-cancel-active-bg: var(--sar-active-bg);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao