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"> <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>Tooltip overload!</Tooltip> </Overlay> <Overlay {...sharedProps} placement="top"> <Tooltip>Tooltip overload!</Tooltip> </Overlay> <Overlay {...sharedProps} placement="right"> <Tooltip>Tooltip overload!</Tooltip> </Overlay> <Overlay {...sharedProps} placement="bottom"> <Tooltip>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="https://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="https://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="https://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> ); } }
五、一些有用的图标