❤
npm
Sign UpSign In

chanjet-nova-ui-theme

0.0.4 • Public • Published

chanjet-nova-ui-theme

使用方法说明

实现支持 theme 的 React Component?

现在，我们以一个简单的支持 theme 的组件 InputGroup 来示范。InputGroup 是一个水平布局的组件，其中可以包含 Icon、Input，假设我们这里的 Icon，Input都已经实现了 theme 化管理，现在示例 InputGroup 如何实现 theme 的支持。

InputGroup.js

 
import React, {createElement} from 'react';
import classnames from 'classnames';
import {connectStyle} from 'chanjet-nova-ui-theme';
 
const InputGroup = props => {
    let {className, children, ...others} = props;
    // classnames 支持将多个 className 进行合并
    className = classnames[className];
    
    return (
        <div className={className} {...others}>
            {children}
        </div>
    )
}
 
InputGroup.propTypes = {
}
 
const StyledInputGroup = connectStyle('chanjet.ui.InputGroup')(StyledInputGroup);
 
export {
    StyledInputGroup as InputGroup
}
 

定义你的 ui theme

Theme.js

const theme = {
    // 组件样式声明，key 为 InputGroup.js 中 connectStyle 声明的名称。
    'chanjet.ui.InputGroup': {
        'chanjet.ui.Icon': {
            display:'inline-block',
            marginRight: '4px',
        },
        'chanjet.ui.Input': {
            display:'inline-block'
        },
        
        ‘.small': {
            height: '32px'
        },
        
        display:'inline-block',
        verticalAlign: 'middle'
    }
}
 
export default theme;
 

在你的App中使用

App.js

import React from 'react';
import {StyleProvider} from 'chanjet-nova-ui-theme';
import InputGroup from './InputGroup';
import Icon from './Icon';
import Input from './Input';
import theme from './Theme';
 
export default App extends React.Component {
    render() {
        return (
             <StyleProvider style={theme} mountNode='stylesheet'>
                <div>
                    <h1>It Works!</h1>
                    <InputGroup styleName="small">
        	             <Icon name="ic_access_alarm" />
        	             <Input type='number' />
    	             </InputGroup>
                   </div>
             </StyleProvider>
        )
    }
}
 
render(<App />, document.querySelector("#app"));
 

index.html

 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>React App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
    <div id="app">Loading...</div>
</div>
<style id="stylesheet"></style>
</body>
</html>
 
 
 

Readme

Keywords

none

Package Sidebar

Install

npm i chanjet-nova-ui-theme

Repository

gitlab.rd.chanjet.com/nova/chanjet-nova-ui-theme

Homepage

gitlab.rd.chanjet.com/nova/chanjet-nova-ui-theme#readme

Weekly Downloads

0

Version

0.0.4

License

MIT

Last publish

Collaborators

  • jenkins_test
Try on RunKit
Report malware