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.

 

8 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat