0.0.1 • Published 8 years ago
scalable-component v0.0.1
ScalableComponent
Inspired By pageResponse, which is a Responsive plugin for the mobile
ScalableComponent is based on the CSS3 transform property: scale, it will do auto scale in different devices while abiding by the aspect ratio of visual design
Usage
Set Viewport to disable device scale
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
Import ScalableComponent
/**
* Created by apple on 16/6/30.
*/
import React from "react";
import {render} from "react-dom";
import ScalableComponent from "./scalable";
render(<ScalableComponent mode="contain" wrapperBackgroundColor="rgb(117,155,156)">
<div style={{color:"white"}}>
<h1 style={{position:"absolute"}}>HI</h1>
<p style={{position:"absolute",top:"50px"}}>This is Demo For Scalable</p>
<img height="504px" width="320px" src="http://img5.cache.netease.com/photo/0031/2014-09-20/A6K9J0G94UUJ0031.jpg"
alt=""/>
</div>
</ScalableComponent>, document.getElementById('root'));
ths props of ScalableComponent is :
static propTypes = {
mode: PropTypes.oneOf(['auto', 'contain', 'cover']), //modes
width: PropTypes.number, //width of the visual Design
height: PropTypes.number, //height of the visual Design
origin: PropTypes.string,//origin for scale
wrapperBackgroundColor: PropTypes.string//background Color for hatch area
};
Mode
Contain
Contain mode ensure that page is wrapped in the window, there may be some blank area in left/right/top/bottom area.
Cover
Cover mode ensure that the page cover the window while keep the aspect ratio.
Auto
keep the aspect ratio and adjust the width, ensure that page is wrapped in window in vertical direction
Issue or Advice
welcome to open issue, this component is in development so you can propose any thing you want to be covered in it.
0.0.1
8 years ago