A pure, lightweight, and beautiful share modal for Vue 3
You can see the live version here:
https://freakingeek.github.io/vue-share-modal/
$ yarn add vue-share-modal # npm install vue-share-modal
Or you can use any package manager you want
You should import share-modal and share-module components from the vue-share-modal package and use them like this.
<template>
<share-modal
:show="showModal"
@update:show="showModal = false"
link="https://www.figma.com/community/file/999287868143091993"
>
<template v-for="(m, key) in modules" :key="key">
<share-module tag="a" href="#" :name="m.name">
<component :is="m.component" />
</share-module>
</template>
</share-modal>
</template>
<script>
import ShareModal from "vue-share-modal";
import ShareModule from "vue-share-modal/src/components/share-module.vue";
import { ChatCircle, Instagram, Twitch, At, Share, Twitter } from "@salmon-ui/icons";
export default {
name: "MyComponent",
components: {
At,
Share,
Twitch,
Twitter,
Instagram,
ChatCircle,
ShareModal,
ShareModule,
},
data() {
return {
showModal: true,
};
},
computed: {
modules() {
return [
{ name: "Chat", component: ChatCircle },
{ name: "Instagram", component: Instagram },
{ name: "Twitter", component: Twitter },
{ name: "Twitch", component: Twitch },
{ name: "E-mail", component: At },
{ name: "More", component: Share },
];
},
},
};
</script>
NOTE: vue-share-modal does not contain any icons by default. So we use @salmon-ui/icons package for example here
Options Or Props ( share-modal )show prop is used for showing modal with animation@update:show event is used to update show value
<share-modal :show="showModal" @update:show="showModal = false" />
link prop is used for showing link in the footer
<share-modal link="https://www.figma.com/community/file/999287868143091993" />
mode prop is used for changing modal style ( normal / outline )
<share-modal mode="outline" />
direction prop is used for changing modal direction ( ltr / rtl )
<share-modal direction="rtl" />
title prop is used for changing modal title
<share-modal title="Share with" />
footerHint prop is used for changing the footer text
<share-modal footerHint="Or share with link" />
variables prop is used for changing the modal CSS variables ( like font-family and colors )
<share-modal
:variables="{
fontFamily: 'Inter, sans-serif',
red: '#ee4d4d',
white: '#fefefe',
primary: '#ee6c4d',
primaryLight: '#ee6c4d08',
secondary: '#3d5a80',
secondaryLight: '#3d5a8096',
}"
/>
Options Or Props ( share-module )tag generated tag for share-module component ( default: span )
name name of the module
<share-module tag="a" name="Pinterest" />
iconClassName you can pass this prop to use font icons
<share-module tag="a" name="Twitter" iconClassName="bi bi-twitter" />
mode you can pass this prop to overwrite share-modal mode prop
<share-modal mode="outline">
<share-module
tag="a"
mode="normal"
/>
</share-modal>
Support for different themes
This project is under ISC license
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4