Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including uxcore-layout with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var uxcoreLayout = require("uxcore-layout")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

uxcore-layout v1.2.0

uxcore-layout ui component for react

uxcore-layout

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

setup develop environment

$ git clone https://github.com/uxcore/uxcore-layout
$ cd uxcore-layout
$ npm install
$ npm start

Usage

let Layout = require('../src');
let {Left, Right} = Layout;
let classnames = require('classnames');

class Demo extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <div>
            <p>左侧自适应,右侧固定</p>
            <Layout className="layoutDemo">
                <Left adaptive={true} className="left">左</Left>
                <Right width={190} className="right">右</Right>
            </Layout>
            <p>右侧自适应,左侧固定</p>
            <Layout className="layoutDemo">
                <Left width={190} className="left">左</Left>
                <Right adaptive={true} className="right">右</Right>
            </Layout>
            <p>左右都固定</p>
            <Layout className="layoutDemo">
                <Left width={500} className="left">左</Left>
                <Right width={500} className="right">右</Right>
            </Layout>
        </div>
        
    }
}

module.exports = Demo;

Props

配置项类型必填默认值功能/备注
classNamestringoptional""加入额外的类名,在使用 kuma 的基础上进行适当的定制时会用得到

子组件

Left/Right

配置项类型必填默认值功能/备注
classNamestringoptional加入额外的类名,在使用 kuma 的基础上进行适当的定制时会用得到
widthnumberoptional500布局块的宽度,仅在定宽时起作用
adaptivebooleanoptional是否为自适应,未设定 adaptive=true 的一侧,则为定宽,不可两者皆为自适应

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free