# @ctmobile/ui-sidepanel

> 支持移动端的UI组件-SidePanel

Latest version **1.0.1** (published 2019-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ctmobile/ui-sidepanel
pnpm add @ctmobile/ui-sidepanel
yarn add @ctmobile/ui-sidepanel
bun add @ctmobile/ui-sidepanel
```

## 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-09-18 |
| First published | 2019-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 50.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | playerljc |
| Maintainers | playerljc |
| Keywords | sidepanel, CtMobile, CTMibole-UI, mobile, webapp, SPA, Hybrid, Cordova, Android, iOS, Material, playerljc, WebFramework |

## Links

- npm: https://www.npmjs.com/package/@ctmobile/ui-sidepanel
- Repository: https://github.com/playerljc/CTMobile-UI
- Homepage: https://github.com/playerljc/CTMobile-UI#readme
- Issues: https://github.com/playerljc/CTMobile-UI/issues
- npm.io page: https://npm.io/package/@ctmobile/ui-sidepanel

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.2.0
- [@ctmobile/ui-util](https://npm.io/package/@ctmobile/ui-util.md) ^1.0.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2019-09-18
- 1.0.0 — 2019-07-19

## README

# SidePanel

* [基本布局](#sidepanel-layout)
  - [Overlay](#sidepanel-layout-overlay)
  - [Push](#sidepanel-layout-push)
  - [Reveal](#sidepanel-layout-reveal)

* [初始化](#sidepanel-initial)

* [例子](#sidepanel-demo)
* [方法](#sidepanel-methods)
* [事件](#sidepanel-events)
  - [afterShow](#sidepanel-events-aftershow)
  - [afterClose](#sidepanel-events-afterclose)
  - [create](#sidepanel-events-create)
  - [beforeShow](#sidepanel-events-beforeshow)
  - [beforeClose](#sidepanel-events-beforeclose)

## 基本布局

### overlay

* ct-sidepanel-overlay - 整体容器

### push

* ct-sidepanel-push-master - 整体容器
  - ct-sidepanel-push - 滑动的面板
  - ct-sidepanel-push-slave - 主面板

### reveal

* ct-sidepanel-reveal - 滑动面板
* ct-sidepanel-reveal-master - 主面板

## 初始化

```

      import SidePanel from '@ctmobile/ui-sidepanel/sidepanel';
      import '@ctmobile/ui-sidepanel/sidepanel.less';

      this.leftSideDom = document.querySelector('.ct-sidepanel-overlay-left');

      this.leftPanel = SidePanel(this.leftSideDom, {
        mask: true,
        width: '80%',
        type: 'overlay',
        direction: 'left',
      });

      this.leftPanel.show();

```

|  名称 |  说明 |
| --- | --- |
| {HtmlElement} - el |  面板的el元素 |
| {object} - config |

配置

width {String} - 宽度

height {String} - 高度

mask {boolean} - 是否有遮罩

zIndex {String} - 层级

type {String} - [overlay(覆盖) | reveal(揭示) | push(推动)]

time {String} - 滑动的时间 300ms

direction {String} -overlay : [left | right | top | bottom]reveal : [left | right]push : [left | right]

listeners {Object} - 事件注册  |

## 例子

#### html

#### js

## 方法

show - 显示

close - 关闭

isCollapse - 是否显示

on( type, handler, ) - 注册事件

* type-string 事件类型
* handler-Function 事件句柄

off( type, handler, ) - 注销事件

* type-string 事件类型
* handler-Function 事件句柄

## 事件

|  名称 |  说明 |
| --- | --- |
| create |  创建 |
| beforeShow |  显示之前 |
| beforeClose |  关闭之前 |
| afterShow |  显示之后 |
| afterClose |  关闭之后 |

```

import SidePanel from '@ctmobile/ui-sidepanel/sidepanel';
import '@ctmobile/ui-sidepanel/sidepanel.less';

this.leftSideDom = document.querySelector('.ct-sidepanel-overlay-left');

this.leftPanel = SidePanel(this.leftSideDom, {
  mask: true,
  width: '80%',
  type: 'overlay',
  direction: 'left',
  listeners: {
    create: () => {
      console.log('create');
    },
  },
});

this.leftPanel.on('beforeShow', () => {
  console.log('beforeShow');
});

this.leftPanel.on('beforeClose', () => {
  console.log('beforeClose');
});

this.leftPanel.on('afterShow', () => {
  console.log('afterShow');
});

this.leftPanel.on('afterClose', () => {
  console.log('afterClose');
});

this.leftPanel.show();

```

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