チップ - マテリアライズ

チップは、少量の情報を表示するために使用できます。通常は、連絡先やタグに使用されます。

ジェーンドウ

タグ

連絡先チップを作成するには、その中に画像を追加するだけです。


  <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>

タグを追加するには、タグテキストを入力して Enter キーを押します。閉じるアイコンをクリックするか、削除ボタンを使用してタグを削除できます。

初期タグを設定します。

プレースホルダーを使用し、ヒントテキストをオーバーライドします。

チップとともにオートコンプリートを使用します。


  <!-- 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	文字列	''	追加のタグを追加する場合に 2 番目のプレースホルダーを設定します。
autocompleteOptions	オブジェクト	{}	オートコンプリートオプションを設定します。
limit	整数	Infinity	チップの制限を設定します。
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	オブジェクト	オートコンプリートインスタンス（存在する場合）。