README
react-panel
A Panel component written in React.
Click here for the demo or see index.html for usage.
Development
- npm install -g live-server
- npm install
- hack away
How to use
var Panel =require("react-panel");
var panel1 = Panel.render({ contentStr:document.getElementById("content1").innerHTML, title: "Panel Demo 1"},"panel1");
var panel2 = Panel.render({ contentStr:document.getElementById("content2").innerHTML, title: "Enter Some Form Values"},"panel2");
var toolboxActions = [
{ title: "Reload", className: "fa fa-refresh", "data-action-name" : "reload" },
{ title: "Hide", className: "fa fa-chevron-down", "data-action-name" : "hide" }
];
var actionListener = function(e) {
alert("on click: " + e.target.getAttribute("data-action-name"));
};
var panel3 = Panel.render({ titleIcon: "fa fa-bar-chart", clickListener:actionListener, toolbox: toolboxActions,
contentStr:document.getElementById("content1").innerHTML, title:
"Panel Toolbox Demo"},"panel3");
panel3.on("click","a > .fa-refresh",function() {
alert("refresh");
});
panel3.on("click","a > .fa-chevron-down",function() {
alert("hide");
});
//Render a react component as body
React.render(
<Panel.cls title="React Component Body Example">
<div style={{'fontWeight': 'bold' }}>This is a react component.</div>
</Panel.cls>,
document.getElementById("panel4")
)
Changelog
0.0.4
- Body can now be composed using <Panel.cls>