Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
  <script type="text/javascript" src="//cdn.rawgit.com/sunabozu/vue-offcanvas/master/index.js"></script>
  
  <link rel="stylesheet" type="text/css" href="//vuikit.github.io/vuikit/static/css/vuikit.css">
  <style type="text/css">
    .sidebar {
      background: #eee;
    }
    
    .sidebar, .uk-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .uk-container {
      height: 100vh;
    }
  </style>
</head>
<body>
  
  <div id="app" class="uk-container uk-container-center uk-text-center uk-form">
    <ul class="uk-grid uk-grid-small uk-grid-match">
     <li class="uk-width-xlarge-1-3 uk-width-medium-1-2">
      <div class="uk-button-group">
        <button class="uk-button uk-button-success" type="button" @click="show('left')">← Show sidebar</button>
        <button class="uk-button uk-button-success" type="button" @click="show('right')">Show sidebar →</button>
       </div>
       
      <vue-offcanvas v-model="showDefault" :align="align" :width="200" :duration=".3" effect="ease-in-out" class="sidebar">
        <div class="uk-panel">
          <button class="uk-button uk-button-danger" type="button" @click="showDefault = false">Hide sidebar</button>
        </div>
      </vue-offcanvas>
     </li>
    </ul>
  </div>
  
  <script type="text/javascript">
      new Vue({
        components: {
          'vue-offcanvas': VueOffcanvas
        },
        
        data: function() {
          return {
            showDefault: false,
            align: 'left'
          }
        },
        
        methods: {
          show(align) {
            this.align = align
            this.showDefault = true
          }
        }
      }).$mount('#app')
  </script>
</body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sunabozupro
0viewers