Deue-ui NPM | npm.io

Treno UI

Installation

Via NPM

npm install deue-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

url-loader vue

@everything-registry/sub-chunk-1471 @zalastax/nolb-deu @infinitebrahmanuniverse/nolb-deu

1.0.1

4 years ago

1.0.0

4 years ago