@21epub/float-panel 中文文档教程
@21epub/float-panel
React 浮动面板
< img src="https://img.shields.io/codecov/c/github/21epub/float-panel" alt="Codecov">
Intro
这是一个用于 React 的组件。
Feature
- [x] Easy-to-use
- [x] Typescript Support
Install
npm install --save @21epub/float-panel
Usage
import React, { Component } from 'react'
import FloatPanel from '@21epub/float-panel'
import '@21epub/float-panel/dist/index.css'
class Example extends Component {
render() {
return <FloatPanel
pos = {x : 0, y: 0, width: 200, height: "auto" },
minWidth = {80},
disableDragging = false,
enableResizing = true,
enableClose = false,
title = 'Test',
className = 'TestPanel',
titleHeight = 22,
titleBarStyle = {
height: titleHeight
},
opts = {
bounds: "window"
} // opts support Rnd opts ,such as bounds , reference to : https://github.com/bokuweb/react-rnd
> This is the panel content </FloatPanel>
}
}
有关详细信息：请参阅示例
Developing and running on localhost
首先安装依赖项，然后为 parcel dev 安装 peerDeps：
npm install
npm run install-peers
以热模块重新加载模式运行示例：
npm start
创建 parcel 示例生产构建：
npm run build-prod
创建捆绑库模块构建：
npm run build
Running
打开文件 dist/index .html 在浏览器中
Testing
运行单元测试：
npm test
License
MIT © 21epub
@21epub/float-panel
React Float panel
Intro
This is a component for react.
Feature
- [x] Easy-to-use
- [x] Typescript Support
Install
npm install --save @21epub/float-panel
Usage
import React, { Component } from 'react'
import FloatPanel from '@21epub/float-panel'
import '@21epub/float-panel/dist/index.css'
class Example extends Component {
render() {
return <FloatPanel
pos = {x : 0, y: 0, width: 200, height: "auto" },
minWidth = {80},
disableDragging = false,
enableResizing = true,
enableClose = false,
title = 'Test',
className = 'TestPanel',
titleHeight = 22,
titleBarStyle = {
height: titleHeight
},
opts = {
bounds: "window"
} // opts support Rnd opts ,such as bounds , reference to : https://github.com/bokuweb/react-rnd
> This is the panel content </FloatPanel>
}
}
For Details: See Example
Developing and running on localhost
First install dependencies and then install peerDeps for parcel dev:
npm install
npm run install-peers
To run Example in hot module reloading mode:
npm start
To create a parcel example production build:
npm run build-prod
To create a bundle library module build:
npm run build
Running
Open the file dist/index.html in your browser
Testing
To run unit tests:
npm test
License
MIT © 21epub
更多
