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.

github fluidtrends / chunky / web / lib / components / Timer.js View on Github external
_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(
github fluidtrends / chunky / web / lib / components / Collection.js View on Github external
{
              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' } },
github fluidtrends / chunky / web / lib / components / Timer.js View on Github external
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(
github fluidtrends / chunky / web / lib / components / Collection.js View on Github external
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'
          )
        )
      );
    }
  }, {
github fluidtrends / chunky / web / lib / components / Collection.js View on Github external
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'
          )
        )
      );
    }
  }, {
github fluidtrends / chunky / web / lib / components / Timer.js View on Github external
_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'
            )
          )
        )
      );
    }
  }, {
github fluidtrends / chunky / web / lib / components / Collection.js View on Github external
_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'
            ),
github fluidtrends / chunky / web / lib / components / Timer.js View on Github external
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,
github fluidtrends / chunky / web / lib / components / Collection.js View on Github external
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);
          })
        )
      );
    }
  }, {
github fluidtrends / chunky / web / lib / components / Timer.js View on Github external
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(

@rmwc/chip

RMWC Chip component

MIT
Latest version published 5 days ago

Package Health Score

84 / 100
Full package analysis