react-panels
Version:
React.js panel widget with support for dynamic tabs, toolbars, buttons, floating windows and customizable themes
276 lines (264 loc) • 9.31 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>react-panels: compact</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-image: url("thirdparty/images/bg_blue.jpg");
font-family: Verdana, "Lucida Grande", sans-serif;
font-size: 13px;
min-width: 620px;
width: 50%;
color: #333;
}
.input-example {
padding: 5px 10px;
font-family: Verdana, "Lucida Grande", sans-serif;
min-height: 32px;
border: 0 none;
width: 100%;
color: rgba(255, 255, 255, 0.8);
background-color: rgba(0, 0, 0, 0.2);
}
.clearfix:after {
content:"";
display:table;
clear:both;
}
</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>
<br />
<br />
<div style="width: 65%; float: left;">
<div id="example2"></div>
</div>
<div style="margin-left: 65%; padding-left: 25px;">
<div id="example3"></div>
</div>
<script type="text/jsx">
var preset = {
"theme": "grayscale",
"rounded": "top",
"getTitleFromActiveTab": true,
"displayTabTitles": false
};
React.render(
<Panel
preset={preset}
icon="fa fa-comments"
title="Panel Title: "
buttons={['toggleToolbar', 'collapse', 'fullscreen', 'close']}>
<PanelContent
icon="fa fa-area-chart"
title="Tab 0"
toolbarState="visible"
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Tab 0</strong>
<ul>
<li>
Toolbar state is <strong>visible</strong> by default, which can be toggled
using the <strong>toggleToolbar</strong> button
</li>
</ul>
</div>
</PanelContent>
<PanelContent
icon="fa fa-pie-chart"
title="Tab 1"
toolbarState="hidden"
noPadding={true}
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Tab 1</strong>
<ul>
<li><strong>noPadding</strong> is enabled</li>
<li>
Toolbar state is <strong>hidden</strong> by default, which can be toggled
using the <strong>toggleToolbar</strong> button
</li>
</ul>
<div className="clearfix"></div>
</div>
</PanelContent>
<PanelContent
active={true}
icon="fa fa-line-chart"
title="Tab 2"
toolbarState="locked"
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Tab 2</strong>
<ul>
<li>Selected by default (active)</li>
<li>Toolbar state is <strong>locked</strong> (Always visible)</li>
</ul>
</div>
</PanelContent>
<PanelContent
icon="fa fa-bar-chart"
title="Tab 3"
toolbarState="none"
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Tab 3</strong>
<ul>
<li>
Toolbar state is <strong>none</strong>. This means that it will always be <strong>hidden</strong>.
</li>
</ul>
</div>
</PanelContent>
</Panel>,
document.getElementById('example')
);
React.render(
<Panel preset={preset}>
<PanelContent
icon="fa fa-area-chart"
title="Tab 0"
toolbarState="hidden"
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Content of: Tab 0</strong>
<ul>
<li>
Toolbar state is <strong>hidden</strong> by default, which can be toggled
using the <strong>toggleToolbar</strong> button
</li>
</ul>
</div>
</PanelContent>
<PanelContent
icon="fa fa-pie-chart"
title="Tab 1"
toolbarState="hidden"
noPadding={true}
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Content of: Tab 1</strong>
<ul>
<li><strong>noPadding</strong> is enabled</li>
<li>
Toolbar state is <strong>hidden</strong> by default, which can be toggled
using the <strong>toggleToolbar</strong> button
</li>
</ul>
<div className="clearfix"></div>
</div>
</PanelContent>
<PanelContent
icon="fa fa-line-chart"
title="Tab 2"
toolbarState="locked"
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Content of: Tab 2</strong>
<ul>
<li>Selected by default (active)</li>
<li>Toolbar state is <strong>locked</strong> (Always visible)</li>
</ul>
</div>
</PanelContent>
<PanelContent
icon="fa fa-bar-chart"
title="Tab 3"
toolbarState="none"
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Content of: Tab 3</strong>
<ul>
<li>
Toolbar state is <strong>none</strong>. This means that it will always be <strong>hidden</strong>.
</li>
</ul>
</div>
</PanelContent>
</Panel>,
document.getElementById('example2')
);
React.render(
<Panel
preset={preset}
getTitleFromActiveTab={false}>
<PanelContent
icon="fa fa-area-chart"
title="Tab 0"
toolbarState="hidden"
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Content of: Tab 0</strong>
<ul>
<li>
Toolbar state is <strong>hidden</strong> by default, which can be toggled
using the <strong>toggleToolbar</strong> button
</li>
</ul>
</div>
</PanelContent>
<PanelContent
icon="fa fa-pie-chart"
title="Tab 1"
toolbarState="hidden"
noPadding={true}
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Content of: Tab 1</strong>
<ul>
<li><strong>noPadding</strong> is enabled</li>
<li>
Toolbar state is <strong>hidden</strong> by default, which can be toggled
using the <strong>toggleToolbar</strong> button
</li>
</ul>
<div className="clearfix"></div>
</div>
</PanelContent>
<PanelContent
active={true}
icon="fa fa-line-chart"
title="Tab 2"
toolbarState="locked"
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Content of: Tab 2</strong>
<ul>
<li>Selected by default (active)</li>
<li>Toolbar state is <strong>locked</strong> (Always visible)</li>
</ul>
</div>
</PanelContent>
<PanelContent
icon="fa fa-bar-chart"
title="Tab 3"
toolbarState="none"
toolbar={(<span><input type="text" placeholder="Example text input in toolbar" className="input-example" /></span>)}>
<div>
<strong>Content of: Tab 3</strong>
<ul>
<li>
Toolbar state is <strong>none</strong>. This means that it will always be <strong>hidden</strong>.
</li>
</ul>
</div>
</PanelContent>
</Panel>,
document.getElementById('example3')
);
</script>
</body>
</html>