How to use @rmwc/chip - 10 common examples
To help you get started, we’ve selected a few @rmwc/chip examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
fluidtrends / chunky / web / lib / components / Timer.js View on Github 
_react2.default.createElement(
_chip.Chip,
{ style: style },
_react2.default.createElement(
_typography.Typography,
{ use: size, style: typographyStyle },
_react2.default.createElement(
_chip.ChipText,
{ style: { color: '#4ebcd4' } },
hours,
'h'
)
)
),
_react2.default.createElement(
_chip.Chip,
{ style: style },
_react2.default.createElement(
_typography.Typography,
{ use: size, style: typographyStyle },
_react2.default.createElement(
_chip.ChipText,
{ style: { color: '#4ebcd4' } },
minutes,
'm'
)
)
),
_react2.default.createElement(
_chip.Chip,
{ style: style },
_react2.default.createElement({
use: 'subheading1',
tag: 'h3',
theme: 'text-secondary-on-background',
style: { marginTop: '1rem' } },
details,
'...'
),
_react2.default.createElement(
'div',
{ style: { display: 'flex', alignItems: 'center' } },
_react2.default.createElement(
_chip.ChipSet,
{ style: { flex: 2 } },
_react2.default.createElement(
_chip.Chip,
{ style: { background: colors[item.category], color: 'white' } },
_react2.default.createElement(
_chip.ChipText,
null,
_react2.default.createElement(
_typography.Typography,
{
use: 'caption'
},
item.category
)
)
),
_react2.default.createElement(
_chip.Chip,
{ style: { background: '#90A4AE', color: 'white' } },var typographyStyle = { margin: margin + 'px', color: '#fff' };
var style = {
border: '2px solid #4ebcd4',
backgroundColor: '#fff',
color: "#4ebcd4",
padding: 2,
width: width,
height: 40
};
return _react2.default.createElement(
_chip.ChipSet,
null,
_react2.default.createElement(
_chip.Chip,
{ style: style },
_react2.default.createElement(
_typography.Typography,
{ use: size, style: typographyStyle },
_react2.default.createElement(
_chip.ChipText,
{ style: { marginLeft: 5, color: '#4ebcd4' } },
days,
'd'
)
)
),
_react2.default.createElement(
_chip.Chip,
{ style: style },
_react2.default.createElement(value: function renderCardTag(tag) {
return _react2.default.createElement(
_chip.Chip,
{ style: { background: 'red', color: 'white' } },
_react2.default.createElement(
_chip.ChipText,
null,
_react2.default.createElement(
_typography.Typography,
{
use: 'caption' },
'sdfasd'
)
)
);
}
}, {value: function renderCardTag(tag) {
return _react2.default.createElement(
_chip.Chip,
{ style: { background: 'red', color: 'white' } },
_react2.default.createElement(
_chip.ChipText,
null,
_react2.default.createElement(
_typography.Typography,
{
use: 'caption' },
'sdfasd'
)
)
);
}
}, {_react2.default.createElement(
_chip.ChipText,
{ style: { color: '#4ebcd4' } },
minutes,
'm'
)
)
),
_react2.default.createElement(
_chip.Chip,
{ style: style },
_react2.default.createElement(
_typography.Typography,
{ use: size, style: typographyStyle },
_react2.default.createElement(
_chip.ChipText,
{ style: { color: '#4ebcd4' } },
seconds,
's'
)
)
)
);
}
}, {_chip.ChipText,
null,
_react2.default.createElement(
_typography.Typography,
{
use: 'caption'
},
item.category
)
)
),
_react2.default.createElement(
_chip.Chip,
{ style: { background: '#90A4AE', color: 'white' } },
_react2.default.createElement(
_chip.ChipText,
null,
_react2.default.createElement(
_typography.Typography,
{
use: 'caption'
},
item.label
)
)
)
),
_react2.default.createElement(
_fab.Fab,
{ mini: true },
'star'
),padding: 2,
width: width,
height: 40
};
return _react2.default.createElement(
_chip.ChipSet,
null,
_react2.default.createElement(
_chip.Chip,
{ style: style },
_react2.default.createElement(
_typography.Typography,
{ use: size, style: typographyStyle },
_react2.default.createElement(
_chip.ChipText,
{ style: { marginLeft: 5, color: '#4ebcd4' } },
days,
'd'
)
)
),
_react2.default.createElement(
_chip.Chip,
{ style: style },
_react2.default.createElement(
_typography.Typography,
{ use: size, style: typographyStyle },
_react2.default.createElement(
_chip.ChipText,
{ style: { color: '#4ebcd4' } },
hours,value: function renderCardTags(item) {
var _this2 = this;
if (!item.tags) {
return _react2.default.createElement('div', null);
}
return _react2.default.createElement(
'div',
{ style: { display: 'flex', alignItems: 'center' } },
_react2.default.createElement(
_chip.ChipSet,
{ style: { flex: 2 } },
item.tags.map(function (t) {
return _this2.renderCardTag(t);
})
)
);
}
}, {var margin = this.props.isSmallScreen ? '5' : '20';
var width = this.props.isSmallScreen ? '30' : '50';
var height = this.props.isSmallScreen ? '140' : '50';
var typographyStyle = { margin: margin + 'px', color: '#fff' };
var style = {
border: '2px solid #4ebcd4',
backgroundColor: '#fff',
color: "#4ebcd4",
padding: 2,
width: width,
height: 40
};
return _react2.default.createElement(
_chip.ChipSet,
null,
_react2.default.createElement(
_chip.Chip,
{ style: style },
_react2.default.createElement(
_typography.Typography,
{ use: size, style: typographyStyle },
_react2.default.createElement(
_chip.ChipText,
{ style: { marginLeft: 5, color: '#4ebcd4' } },
days,
'd'
)
)
),
_react2.default.createElement(
