mbj36 / vue-socialmedia-share

🔊 Vue component for social sharing of links - https://codesandbox.io/s/kk0mqj11lv
MIT License
70 stars 15 forks source link

Ability to Override Default Content #2

Open syntaxlexx opened 5 years ago

syntaxlexx commented 5 years ago

It would be very nice if one would be able to override the default buttons. Maybe using slots?

gTerrusa commented 3 years ago

I agree that this would be nice, but in the meantime, a workaround could be something like this:

in template:

 <div class="links">
    <span class="facebook">
        <facebook :url="url" :scale="scale"></facebook>
    </span>
    <span class="twitter">
        <twitter :url="url" :title="title" :scale="scale"></twitter>
    </span>
    <span class="linkedin">
        <linkedin :url="url" :scale="scale"></linkedin>
    </span>
    <span class="email">
        <email :url="url" :subject="title" :scale="scale"></email>
    </span>
</div>

sass:

.links {
    display: flex;
    align-items: center;
    justify-content: center;

    > span {
        width: 50px;
        height: 50px;
        cursor: pointer;

        &:not(:last-of-type) {
            margin-right: 16px;
        }

        svg {
            opacity: 0;
            width: 50px;
            height: 50px;
        }

        &.facebook {
            background: center / contain no-repeat  url('/img/valencia/social/fb.png');
        }
        &.twitter {
            background: center / contain no-repeat  url('/img/valencia/social/twitter.png');
        }
        &.linkedin {
            background: center / contain no-repeat  url('/img/valencia/social/in.png');
        }
        &.email {
            background: center / contain no-repeat  url('/img/valencia/social/mail.png');
        }
    }
}