angular - タグ Angular2 / Ionic2 を使用した入力

Question

Ionic2 で Angular2 を使用したタグ入力を探しています。Bootstrap タグ入力に似ている

Ionic 2 で Angular2 のみを使用した例を探しています。

Answer 1

Ionic2の要素ではそれができないと思いますがion-input、いくつかのスタイル ルールと数行のコードだけでその機能を構築できます。

そこでは、タグを表示するために文字列の配列を使用しているだけです

  <div class="tag-container">
    <span class="tag" *ngFor="let tag of tags">
      {{ tag }}
      <ion-icon name="close" (click)="deleteTag(tag)"></ion-icon>
    </span>
  </div>

そして、それらを適切に表示するためのいくつかのスタイル:

.tag-container {
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: 10px;
  margin: 10px;
}

.tag {
  display: inline-block;
  background-color: #5bc0de;
  color: #fff;
  margin: 5px 5px;
  padding: 2px 5px;
}

注:このデモでは、シンプルで理解しやすいようにカスタム ディレクティブを作成しませんでしたが、これらのタグを複数のページで使用する場合 (または、それらにさらに機能を追加する場合) に注意してください。 ) より良い実装は、テンプレート、スタイル、および動作を個別のコンポーネントに抽出し、それを親コンポーネントのディレクティブのように使用することです。