详解react使用react-bootstrap当*造车
上一篇我们谈了谈如何配置react的webpack环境
可能很多人已经打开过官方文档学习了react的基础知识
不管有没有,在介绍react之前,我想先介绍一下react-bootstrap
先懂得使用别人造的*,就能更快成为老司机。
好的,源代码奉上:
git clone https://github.com/lingjiawen/react_bootstrap_demo.git cd react_bootstrap_demo npm install npm run dev
打开浏览器输入:localhost:8080
现在就让我们来看看它能干什么吧!
一、button
使用button声明一个按钮,bssize有如下四个属性,可以分别有大、中、小、超小四种大小的按钮,再用buttontoolbar包裹起来
<buttontoolbar> <button bsstyle="primary" bssize="large">large button</button> <button bssize="large">large button</button> </buttontoolbar> <buttontoolbar> <button bsstyle="primary">default button</button> <button>default button</button> </buttontoolbar> <buttontoolbar> <button bsstyle="primary" bssize="small">small button</button> <button bssize="small">small button</button> </buttontoolbar> <buttontoolbar> <button bsstyle="primary" bssize="xsmall">extra small button</button> <button bssize="xsmall">extra small button</button> </buttontoolbar>
使用效果如下:
使用well将按钮包裹起来,可以实现如下效果:(well在后面介绍)
<div classname="well" style={wellstyles}> <button bsstyle="primary" bssize="large" block>block level button</button> <button bssize="large" block>block level button</button> </div>
使用 bsstyle属性可以调整按钮的状态颜色:
<button>default</button> <button s>primary</button> <button bsstyle="success">success</button>
下图bsstyle属性分别为:info、warning、danger、link
使用按钮实现点击loading,等待结果的功能:
点击之后会变为loading...,可以自己点击一下
class loadingbutton extends react.component{ constructor(props) { super(props); this.handleclick = this.handleclick.bind(this); this.state = { isloading: false } } handleclick() { this.setstate({isloading: true}); // this probably where you would have an `ajax` call settimeout(() => { // completed of async action, set loading state back this.setstate({isloading: false}); }, 2000); } render() { let isloading = this.state.isloading; return ( <button bsstyle="primary" disabled={isloading} onclick={!isloading ? this.handleclick : null}> {isloading ? 'loading...' : 'loading state'} </button> ); } }
实现按钮的下拉和上拉:
在title中使用dropdown属性,用dropdownbutton包裹下拉,使用dropup为上拉
//下拉 <buttongroup> <button>1</button> <button>2</button> <dropdownbutton title="dropdown" id="bg-nested-dropdown"> <menuitem eventkey="1">dropdown link</menuitem> <menuitem eventkey="2">dropdown link</menuitem> </dropdownbutton> </buttongroup> //上拉 <buttontoolbar> <splitbutton title="dropup" dropup id="split-button-dropup"> <menuitem eventkey="1">action</menuitem> <menuitem eventkey="2">another action</menuitem> <menuitem eventkey="3">something else here</menuitem> <menuitem divider /> <menuitem eventkey="4">separated link</menuitem> </splitbutton> </buttontoolbar>
二、list
简单列表:
<listgroup> <listgroupitem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" active>link 1</listgroupitem> <listgroupitem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link 2</listgroupitem> <listgroupitem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" disabled>link 3</listgroupitem> </listgroup>
使用listgroup包裹, listgroupitem就是它的子元素
- active:已选中
- disable:可以取消它的点击事件
表格:
<table striped bordered condensed hover> <thead> <tr> <th>#</th> <th>first name</th> <th>last name</th> <th>username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>mark</td> <td>otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>jacob</td> <td>thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">larry the bird</td> <td>@twitter</td> </tr> </tbody> </table>
可以点击隐藏的面板:
class collapsiblepanel extends react.component { constructor(props) { super(props); this.state = { open: true }; } render() { return ( <div> <button onclick={ ()=> this.setstate({ open: !this.state.open })}> 点我隐藏/显示 </button> <panel collapsible expanded={this.state.open}> anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </panel> </div> ); } }
三、overlays
点击弹出的窗口:
class staticmarkup extends react.component { constructor(props) { super(props); this.state = {dpname:false}; this.ondisplayoverlays = this.ondisplayoverlays.bind(this); this.oncloseoverlays = this.oncloseoverlays.bind(this); } ondisplayoverlays() { this.setstate({ dpname:true }); } oncloseoverlays() { this.setstate({ dpname:false }); } render() { if(this.state.dpname) return ( <div> <button bsstyle="primary" onclick={this.ondisplayoverlays}> 弹出框 </button> <div classname="static-modal" id="static_modal"> <modal.dialog> <modal.header> <modal.title>modal title</modal.title> </modal.header> <modal.body> one fine body... </modal.body> <modal.footer> <button onclick={this.oncloseoverlays}>close</button> <button bsstyle="primary">save changes</button> </modal.footer> </modal.dialog> </div> </div> ); else return ( <div> <button bsstyle="primary" onclick={this.ondisplayoverlays}> 弹出框 </button> </div> ); } }
以及点击显示、隐藏的overload
class customoverlays extends react.component{ constructor(props) { super(props); this.state = {show: true}; this.toggle = this.toggle.bind(this); } toggle() { this.setstate({ show: !this.state.show }); } render() { const sharedprops = { show: this.state.show, container: this, target: () => reactdom.finddomnode(this.refs.target) }; return ( <div style={{ height: 100, paddingleft: 150, position: 'relative' }}> <button ref="target" onclick={this.toggle}> click me! </button> <overlay {...sharedprops} placement="left"> <tooltip id="overload-left">tooltip overload!</tooltip> </overlay> <overlay {...sharedprops} placement="top"> <tooltip id="overload-top">tooltip overload!</tooltip> </overlay> <overlay {...sharedprops} placement="right"> <tooltip id="overload-right">tooltip overload!</tooltip> </overlay> <overlay {...sharedprops} placement="bottom"> <tooltip id="overload-bottom">tooltip overload!</tooltip> </overlay> </div> ); } }
四、轮播
class carouselinstance extends react.component { constructor(props) { super(props); } render() { return ( <carousel> <carousel.item> <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/> <carousel.caption> <h3>first slide label</h3> <p>nulla vitae elit libero, a pharetra augue mollis interdum.</p> </carousel.caption> </carousel.item> <carousel.item> <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/> <carousel.caption> <h3>second slide label</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </carousel.caption> </carousel.item> <carousel.item> <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/> <carousel.caption> <h3>third slide label</h3> <p>praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </carousel.caption> </carousel.item> </carousel> ); } }
五、一些有用的图标
class miscellaneousinstance extends react.component { constructor(props) { super(props); } render() { return ( <div> <div> <buttontoolbar> <buttongroup> <button><glyphicon glyph="align-left" /></button> <button><glyphicon glyph="align-center" /></button> <button><glyphicon glyph="align-right" /></button> <button><glyphicon glyph="align-justify" /></button> </buttongroup> </buttontoolbar> <buttontoolbar> <buttongroup> <button bssize="large"><glyphicon glyph="star" /> star</button> <button><glyphicon glyph="star" /> star</button> <button bssize="small"><glyphicon glyph="star" /> star</button> <button bssize="xsmall"><glyphicon glyph="star" /> star</button> </buttongroup> </buttontoolbar> </div> <div> <h1>label <label>new</label></h1> <h2>label <label>new</label></h2> <h3>label <label>new</label></h3> <h4>label <label>new</label></h4> <h5>label <label>new</label></h5> <p>label <label>new</label></p> </div> </div> ); } }
六、表单
表单基础的类函数为:
function fieldgroup({ id, label, help, props }) { return ( <formgroup controlid={id}> <controllabel>{label}</controllabel> <formcontrol {...props} /> {help && <helpblock>{help}</helpblock>} </formgroup> ); }
然后使用fieldgroup包裹:
<fieldgroup id="formcontrolstext" type="text" label="text" placeholder="enter text" />
便可以轻松实现表单!如果你对react有了解,便知道原生的表单是不能直接用的。这个组件简化了许多,但我没用实际用过,所以不知道效果如何。
我写的这些只是抛砖引玉,只是希望大家稍微了解到react-bootstrap大概能做的事
更详细的方法和属性请进入官方网址浏览文档,打开源代码自行研究
有些官方demo没有给完全,可以运行前面的我给的demo,再查看源代码理解(不过我也没有写全,而且结构比较乱)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: jQuery实现菜单栏导航效果