HTML core custom elements
##Dependencies
- React.js (0.14.7)
- 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
import { PropTypes } from 'react';
import { view } from 'xblocks-core';
import classnames from 'classnames';
// define jsx view
view.register('xb-ico', {
displayName: 'xb-ico',
propTypes: {
'size': PropTypes.oneOf([ 's', 'm', 'l', 'xl' ]),
'type': PropTypes.oneOf([ 'remove', 'notification', 'check', 'dropdown' ]),
'active': PropTypes.bool,
'disabled': 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
import { create } from 'xblocks-core';
create('xb-ico');<!-- element usage -->
<xb-ico type="notification">8</xb-ico>##Install
npm install xblocks-core
bower install xblocks-core
