Question

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

Contacts

创建一个带图片的联系人信息块。

<div class="chip">
    <img src="https://www.wenjiangs.com/wp-content/uploads/2020/docimg2/yuna.jpg" alt="Contact Person">
    李四
  </div>

Tags

创建一个带关闭图标的信息块标签，只要增增加一个 close 类到里面。

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

JavaScript 插件的用法

为了增加标签，只要输入你的标签文本并按回车键就可以了，点击关闭按钮进行删除。

设置初始化标签。

使用占位符并重写提示文本。

标记

<div class="chips"></div>
  <div class="chips chips-initial"></div>
  <div class="chips chips-placeholder"></div>

jQuery 初始化

$('.chips').material_chip();
  $('.chips-initial').material_chip({
    data: [{
tag: '小米',
    }, {
tag: '中兴',
    }, {
tag: '华为',
    }],
  });
  $('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
  })

信息块数据对象

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

jQuery 插件选项

选项名称	类型	描述
数据（data）	数组（array）	设置信息块数据(看信息块数据对象)
占位符（placeholder）	字符型（string）	设置第一个占位符，当没有标签时。
第二占位符（secondaryPlaceholder）	字符型（string）	设置第二占位符当增加其他标签时。

事件

信息块有少量的事件来实现它的功能。

事件	描述
chips.add	在信息块增加后触发这个事件。
chips.delete	在信息块删除后触发这个事件。
chips.select	在信息块选中后触发这个事件。

  $('.chips').on('chip.add', function(e, chip){
    // you have the added chip here
  });

  $('.chips').on('chip.delete', function(e, chip){
    // you have the deleted chip here
  });

  $('.chips').on('chip.select', function(e, chip){
    // you have the selected chip here
  });
  

方法

通过这个方法设置信息块数据。

参数	描述
data	返回设置的数据。

$('.chips-initial').material_chip('data');