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