下記のガイドライン

Chips - Components - Google design guidelines

に則って Riot.js で汎用的に使える Chips を作ってみました.

Demo

一通りの chip に対応してみました. インプットボックスに値を入力して Enter を押すと chip が追加されます.

Code

Chip タグの定義部分です. Jade で書いてます.

chip(class='{has-icon: opts.icon, deletable:opts.deletable}')  
  div.chips-icon(if='{opts.icon}')
    span(if='{opts.icon === true}', style='background-color: {iconColor};') {value.substr(0, 1)}
    img(if='{opts.icon !== true}', src='{opts.icon}')
  a(href='') {opts.value}
  div.delete-icon(onclick='{_del}')
    i.material-icons clear

  style(scoped, type='less').
    :scope {
      display: inline-block;
      background-color: hsl(0, 0%, 87%);
      padding: 0px 8px;
      height: 32px;
      line-height: 32px;
      border-radius: 16px;

      a {
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
        color: inherit;
        padding: 0px 4px;
      }

      .chips-icon {
        display: inline-block;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        margin-right: 4px;
        img, span {
          border-radius: 50%;
          width: 100%;
          height: 100%;
          display: block;
        }
        span {
          background-color: black;
          color: white;
          text-align: center;
        }
      }

      .delete-icon {
        transition: 250ms;
        display: none;
        vertical-align: middle;
        width: 24px;
        height: 24px;
        padding: 4px;
        border-box: border-box;
        cursor: pointer;
        i {
          display: flex;
          height: 100%;
          item-aligns: streach;
          background-color: rgba(0, 0, 0, 0.54);
          border-radius: 50%;
          font-size: 11px;
          font-weight: bold;
          align-items: center;
          justify-content: center;
          color: #dfdfdf;
        }
      }

      &.has-icon {
        padding-left: 0px;
      }
      &.deletable {
        padding-right: 4px;
        a {
          padding-right: 0px;
        }

        .delete-icon {
          display: inline-block;
        }
      }

      &:hover {
        transition: 250ms;
        background-color: #757476;
        color: white;

        .delete-icon {
          i {
            background-color: white;
            color: #757476;
          }
        }
      }
    }
  script.
    this.value = opts.value;
    this.iconColor = opts.iconColor || ('hsl(' + opts.value.charCodeAt(0)*10 + ', 80%, 50%)');

    this._del = function(e) {
      opts.ondelete(e);
    };

Usage

実際に Chip タグを使う方法です.

//- 通常の chip
chip(value='Example Chip')  
//- 削除ボタンの付いた chip
chip(value='deletable', deletable='{true}', ondelete='{del}')  
//- アイコンの付いた chip
chip(value='icon', icon='{true}')  
//- 画像アイコンのついた chip
chip(value='usericon', icon='{"http://phi-jp.github.io/phiary-workspace/assets/images/kenkyo.jpg"}')  

Reference

• Chips - Components - Google design guidelines
• Chips - Materialize