https://github.com/freakingeek/vue-share-modal
A pure, lightweight, and beautiful share modal for Vue3 (SFC)
https://github.com/freakingeek/vue-share-modal
sfc share-modal vue
Last synced: about 1 year ago
JSON representation
A pure, lightweight, and beautiful share modal for Vue3 (SFC)
- Host: GitHub
- URL: https://github.com/freakingeek/vue-share-modal
- Owner: freakingeek
- License: isc
- Created: 2021-08-17T08:03:00.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-20T10:25:29.000Z (about 2 years ago)
- Last Synced: 2024-08-04T02:07:27.666Z (almost 2 years ago)
- Topics: sfc, share-modal, vue
- Language: Vue
- Homepage: https://freakingeek.github.io/vue-share-modal/
- Size: 234 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## vue-share-modal
A pure, lightweight, and beautiful share modal for Vue 3
## 🪁 Live version
You can see the live version here:
[https://freakingeek.github.io/vue-share-modal/](https://freakingeek.github.io/vue-share-modal/)
## 💾 Install
```shell
$ yarn add vue-share-modal
# npm install vue-share-modal
```
Or you can use any package manager you want
## 🚀 Usage
You should import **share-modal** and **share-module** components from the vue-share-modal
package and use them like this.
```vue
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 },
];
},
},
};
```
> 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
```vue
```
```link``` prop is used for showing link in the footer
```vue
```
```mode``` prop is used for changing modal style ( ```normal``` / ```outline``` )
```vue
```
```direction``` prop is used for changing modal direction ( ```ltr``` / ```rtl``` )
```vue
```
```title``` prop is used for changing modal title
```vue
```
```footerHint``` prop is used for changing the footer text
```vue
```
```variables``` prop is used for changing the modal CSS variables ( like font-family and colors )
```vue
```
## Options Or Props ( share-module )
```tag``` generated tag for share-module component ( default: ```span``` )
```vue
```
```name``` name of the module
```vue
```
```iconClassName``` you can pass this prop to use font icons
```vue
```
```mode``` you can pass this prop to overwrite share-modal ```mode``` prop
```vue
```
## ✏ Todo
- [ ] Support for different themes
## 📝 License
This project is under [ISC](https://github.com/sttatusx/vue-share-modal/blob/master/LICENSE) license