rsb

react-scale-box

做大屏的数据可视化项目的时候,用此组件包裹可实现同比例缩放

Showing:

Popularity

Downloads/wk

10

GitHub Stars

16

Maintenance

Last Commit

2yrs ago

Contributors

0

Package

Dependencies

3

Size (min+gzip)

6.7KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

做大屏的数据可视化项目的时候,用此组件包裹可实现同比例缩放

npm i react-scale-box
or
yarn add react-scale-box

使用方式

import ScaleBox from 'react-scale-box';

...
render() {
    return (
      <ScaleBox width={1920} height={1080}>
        <div className={'screen'}>
          你的页面内容
        </div>
      </ScaleBox>
    )
  }

props

width: 设计的页面宽度,默认1920
height: 设计的页面高度,默认1080
width和height表示设计稿的宽高尺寸,设定好后,就能保持这个比例展示你的内容,实现跟网易有数的数据可视化项目差不多的效果

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100