chips可以用来表示信息的小块。它们最常用于联系人或标签。

联系人

创建联系人标签只需要在里面加入img。

  <div class="chip">
    <img src="images/yuna.jpg" alt="联系人">
    张三
  </div>
        

标签

创建标签只需要添加一个关闭图表在里面并带上类 close。

  <div class="chip">
    标签
    <i class="close material-icons">close</i>
  </div>
        

Javascript插件

添加标签，只需要输入你的标签文本并按enter键。你可以删除它们通过点击关闭图标或按delete键。

设置初始标签

使用placeholders并覆盖提示文本。

使用带标签的自动完成。

  <!-- 默认不带输入 (自动生成)  -->
  <div class="chips"></div>
  <div class="chips chips-initial"></div>
  <div class="chips chips-placeholder"></div>
  <div class="chips chips-autocomplete"></div>

  <!-- 自定义输入  -->
  <div class="chips">
    <input class="custom-class">
  </div>
        

初始化

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.chips');
    var instances = M.Chips.init(elems, options);
  });

  // 或用JQuery

  $('.chips').chips();
  $('.chips-initial').chips({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });
  $('.chips-placeholder').chips({
    placeholder: '输入标签',
    secondaryPlaceholder: '+标签',
  });
  $('.chips-autocomplete').chips({
    autocompleteOptions: {
      data: {
        'Apple': null,
        'Microsoft': null,
        'Google': null
      },
      limit: Infinity,
      minLength: 1
    }
  });
        

Chip数据对象

  var chip = {
    tag: 'chip内容',
    image: '', //可选
  };
        

选项

名称	类型	默认	描述
data	Array	[]	设置标签数据 (看Chip数据对象)
placeholder	String	''	当没有标签时设置第一个占位符（提示语）。
secondaryPlaceholder	String	''	添加其他标记时设置第二个占位符（提示语）。
autocompleteOptions	Object	{}	设置自动完成选项
limit	Integer	Infinity	设置标签数量限制
onChipAdd	Function	null	添加标签时的回调
onChipSelect	Function	null	选择标签时的回调
onChipDelete	Function	null	删除标签时的回调

方法

使用这些方法与标签进行交互。

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：

    var instance = M.Chips.getInstance(elem);

    /* JQuery方法调用
      您仍然可以使用旧的jQuery插件方法调用。
但您将无法访问实例属性。

      $('.chips').chips('方法名称');
      $('.chips').chips('方法名称', 参数名称);
    */
          

.addChip();

输入要添加的标签

参数

Chip: Chip数据对象

  instance.addChip({
    tag: 'chip内容',
    image: '', // 可选
  });
        

.deleteChip();

删除指定索引标签。

参数

Integer: 标签的索引

  instance.deleteChip(3); //删除第三个标签
        

.selectChip();

选择指定索引标签

参数

Integer: 标签的索引

  instance.selectChip(2); // 选择第二个标签
        

属性

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
chipsData	Array	当前标签数据的数组。.
hasAutocomplete	Boolean	标签是否开启自动完成
autocomplete	Object	自动完成 实例，如果有。