Chip

Penggunaan

Chip berbagi sistem warna/varian/ukuran - dan bentuk defaultnya - dengan Badge. Perbedaannya adalah removable, yang menambahkan tombol tutup dan event remove. Chip tidak melacak nilainya sendiri; parent menentukan apa artinya "remove" (hapus dari array, batalkan filter, apa pun yang cocok).

<SChip label="Primary" color="primary" />
<SChip label="Solid" color="primary" variant="solid" />
<SChip label="Outline" color="danger" variant="outline" />

Removable

removable menambahkan tombol tutup; dengarkan @remove untuk bereaksi.

<SChip
  v-for="fruit in fruits"
  :key="fruit"
  :label="fruit"
  removable
  @remove="fruits = fruits.filter((f) => f !== fruit)"
/>

Ikon

icon menambahkan ikon depan, dan dapat digabungkan dengan removable secara bebas - slot icon yang cocok menggantikan glyph sepenuhnya ketika nama ikon saja tidak cukup.

<SChip label="Verified" icon="hugeicons:tick-02" color="success" />
<SChip label="Starred" icon="hugeicons:star" color="warning" removable />

Rounded

rounded mengganti radius kecil default menjadi bentuk pil penuh.

<SChip label="Primary" color="primary" rounded />
<SChip label="Removable" removable rounded @remove="() => {}" />

Aksesibilitas

Tombol remove adalah ikon-saja, jadi ia membutuhkan nama yang dapat diakses dari suatu tempat: secara default ia diturunkan sebagai Remove {label} (atau Remove saja tanpa label) - timpa langsung dengan removeLabel ketika konten slot default bukan teks polos yang dapat dijelaskan oleh label.

Root Chip sendiri adalah <span>, jadi tombol remove merender sebagai <button> nyata di dalamnya - tidak ada yang perlu diakali di sana, tidak seperti kontrol yang harus hidup di dalam elemen interaktif lain.

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema Chip sendiri:

Props

Slots

Emits