Membuat Widget Sosial Media Menggunakan Vue Js

Widget sosial media adalah animasi menu yang berisi ikon sosial media. Biasanya widget sosial media berada di posisi pinggir halaman website atau di posisi pojok bagian bawah.  Dan pada kesempatan kali ini saya akan Membuat Widget Sosial Media Menggunakan Vue Js.

Pada Langkah pertama untuk membuat Membuat Widget Sosial Media Menggunakan Vue Js yaitu teman-teman harus membuat terlebih dahulu struktur html dan style cssnya seperti  script di bawah ini.

<!DOCTYPE html>

<html>

<head>

  <title>Membuat Widget Sosial Media Menggunakan Vue Js</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"

        rel="stylesheet">

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js

  "></script>

  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <style>

    html {

      background-image: radial-gradient(circle, #72f274 0%, #27332c 200%);

      height: 100vh;

      width: 100vw;

      font-family: Roboto, san-serif;

    }

    .app-container {

      margin-left: auto;

      margin-right: auto;

      max-width: 460px;

      position: relative;

      max-height: 500px;

      height: 100vh;

      background: #fff;

      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    }

    .app-container > .header {

      background: #546e7a;

      padding: 16px;

      color: #fff;

      font-size: 22px;

    }

    .app-container > .bkg-image {

      background: url("https://vuetifyjs.com/public/doc-images/carousel/squirrel.jpg");

      background-size: cover;

      width: 100%;

      height: 180px;

    }

    .app-container > .content-container {

      padding: 16px;

      font-size: 16px;

    }

    .share-button {

      z-index: 100;

      transition: 0.3s cubic-bezier(0, 0, 0.2, 1);

      display: flex;

      align-items: center;

      justify-content: center;

      cursor: pointer;

      border-style: none;

      outline: 0;

      height: 64px;

      width: 64px;

      background-color: #546e7a;

      border-radius: 100%;

      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    }

    .share-button:active {

      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

    }

    .share-button i {

      color: #fff;

      font-size: 30px;

    }

    .social-share-container {

      z-index: 1000;

      position: absolute;

      bottom: 16px;

      left: 16px;

    }

    .social-share-container.right {

      right: 16px;

      left: initial;

    }

    .social-share-container>.share-container > * {

      transition: 0.3s cubic-bezier(0, 0, 0.2, 1);

      position: absolute;

      z-index: -1;

      bottom: 0;

    }

      

  </style>

</head>

<body>

  <div id="app">

    <div class="app-container">

        <div class="header">

            DUMET SCHOOL

        </div>

        <div class="content-container">Selamat Datang di Dumet School!</div>

        <social-share :distance="150" :scale="0.8">

            <button class="share-button" slot="social-item"><i class="fa fa-facebook" aria-hidden="true"></i></button>

            <button class="share-button" slot="social-item"><i class="fa fa-twitter" aria-hidden="true"></i></button>

            <button class="share-button" slot="social-item"><i class="fa fa-tumblr" aria-hidden="true"></i></button>

            <button class="share-button" slot="social-item"><i class="fa fa-facebook" aria-hidden="true"></i></button>

            <button class="share-button" slot="social-item"><i class="fa fa-twitter" aria-hidden="true"></i></button>

        </social-share>

    </div>

</div>

 

</body>

</html>

Jika sudah makan langkah terakhir buatlah script vue js untuk membuat widget sosial media seperti berikut

<script>

  Vue.component('social-share', {

    props: {

        distance: {

            type: Number,

            default: 100       

        },

        position: {

            type: String,

            default: 'left'

        },

        scale: {

            type: Number,

            default: 1

        }

    },

    data: function() {

        return {

            opened: false

        }

    },

    methods: {

        calcRotation: function(index) {

            if (this.$slots['social-item'].length == 1) {

                return 45;

            }

            return ( 90 / (this.$slots['social-item'].length-1) ) * index;

        },

        open: function() {

            this.opened = !this.opened;

           

            this.$slots['social-item'].forEach((item, index) => {

                let angle = this.calcRotation(index) * Math.PI/180;

                angle *= this.position === 'left' ? -1 : 1;

                const x = -Math.sin(angle) * this.distance,

                      y = this.distance*Math.cos(angle);

                

                item.elm.style = `transform: translate(${x}px,-${y}px) scale(${this.scale})`;

                if (!this.opened) {

                    item.elm.style = `transform: translate(0,0) scale(0)`;

                }

            });

        }

    },

    template: `

        <div class="social-share-container" v-bind:class="{right: position !== 'left'}">

            <button class="share-button" v-on:click="open">

                <i class="material-icons" v-if="!opened">share</i>

                <i class="material-icons" v-if="opened">close</i>

            </button>

            <div class="share-container" v-bind:class="{opened: opened}">

                <slot name="social-item"></slot>

            </div>

        </div>

    `

});

 

new Vue({

   el: '#app'

}); 

</script>

Dan jka ditampilkan pada halaman website maka akan seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Widget Sosial Media Menggunakan Vue Js.