react-fast-fixed

react fixed toolbar,scroll content element.

🔗 Live demo
🕐 Releases

🌀 Example 🌀 Doc 🌀 Test

📦 Install

npm i react-fast-fixed --save

📄 Usage

Fixed props

<div id="demo"></div>

.m-statusBar {
    display: none;
    height: 20px;
    background-color: skyblue;
}
.m-statusBarSpace {
    padding-top: 20px;
}
.osIOS .m-statusBar{
    display: block;
}
.m-head,
.m-nav {
    height: 20px;
    background-color: #ABCDEF;
}
.m-headSpace {
    padding-top: 20px;
}
.m-navSpace {
    padding-bottom: 20px;
}

var React = require('react')
var ReactDOM = require('react-dom')
var Fixed = require('react-fast-fixed')

var App = React.createClass({
    render: function () {
        return (
            <div>
                <div style={{
                    position: "relative",
                    width: "200px",
                    height: "400px",
                    border: "1px solid gray"
                }} >
                    <Fixed
                    wrapClassName='rf-fxied--absolute osIOS'
                    spaceClassName={
                        [
                            'm-headSpace',
                            'm-statusBarSpace',
                            'm-navSpace'
                        ]
                    }
                    >
                        <div className="rf-fixed-head" style={{"borderBottom": "1px solid gray"}} >
                            <div className="m-statusBar">statusBar</div>
                            <div className="m-head">head</div>
                        </div>
                        <div className="rf-fixed-cnt">
                            Start
                            <div style={{height:"200%", border:"1px solid skyblue"}} ></div>
                            End
                        </div>
                        <div className="rf-fixed-foot" style={{"borderTop": "1px solid gray"}} >
                            <div className="m-nav">nav</div>
                        </div>
                    </Fixed>
                </div>
                <div style={{
                    position: "relative",
                    width: "200px",
                    height: "400px",
                    border: "1px solid gray"
                }} >
                    <Fixed
                    wrapClassName='rf-fxied--absolute'
                    spaceStyle={
                        [
                            {
                                paddingLeft: '30px'
                            }
                        ]
                    }
                    >
                        <div className="rf-fixed-left">
                            <div style={{
                                'backgroundColor': 'pink',
                                'width': '30px',
                                'height': '100%'
                            }} >
                            </div>
                        </div>
                        <div className="rf-fixed-right">
                        </div>
                        <div className="rf-fixed-cnt">
                            <div style={{
                                borderTop: '10px dotted orange',
                                width: '800px'
                            }} ></div>
                        </div>
                    </Fixed>
                </div>
            </div>
        )
    }
})
ReactDOM.render(<App />, document.getElementById('demo'))

spaceStyle

<Fixed spaceStyle={
        [
            {
                // m-head space
                paddingTop: '20px'
            },
            {
                // m-statusBar sapce
                paddingTop: '20px'
            },
            {
                // m-nav space
                paddingBottom: '20px'
            }
        ]
    }>
    ...
    </Fixed>

🔨 development

npm i -g fis3 --registry=https://registry.npm.taobao.org
# Install dependencies | 安装依赖
npm run dep
    # > Suggested Use `yarn` replace `npm run dep` | 建议使用 `yarn` 替代 `npm run dep`
    # npm i -g yarn
    # npm run yi

# Server
npm run s

# Build
npm run dev


# 构建 gh-pages 版本 到 output/
npm run gh
# 将 output/** 发布到 gh-pages 分支
npm run gh-push
# 构建 npm 要发布的代码到 output/
npm run npm

Build based on fast-boot

For npm owner: npm publish Need to be in ./output