🏠 主页地址

React Component based on transform-scale CSS3 for transportation element.

安装

yarn add react-big-screen-scale

# or

npm i react-big-screen-scale

快速上手

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import BigScreenScale, { BigScreenScaleType } from 'react-big-screen-scale';

const App = () => {
  return (
    <BigScreenScale>
      <div
        style={{
          width: '100%',
          height: '100%',
          background: 'red',
        }}
      >
        这是一个demo
      </div>
    </BigScreenScale>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

| 属性 | 描述 | 类型 | 是否必需 | 默认值 | | :------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------: | :------: | :----: | | width | 大屏宽度 | number | 否 | 1920 | | height | 大屏高度 | number | 否 | 1080 | | delay | 窗口变化防抖延迟时间 | number | 否 | 400ms | | autoScale | 自适应配置，配置为 boolean 类型时，为启动或者关闭自适应，配置为对象时，若 x 为 true，x 轴产生边距，y 为 true 时，y 轴产生边距，启用 fullScreen 时此配置失效 | boolean / { x: boolean; y:boolean } | 否 | true | | isfullScreen | 是否开启全屏自适应，启用此配置项时会存在拉伸效果，同时 autoScale 失效，非必要情况下不建议开启 | boolean | 否 | false | | containerStyle | 修改根容器样式，如居中展示时侧边背景色， | CSSProperties | 否 | - | | wrapperStyle | 修改组件自适应区域样式 | CSSProperties | 否 | - |

注意 : 请将body样式设置 overflow: hidden , 建议设置body宽高与视口宽高一致

参与贡献

git clone https://github.com/llq0802/react-big-screen-scale.git
#or
git clone [email protected]:llq0802/react-big-screen-scale.git

cd react-big-screen-scale
yarn
yarn start

打开一个新的终端

cd example
yarn
yarn start
访问`http://localhost:1234`

测试

yarn test

联系我

👤 VX : llq958614130 | E-mail : [email protected]

支持

❤️ ❤️ ❤️ 觉得还行的话请不吝啬你的小心心奥 ❤️ ❤️ ❤️

This README was generated with ❤️ by readme-md-generator