HTML core custom elements
##Dependencies
- React.js (0.14.6)
- X-Tag core (custom build xtag.js or 1.5.6)
- es5-shim (4.5.2)
##Browser support
- Firefox 14+
- Internet Explorer 9+
- Chrome 4+
- Safari 4+
- Opera 12+
##Example
var xblocks = require('xblocks');
var classnames = require('classnames');
// define jsx view
xblocks.view.register('xb-ico', {
displayName: 'xb-ico',
propTypes: {
'id': React.PropTypes.string,
'class': React.PropTypes.string,
'alt': React.PropTypes.string,
'size': React.PropTypes.oneOf(['s', 'm', 'l', 'xl']),
'type': React.PropTypes.oneOf(['remove', 'notification', 'check', 'dropdown']),
'active': React.PropTypes.bool,
'disabled': React.PropTypes.bool
},
getDefaultProps: function() {
return {
'size': 'm',
'children': String.fromCharCode(160)
};
},
render: function() {
var classes = {
'xb-ico': true,
'_active': this.props.active,
'_disabled': this.props.disabled
};
if (this.props.type) {
classes['_type-' + this.props.type] = true;
}
if (this.props.size) {
classes['_size-' + this.props.size] = true;
}
classes = classnames(classes);
return (
<span className={classes}
data-xb-content={this.props._uid}>{this.props.children}</span>
);
}
});// define element
xblocks.create('xb-ico');<!-- element usage -->
<xb-ico type="notification">8</xb-ico>##Install
npm install xblocks-core
bower install xblocks-core
