# di-ui-demo

> 移动版驾驶舱业务组件库

Latest version **0.0.1** (published 2020-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install di-ui-demo
pnpm add di-ui-demo
yarn add di-ui-demo
bun add di-ui-demo
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-01-04 |
| First published | 2020-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | shawn |
| Maintainers | xshawn |
| Keywords | cuke, cuke-ui, react, tool, react-component, component, components, ui, web, framework, frontend |

## Links

- npm: https://www.npmjs.com/package/di-ui-demo
- Repository: http://gitlab.sto.cn/ux/di-ui
- npm.io page: https://npm.io/package/di-ui-demo

## Dependencies (12)

- [moment](https://npm.io/package/moment.md) ^2.24.0
- [@antv/f2](https://npm.io/package/@antv/f2.md) ^3.5.0-beta.3
- [immutable](https://npm.io/package/immutable.md) ^4.0.0-rc.12
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [antd-mobile](https://npm.io/package/antd-mobile.md) ^2.3.1
- [react-icons](https://npm.io/package/react-icons.md) ^3.3.0
- [lib-flexible](https://npm.io/package/lib-flexible.md) ^0.3.2
- [react-turntable](https://npm.io/package/react-turntable.md) ~1.3.1
- [postcss-px2rem-exclude](https://npm.io/package/postcss-px2rem-exclude.md) ^0.0.6
- [react-jinke-music-player](https://npm.io/package/react-jinke-music-player.md) ~4.3.5
- [scroll-into-view-if-needed](https://npm.io/package/scroll-into-view-if-needed.md) ^2.2.20

## 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

- 0.0.1 (latest) — 2020-01-04

## README

<h1 align="center">
di-ui
</h1>

<h4 align="center">DI-UI : 专门用于开发移动端驾驶舱的报表业务组件库.
</h4>

<p align="center">
  <a href="http://snpm-web.sto.cn/package/@sto/di-ui" title="npm">
    <img src="https://img.shields.io/npm/dm/di-ui.svg?style=for-the-badge" alt="npm"/>
  </a>
</p>

<p align="center">
   <a href="https://travis-ci.com/di-ui/di-ui" title="npm">
    <img src="https://travis-ci.com/di-ui/di-ui.svg?branch=master" alt="travis"/>
  </a>
   <a href="https://coveralls.io/github/di-ui/di-ui?branch=master?style=for-the-badge" title="Coverage Status">
    <img src="https://coveralls.io/repos/github/di-ui/di-ui/badge.svg?branch=master" alt="Coverage Status"/>
  </a>
  <a href="https://david-dm.org/di-ui/di-ui" title="dependencies status">
    <img src="https://david-dm.org/di-ui/di-ui/status.svg"/>
  </a>
</p>

## :zap: 安装
> 使用 npm 
```
snpm i @sto/di-ui --save
```

> 使用 yarn
```
yarn add @sto/di-ui
```

> 使用 cdn

```html
<link rel="stylesheet" href="https://unpkg.com/di-ui@latest/dist/di-ui.min.css">
<script type="text/javascript" src="https://unpkg.com/di-ui@latest/dist/di-ui.min.js"></script>
```

## :book: 如何使用

> 1. 全部引入

```jsx
import React from "react"
import { Button } from "di-ui"
import "@sto/di-ui/dist/@sto/di-ui.min.css"

class Page extends React.Component {
  render(){
    return (
      <Button type="primary"></Button>
    )
 }
}
```

> 2 .按需引入

```js
import Button from '@sto/di-ui/lib/button';
import '@sto/di-ui/lib/button/style';
```

> 3. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

```js
// .babelrc.js
module.exports = {
  plugins: [
    ["babel-plugin-import", {
      "libraryName": "di-ui",
      "libraryDirectory": "es",
      "style": true
    },'di-ui'], 
  ]
}

// 多个组件库
module.exports = {
  plugins: [
    ["babel-plugin-import", {
      "libraryName": "di-ui",
      "libraryDirectory": "es",
      "style": true
    },'di-ui'], 
    ["babel-plugin-import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    },'antd'], 
  ]
}


```


##  :wrench: 本地开发
> 请首先安装 npm i -g yarn

1. 安装依赖
> yarn config set registry http://snpm-registry.sto.cn

```
git clone http://gitlab.sto.cn/ux/di-ui.git
cd di-ui
yarn
```

3. 访问 [http://localhost:8080](http://localhost:8080)

4. 开发组件

> 参考 `components/button`

在 `components` 新建一个组件(组件名与文件名对应) 以 `button` 组件目录结构为例

- components
	- button           //组件文件夹
		- `__tests__`    //单元测试
			- `__snapshots__`  // ui 快照
			- `index.test.js`  //测试文件
		- `index.js`     //组件逻辑
                - `style.js`     // 按需加载需要用到
		- `styles.less`  //组件样式

然后 在 `stories` 目录下 新建一个 `button.js`

- stories
	- `button.js`  // storybook 的文档文件

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