Advertisement
Guest User

Hamburger.vue

a guest
Jul 22nd, 2019
346
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div>
  3.     <svg
  4.       t="1492500959545"
  5.       @click="toggleClick"
  6.       class="hamburger"
  7.       :class="{ 'is-active': isActive }"
  8.       style
  9.       viewBox="0 0 1024 1024"
  10.       version="1.1"
  11.       xmlns="http://www.w3.org/2000/svg"
  12.       p-id="1691"
  13.       xmlns:xlink="http://www.w3.org/1999/xlink"
  14.       width="64"
  15.       height="64"
  16.     >
  17.       <path
  18.         d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
  19.         p-id="1692"
  20.       />
  21.       <path
  22.         d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
  23.         p-id="1693"
  24.       />
  25.       <path
  26.         d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
  27.         p-id="1694"
  28.       />
  29.     </svg>
  30.   </div>
  31. </template>
  32.  
  33. <script>
  34. export default {
  35.   name: 'hamburger',
  36.   props: {
  37.     isActive: {
  38.       type: Boolean,
  39.       default: false
  40.     },
  41.     toggleClick: {
  42.       type: Function,
  43.       default: null
  44.     }
  45.   }
  46. }
  47. </script>
  48.  
  49. <style scoped>
  50. .hamburger {
  51.   display: inline-block;
  52.   cursor: pointer;
  53.   width: 20px;
  54.   height: 20px;
  55.   transform: rotate(90deg);
  56.   transition: 0.38s;
  57.   transform-origin: 50% 50%;
  58. }
  59.  
  60. .hamburger.is-active {
  61.   transform: rotate(0deg);
  62. }
  63. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement