菜单

芯片可用于表示小块信息。它们最常用于联系人或标签。

联系人 Jane Doe
标签 close

联系人

要创建联系人芯片，只需在里面添加一张图片即可。


  <div class="chip">
    <img src="images/yuna.jpg" alt="Contact Person">
    Jane Doe
  </div>

标签

要创建标签芯片，只需在里面添加一个关闭图标，其类为 close。


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

Javascript 插件

要添加标签，只需输入标签文本并按回车键。您可以通过单击关闭图标或使用删除按钮来删除它们。


设置初始标签。


使用占位符并覆盖提示文本。


将自动完成与芯片一起使用。


  <!-- Default with no input (automatically generated)  -->
  <div class="chips"></div>
  <div class="chips chips-initial"></div>
  <div class="chips chips-placeholder"></div>
  <div class="chips chips-autocomplete"></div>

  <!-- Customizable input  -->
  <div class="chips">
    <input class="custom-class">
  </div>

初始化


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

  // Or with jQuery

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

芯片数据对象


  var chip = {
    tag: 'chip content',
    image: '', //optional
  };

选项

名称 类型 默认值 描述
data 数组 [] 设置芯片数据（查看芯片数据对象）
placeholder 字符串 '' 当没有标签时设置第一个占位符。
secondaryPlaceholder 字符串 '' 设置添加其他标签时的第二个占位符。
autocompleteOptions 对象 {} 设置自动完成选项。
limit 整数 无穷大 设置芯片限制。
onChipAdd 函数 null 芯片添加回调。
onChipSelect 函数 null 芯片选择回调。
onChipDelete 函数 null 芯片删除回调。

方法

使用这些方法与芯片交互。

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。您可以这样获取插件实例


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

    /* jQuery Method Calls
      You can still use the old jQuery plugin method calls.
      But you won't be able to access instance properties.

      $('.chips').chips('methodName');
      $('.chips').chips('methodName', paramName);
    */
.addChip();

将芯片添加到输入中。

参数

芯片：芯片数据对象。


  instance.addChip({
    tag: 'chip content',
    image: '', // optional
  });

.deleteChip();

删除第 n 个芯片。

参数

整数：芯片的索引。


  instance.deleteChip(3); // Delete 3rd chip.

.selectChip();

选择第 n 个芯片。

参数

整数：芯片的索引。


  instance.selectChip(2); // Select 2nd chip

属性

名称 类型 描述
el 元素 插件初始化时使用的 DOM 元素。
options 对象 实例初始化时使用的选项。
chipsData 数组 当前芯片数据的数组。
hasAutocomplete 布尔值 如果芯片启用了自动完成。
autocomplete 对象 自动完成实例（如果有）。