# deue-ui

> Vue UI Kit

Latest version **1.0.1** (published 2019-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install deue-ui
pnpm add deue-ui
yarn add deue-ui
bun add deue-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-11-19 |
| First published | 2019-11-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 118.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | fulliton |
| Maintainers | fulliton |

## Links

- npm: https://www.npmjs.com/package/deue-ui
- npm.io page: https://npm.io/package/deue-ui

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [url-loader](https://npm.io/package/url-loader.md) ^1.1.2

## Recent versions

- 1.0.1 (latest) — 2019-11-19
- 1.0.0 — 2019-11-19

## README

## Treno UI

[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][downloads-url]

### 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](LICENSE)

[npm-image]: https://img.shields.io/npm/v/treno-ui.svg
[npm-url]: https://npmjs.org/package/treno-ui
[downloads-image]: https://img.shields.io/npm/dm/treno-ui.svg
[downloads-url]: https://npmjs.org/package/treno-ui

---
_Source: https://npm.io/package/deue-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._