maximize-window
v1.0.5
Published
react maximize
Downloads
16
Readme
maximize-window
A small button about maximize your component
Installation
# use npm
npm i maximize-window
# use yarn
yarn add maximize-window
Usage
import Maximize from 'maximize-window';
new Maximize(document.getElementById('container'));
or
new Maximize(this.reactRef, {
iconColor: 'white',
fullScreenComponent: {
style: {
backgroundColor: '#e1eed2'
}
},
maxButton: {
style: {
color: 'black',
}
},
minButton: {
style: {
color: 'white',
}
},
preHandle: (type) => {
if (type === 1) {
console.log('用户即将点击展开')
}
if (type === 0) {
console.log('用户即将点击缩小')
}
},
postHandle: (type) => {
if (type === 1) {
console.log('用户已经点击展开')
}
if (type === 0) {
console.log('用户已经点击缩小')
}
}
});
Preview
初始(normal state)
全屏后(full screen state)
API
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
iconColor | 按钮颜色(button color) | String
| black
fullScreenComponent.style | 组件全屏后的样式设置(style of full-screen-state component) | Object
| { zIndex: 1000 }
fullScreenComponent.classname | 组件全屏后的类名(classname of full-screen-state component) | String
| null
maxButton.style | 大屏下按钮样式(style of the button in full-screen-state) | Object
| null
maxButton.classname | 大屏下按钮类名(classname of the button in full-screen-state) | String
| null
minButton.style | 小屏下按钮样式(style of the button in normal-state) | Object
| null
minButton.classname | 小屏下按钮类名(classname of the button in normal-state) | String
| null
preHandle | 操作前预处理函数(prepare function of click event) | Function(type:Number)[type: 1=full-screen-state, 0=normal-state] | null
postHandle | 操作后通知函数(notify function of click event) | Function(type:Number)[type: 1=full-screen-state, 0=normal-state] | null