Tailwind css button w/ click-outside

In this example below you will see how to do a Tailwind css button w/ click-outside with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by albarezj, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright albarezj ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tailwind css button w/ click-outside</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app">
  <div class="flex justify-center items-center h-screen">
    <span v-click-outside="outside" class="relative text-center">
      <div @click.prevent="active = !active" class="bg-teal-light rounded-lg text-white hover:bg-teal-dark cursor-pointer shadow py-1 px-3 mb-2">menu</div>
      <transition name="fade">
         <ul v-show="active" class="absolute pin-l list-reset border shadow-md text-center rounded-b -ml-4 overflow-hidden">
          <li class="m-4"><a class="no-underline text-grey tracking-wide hover:text-teal-light" href="#">Home</a></li>
          <li class="m-4"><a class="no-underline text-grey tracking-wide hover:text-teal-light" href="#">About</a></li>
          <li class="m-4"><a class="no-underline text-grey tracking-wide hover:text-teal-light" href="#">Contact</a></li>
        </ul>       
      </transition>
    </span>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/albarezj/tailwind-css-button-with-click-outside-MQbXXZ */
.fade-enter-active {
  transition: all .3s ease;
}
.fade-leave-active {
  transition: all .3s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}


/*Downloaded from https://www.codeseek.co/albarezj/tailwind-css-button-with-click-outside-MQbXXZ */
// v-click-outside directive from https://jsfiddle.net/Linusborg/Lx49LaL8/
var app = new Vue({
  el: '#app',
  data: {
    active: false
  },
  methods: {
    outside: function outside(event) {
      this.active = false;
    }
  },
  computed: {},
  directives: {
    'click-outside': {
      bind: function bind(el, binding, vNode) {
        // Provided expression must evaluate to a function.
        if (typeof binding.value !== 'function') {
          var compName = vNode.context.name;
          var warn = '[Vue-click-outside:] provided expression \'' + binding.expression + '\' is not a function, but has to be';
          if (compName) {
            warn += 'Found in component \'' + compName + '\'';
          }

          console.warn(warn);
        }
        // Define Handler and cache it on the element
        var handler = function handler(e) {
          if (!el.contains(e.target) && el !== e.target) {
            binding.value(e);
          }
        };
        el.__vueClickOutside__ = handler;

        // add Event Listeners
        document.addEventListener('click', handler);
      },

      unbind: function unbind(el, binding) {
        // Remove Event Listeners
        document.removeEventListener('click', el.__vueClickOutside__);
        el.__vueClickOutside__ = null;
      }
    }
  }
});

Comments