1.0.4 • Published 7 years ago
react-update-lint v1.0.4
react-update-lint
Example
import UpdateLint from 'react-update-lint';
import React, {Component} from 'react';
var todayUpdate = {
id: '2017/03/22',
title: <h4>更新通知</h4>,
description: <div>
<ul>
<li>增加活动对比功能。</li>
<li>增加活动。</li>
<li>增加活动按部门,分类,模板查找的功能。</li>
</ul>
</div>
}
var config = {
style: {
height: 100, //this should be min-height
width: 300
},
lint: todayUpdate
}
export default class Linter extends Component {
render () {
return <UpdateLint config={config}>
<UpdateLint.LintTitle/>
<UpdateLint.LintDescription/>
<UpdateLint.IKnowBtn>
<input type="button" value="I KNOW IT!"/>
</UpdateLint.IKnowBtn>
</UpdateLint>
}
}
as follow screenshot it can easily work with other UI components, following is antd.
import UpdateLint from 'react-update-lint';
import React, {Component} from 'react';
import { Card, Button } from 'antd';
var todayUpdate = {
id: '2017/03/21',
title: <h4>Updating ack</h4>,
description: <div>
<p>add new feture xxx!</p>
<p>add new feture yyy!</p>
</div>
}
var config = {
style: {
height: 100, //this should be min-height
width: 500
},
lint: todayUpdate
}
export default class Linter extends Component {
render () {
return <UpdateLint config={config}>
<Card title={<UpdateLint.LintTitle/>} extra={<a href="#wiki">see detail</a>}>
<UpdateLint.LintDescription/>
<UpdateLint.IKnowBtn>
<div style={{
marginTop: '10px'
}}>
<Button type="primary">I know</Button>
</div>
</UpdateLint.IKnowBtn>
</Card>
</UpdateLint>
}
}