Treno UI

Installation

Via NPM

npm install treno-ui -S

Import

import Vue from 'vue'
import Treno from 'treno-ui'

Vue.use(Treno)

Drawer 侧边抽屉

Usage

<tr-drawer v-model="collapse" :width="500" position="right">
    <!-- slot -->
    <div>
        Slot Content
    </div>
</tr-drawer>

Usage(in Nuxt.js)

<no-ssr>
  <tr-drawer v-model="collapse" :width="500" position="right">
      <!-- slot -->
      <div>
          Slot Content
      </div>
  </tr-drawer>
</no-ssr>

API

V-Model : Boolean. Drawer Status, collapsed or not.

Props

Name	Description	Usage
width	Content Width	String, Number, (default: '600px'). You can set it to a number, e.g. 600 which turns out to be 600px. or a string like "30vw" and "50%"
position	Drawer Position	String, (default: "right"). Options: right, top, left, bottom
autoHide	If drawer collapse when click on the mask	Boolean, (default: true)
showClose	If display Close button	Boolean, (default: true)
customClass	Drawer Root Class	String, (default: ""), Use it to overwrite default Drawer Style
beforeClose	callback method before close. Interrupts drawer close action	Function, function(callback) { callback() }

Events

Name	Description	Example
close	Triggers when close the drawer	Function, function() { }
open	Triggers when open the drawer	Function, function() { }

LICENSE

MIT