信息块

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

Contacts

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

<div class="chip">
    <img src="https://www.xnip.cn/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 插件选项

事件

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

  $('.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
  });
  

方法

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

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