react-panels
Version:
React.js panel widget with support for dynamic tabs, toolbars, buttons, floating windows and customizable themes
66 lines (59 loc) • 1.76 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>react-panels: custom buttons</title>
<link rel="stylesheet" href="../dist/react-panels.css" type="text/css" />
<link rel="stylesheet" href="thirdparty/css/font-awesome.min.css" type="text/css" />
<style>
html {
margin: 0;
padding: 0;
}
body {
padding: 20px;
background-color: #F2F2F2;
font-family: Verdana, "Lucida Grande", sans-serif;
min-width: 300px;
width: 50%;
}
</style>
<script src="thirdparty/js/react.js"></script>
<script src="thirdparty/js/JSXTransformer.js"></script>
<script src="../dist/react-panels.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<Panel
title="Panel Title"
icon="fa fa-cube"
buttons={[
<CustomPanelButton
title="Another beer!"
preset={{
"identifier": "beer",
"icon": "fa fa-beer",
"onClick": function (event, button) {
event.preventDefault();
button.props.parent.numBeers = (button.props.parent.numBeers || 1) + 1;
button.props.parent.setProps({"title": "I want " + button.props.parent.numBeers + " beers!"});
}
}}
/>,
{"collapse": {
"title": "Minimize/Maximize"
}},
"close"
]}>
<PanelContent>
<div>Panel content here</div>
</PanelContent>
</Panel>,
document.getElementById('example')
);
</script>
</body>
</html>