xblocks-core v3.0.0
HTML core custom elements
Documentation
Dependencies
Browser support
- Firefox 14+
- Internet Explorer 9+
- Chrome 4+
- Safari 4+
- Opera 12+
Example ES6
import React from 'react';
import { element } from 'xblocks-core';
@element('xb-element')
class XBElement extends React.Component {
render() {
return (
<div title={this.props.title}>{this.context.content()}</div>
);
}
}
XBElement.propTypes = {
title: React.PropTypes.string
};
Example
<!-- element usage -->
<xb-ico type="notification">8</xb-ico>
// define element
import { create } from 'xblocks-core';
create('xb-ico');
// define view
import { PropTypes } from 'react';
import { view } from 'xblocks-core';
import classnames from 'classnames';
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() {
const classes = classnames({
'xb-ico': true,
'_active': this.props.active,
'_disabled': this.props.disabled,
[ `_type-${this.props.type}` ]: Boolean(this.props.type),
[ `_size-${this.props.size}` ]: Boolean(this.props.size)
});
return (
<span className={classes}>{this.context.content()}</span>
);
}
});
Install
npm install xblocks-core
bower install xblocks-core
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago