ChipChip

Chip bileşeni, kullanıcının bilgi girmesine, seçim yapmasına, içeriği filtrelemesine veya ilgili işlemleri yürütmesine yardımcı olmak için kullanılır.

Kullanım Şekli

Bileşeni ihtiyacınıza göre içe aktarın:

import 'mdui/components/chip.js';

Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:

import type { Chip } from 'mdui/components/chip.js';

Kullanım örneği:

Chip

<mdui-chip>Chip</mdui-chip>

icon ve end-icon özniteliklerini ekleyerek, chip'in soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz. Ayrıca icon ve end-icon slot'ları aracılığıyla da chip'in soluna ve sağına öğeler ekleyebilirsiniz.

Simge

Bitiş Simgesi

Slot

<mdui-chip icon="search">Simge</mdui-chip>
<mdui-chip end-icon="arrow_forward">Bitiş Simgesi</mdui-chip>
<mdui-chip>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-chip>

Kaynak Kodu

Bağlantı

href özniteliğini eklemek, chip'i bir bağlantıya dönüştürür. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: download, target, rel.

Bağlantı

<mdui-chip href="https://www.mdui.org" target="_blank">Bağlantı</mdui-chip>

Kaynak Kodu

Devre Dışı ve yükleniyor durumu

Chip'i devre dışı bırakmak için disabled özniteliğini ekleyin; chip'e yükleniyor durumu eklemek için loading özniteliğini ekleyin.

Devre Dışı

Yükleniyor

Yükleniyor ve Devre Dışı

<mdui-chip disabled>Devre Dışı</mdui-chip>
<mdui-chip loading>Yükleniyor</mdui-chip>
<mdui-chip loading disabled>Yükleniyor ve Devre Dışı</mdui-chip>

Kaynak Kodu

Seçilebilir

Chip'in seçilebilir olması için selectable özniteliğini ekleyin.

Chip

<mdui-chip selectable>Chip</mdui-chip>

Kaynak Kodu

Seçili durumdaki Material Icons simge adını belirtmek için selected-icon özniteliğini kullanın. Ayrıca selected-icon slot'u aracılığıyla da seçili durumdaki simge öğesini belirtebilirsiniz.

Chip

<mdui-chip selectable selected-icon="favorite">Chip</mdui-chip>
<mdui-chip selectable>
  Chip
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-chip>

Kaynak Kodu

Chip seçildikten sonra, selected özniteliği true olur. Ayrıca selected özniteliğini ekleyerek chip'in varsayılan olarak seçili durumda olmasını sağlayabilirsiniz.

Chip

<mdui-chip selectable selected>Chip</mdui-chip>

Kaynak Kodu

Silinebilir

deletable özniteliği eklendikten sonra, chip'in sağ tarafında bir silme simgesi belirir. Bu simgeye tıklamak delete olayını tetikler. Silme simgesinin Material Icons simge adını delete-icon özniteliği aracılığıyla veya silme simgesi öğesini delete-icon slot'u aracılığıyla belirtebilirsiniz.

Chip

<mdui-chip deletable>Chip</mdui-chip>
<mdui-chip deletable delete-icon="backspace">Chip</mdui-chip>
<mdui-chip deletable>
  Chip
  <mdui-icon slot="delete-icon" name="backspace"></mdui-icon>
</mdui-chip>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`variant`	`variant`	`'assist' \| 'filter' \| 'input' \| 'suggestion'`	`'assist'`
Chip'in şekli. Olası değerler: `assist`: Mevcut bağlamla ilgili yardımcı işlemleri göstermek için kullanılır; örneğin sipariş sayfasında paylaşma, favorilere ekleme gibi işlevler `filter`: İçeriği filtrelemek için kullanılır; örneğin arama sonuçları sayfasında sonuçları filtrelemek `input`: Kullanıcı tarafından girilen bilgi parçalarını temsil etmek için kullanılır; örneğin Gmail'deki 'Alıcı' alanındaki kişiler `suggestion`: Kullanıcı işlemlerini basitleştirmek için dinamik olarak oluşturulan öneri bilgileri sağlamak için kullanılır; örneğin bir sohbet uygulamasında kullanıcının göndermek isteyebileceği mesajları tahmin etmek
`elevated`	`elevated`	`boolean`	`false`
Gölge gösterilip gösterilmeyeceği.
`selectable`	`selectable`	`boolean`	`false`
Seçilebilir olup olmadığı.
`selected`	`selected`	`boolean`	`false`
Seçili olup olmadığı.
`deletable`	`deletable`	`boolean`	`false`
Silinebilir olup olmadığı. `true` olduğunda, chip'in sağ tarafında bir silme simgesi görüntülenir.
`icon`	`icon`	`string`	-
Soldaki Material Icons simge adı. `slot="icon"` ile de ayarlanabilir.
`selected-icon`	`selectedIcon`	`string`	-
Seçili durumda soldaki Material Icons simge adı. `slot="selected-icon"` ile de ayarlanabilir.
`end-icon`	`endIcon`	`string`	-
Sağdaki Material Icons simge adı. `slot="end-icon"` ile de ayarlanabilir.
`delete-icon`	`deleteIcon`	`string`	-
Silinebilir durumdayken sağdaki silme simgesi için Material Icons simge adı. `slot="delete-icon"` ile de ayarlanabilir.
`href`	`href`	`string`	-
Bağlantının hedef URL'si. Bu özellik ayarlandığında, bileşen dahili olarak bir `<a>` öğesi olarak işlenir ve bağlantı ile ilgili özellikler kullanılabilir hale gelir.
`download`	`download`	`string`	-
İndirme bağlantısının hedefi. Not: Bu özellik yalnızca `href` özelliği belirtildiğinde geçerlidir.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Bağlantının nasıl açılacağı. Olası değerler: `_blank`: Bağlantıyı yeni bir pencerede açar `_parent`: Bağlantıyı üst çerçevede açar `_self`: Varsayılan. Bağlantıyı aynı çerçevede açar `_top`: Bağlantıyı tam pencerede açar Not: Bu özellik yalnızca `href` özelliği belirtildiğinde geçerlidir.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Mevcut belge ile bağlantı verilen belge arasındaki ilişki. Olası değerler: `alternate`: Mevcut belgenin alternatif sürümü `author`: Mevcut belgenin veya makalenin yazarı `bookmark`: En yakın ata bölüm için kalıcı bağlantı `external`: Başvurulan belge, mevcut belgeyle aynı sitede değil `help`: İlgili yardım belgesine bağlantı `license`: Mevcut belgenin ana içeriği, başvurulan dosyanın telif hakkı lisansı kapsamındadır `me`: Mevcut belge, bağlantı içeriğinin sahibini temsil eder `next`: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir sonraki belgedir `nofollow`: Mevcut belgenin yazarı veya yayıncısı, başvurulan dosyayı onaylamaz `noreferrer`: `Referer` başlığını içermez. `noopener` etkisine benzer `opener`: Köprü, üst düzey bir gezinme bağlamı oluşturuyorsa (yani `target` özellik değeri `_blank` ise), yardımcı bir gezinme bağlamı oluşturur `prev`: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir önceki belgedir `search`: Mevcut dosya ve ilgili sayfalarda arama yapmak için kullanılabilecek bir kaynağa bağlantı sağlar `tag`: Mevcut belge için uygun bir etiket sağlar (belirtilen adres tarafından tanımlanır) Not: Yalnızca `href` özelliği belirtildiğinde kullanılabilir.
`autofocus`	`autofocus`	`boolean`	`false`
Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
`tabindex`	`tabIndex`	`number`	-
Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
`disabled`	`disabled`	`boolean`	`false`
Devre dışı olup olmadığı.
`loading`	`loading`	`boolean`	`false`
Yüklenme durumunda olup olmadığı.
`name`	`name`	`string`	`''`
Form verileriyle birlikte gönderilen buton adı. Not: Bu özellik yalnızca `href` özelliği belirtilmediğinde geçerlidir.
`value`	`value`	`string`	`''`
Form verileriyle birlikte gönderilen buton başlangıç değeri. Not: Bu özellik yalnızca `href` özelliği belirtilmediğinde geçerlidir.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Butonun türü. Varsayılan tür `button`'dır. Olası türler: `submit`: Butona tıklandığında form verilerini sunucuya gönderir `reset`: Butona tıklandığında formdaki tüm alanları başlangıç değerlerine sıfırlar `button`: Bu türdeki butonların varsayılan bir davranışı yoktur Not: Yalnızca `href` özelliği belirtilmediğinde geçerlidir.
`form`	`form`	`string`	-
İlişkili `<form>` öğesi. Bu özelliğin değeri, aynı sayfadaki bir `<form>` öğesinin `id`'si olmalıdır. Bu özellik belirtilmezse, öğe bir `<form>` öğesinin alt öğesi olmalıdır. Bu özellik sayesinde öğeyi yalnızca `<form>` öğesinin alt öğesi olarak değil, sayfanın herhangi bir yerine yerleştirebilirsiniz. Not: Yalnızca `href` özelliği belirtilmediğinde geçerlidir.
`formaction`	`formAction`	`string`	-
Formun gönderileceği URL'yi belirtir. Bu özellik belirtilirse, `<form>` öğesinin `action` özelliğini geçersiz kılar. Not: Yalnızca `href` özelliği belirtilmediğinde ve `type="submit"` olduğunda geçerlidir.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Formu sunucuya gönderirken kullanılacak içerik türünü belirtir. Olası değerler: `application/x-www-form-urlencoded`: Bu özellik belirtilmediğinde varsayılan değer `multipart/form-data`: Form `<input type="file">` öğesi içerdiğinde kullanılır `text/plain`: HTML5 ile eklenmiştir, hata ayıklama için kullanılır Bu özellik belirtilirse, `<form>` öğesinin `enctype` özelliğini geçersiz kılar. Not: Yalnızca `href` özelliği belirtilmediğinde ve `type="submit"` olduğunda geçerlidir.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Form gönderilirken kullanılacak HTTP yöntemini belirtir. Olası değerler: `post`: Form verileri form gövdesine dahil edilerek sunucuya gönderilir `get`: Form verileri, `?` ayırıcı ile formun URI özelliğine eklenir ve oluşturulan URI sunucuya gönderilir. Formun yan etkisi olmadığında ve yalnızca ASCII karakterleri içerdiğinde bu yöntem kullanılır Bu özellik ayarlandığında, `<form>` öğesinin `method` özelliğini geçersiz kılar. Not: Yalnızca `href` özelliği ayarlanmadığında ve `type="submit"` olduğunda geçerlidir.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Bu özellik ayarlandığında, form gönderilirken form doğrulaması yapılmaz. Bu özellik ayarlandığında, `<form>` öğesinin `novalidate` özelliğini geçersiz kılar. Not: Yalnızca `href` özelliği ayarlanmadığında ve `type="submit"` olduğunda geçerlidir.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Form gönderildikten sonra alınan yanıtın nerede görüntüleneceğini belirtir. Olası değerler: `_self`: Varsayılan seçenek, aynı çerçevede açar `_blank`: Yeni bir pencerede açar `_parent`: Üst çerçevede açar `_top`: Tam pencerede açar Bu özellik ayarlandığında, `<form>` öğesinin `target` özelliğini geçersiz kılar. Not: Yalnızca `href` özelliği ayarlanmadığında ve `type="submit"` olduğunda geçerlidir.
	`validity`	`ValidityState`	-
Form doğrulama durumu nesnesi. Ayrıntılar için `ValidityState`'e bakın.
	`validationMessage`	`string`	-
Form doğrulaması başarısız olduğunda bu özellik bir bilgilendirme mesajı içerir. Doğrulama başarılı olduğunda ise boş bir dize olur.

Yöntemler

Ad	Parametreler	Dönüş Değeri
`click`		`void`
Öğeye fare tıklamasını simüle eder.
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
Odağı geçerli öğeye ayarlar. Parametre olarak bir nesne iletilebilir. Nesnenin özellikleri şunlardır: `preventScroll`: Varsayılan olarak, öğe odaklandıktan sonra sayfa, öğeyi görünüme getirmek için kayar. Sayfanın kaydırılmasını istemiyorsanız, bu özelliği `true` olarak ayarlayabilirsiniz.
`blur`		`void`
Odağı geçerli öğeden kaldırır.
`checkValidity`		`boolean`
Form alanının doğrulamayı geçip geçmediğini kontrol eder. Geçmezse `false` döndürür ve `invalid` olayını tetikler; geçerse `true` döndürür.
`reportValidity`		`boolean`
Form alanının doğrulamayı geçip geçmediğini kontrol eder. Geçmezse `false` döndürür ve `invalid` olayını tetikler; geçerse `true` döndürür. Doğrulama başarısız olduğunda, bileşen üzerinde doğrulama başarısızlığına dair bir ipucu da gösterir.
`setCustomValidity`	`message: string`	`void`
Özel bir hata ipucu metni ayarlar. Bu metin boş değilse, alanın doğrulamayı geçmediği anlamına gelir.

Olaylar

Ad
`focus`
Odak alındığında tetiklenir.
`blur`
Odak kaybedildiğinde tetiklenir.
`invalid`
Form alanı doğrulaması başarısız olduğunda tetiklenir.
`change`
Seçim durumu değiştiğinde tetiklenir.
`delete`
Silme simgesine tıklandığında tetiklenir.

Slots

Ad
Varsayılan
Chip metni.
`icon`
Soldaki öğe.
`end-icon`
Sağdaki öğe.
`selected-icon`
Seçili durumdaki soldaki öğe.
`delete-icon`
Silinebilir durumdayken sağdaki silme öğesi.

CSS Parts

Ad
`button`
İçteki `<button>` veya `<a>` öğesi.
`label`
Chip metni.
`icon`
Soldaki simge.
`end-icon`
Sağdaki simge.
`selected-icon`
Seçili durumdaki soldaki simge.
`delete-icon`
Silinebilir durumdayken sağdaki silme simgesi.
`loading`
Yüklenme durumundaki `<mdui-circular-progress>` öğesi.

CSS Custom Property

Ad
`--shape-corner`
Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.

Önceki Bölüm

Checkbox Onay Kutusu

Sonraki Bölüm

CircularProgress Dairesel İlerleme

ChipChip

Kullanım Şekli

Örnekler

Şekil

Gölge

Simge

Bağlantı

Devre Dışı ve yükleniyor durumu

Seçilebilir

Silinebilir

API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts

CSS Custom Property