Example
import React from 'react';
class Panel extends React.Component {
constructor(props) {
super(props);
}
render(...elements) {
var props = Object.assign({
className: this.props.active ? 'active' : '',
tabIndex: -1
}, this.props);
var css = this.css();
if (css != '') {
elements.unshift(React.createElement(
'style', null,
css
));
}
return React.createElement(
'div', props,
...elements
);
}
static title() {
return '';
}
static css() {
return '';
}
}
Major differences from simple pane are:
- panel has focus in instance when it is called by script or clicked by mouse;
- panel has
titlestatic method per component, so it may be extended by other panel component with overriddentitle(reason here is that function can be then called again on rendering for localization purposes, but in bounds of this exampletitledoesn't make sense); - it can contain individual stylesheet declared in
cssstatic method (you can pre-load file contents fromPANEL.css).
