react-bootstrap
Version:
Bootstrap 3 components build with React
75 lines (67 loc) • 2.92 kB
HTML
<html>
<head>
<link rel="stylesheet" href="./vendor/bootstrap.min.css">
<link rel="stylesheet" href="./vendor/bootstrap-theme.min.css">
<script src="./vendor/react-0.9.0.js"></script>
<script src="./vendor/JSXTransformer-0.9.0.js"></script>
<script src="../dist/react-bootstrap.js"></script>
</head>
<body>
<script type="text/jsx">
/** @jsx React.DOM */
var Panel = ReactBootstrap.Panel,
Accordion = ReactBootstrap.Accordion,
PanelGroup = ReactBootstrap.PanelGroup,
DropdownButton = ReactBootstrap.DropdownButton,
SplitButton = ReactBootstrap.SplitButton,
MenuItem = ReactBootstrap.MenuItem,
Modal = ReactBootstrap.Modal,
OverlayTrigger = ReactBootstrap.OverlayTrigger,
isOpen = true,
handleSelect = function () {
isOpen = !isOpen;
render();
},
handleDropdownSelect = function (key) {
console.info(key);
},
modalInstance = (
<Modal title="Title" animation={false}>
<div className="modal-body">
Content
</div>
<div className="modal-footer">
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</Modal>
),
render = function () {
var header = 'header'; //React.DOM.h1({}, 'Header');
React.renderComponent(
<div>
<DropdownButton title="Dropdown" onSelect={handleDropdownSelect}>
<MenuItem key="0" bsVariation="header">Header</MenuItem>
<MenuItem key="1">Item 1</MenuItem>
<MenuItem key="2" bsVariation="divider"/>
</DropdownButton>
<SplitButton title="Split" onSelect={handleDropdownSelect}>
<MenuItem key="0" bsVariation="header">Header</MenuItem>
<MenuItem key="1">Item 1</MenuItem>
<MenuItem key="2" bsVariation="divider"/>
</SplitButton>
<Accordion bsStyle="default" initialActiveKey="1">
<Panel header='header1' key="1">Content1</Panel>
<Panel header='header2' key="2">Content2</Panel>
</Accordion>
<OverlayTrigger overlay={modalInstance} animation={true}>
<a href="#">Open modal</a>
</OverlayTrigger>
</div>,
document.body
);
};
render();
</script>
</body>
</html>