SegmentedButtonSegmentli Buton

Segmentli buton bileşeni, seçenekler sunmak, görünümleri değiştirmek veya öğeleri sıralamak için kullanılan bir dizi butonu içerir.

Kullanım Şekli

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

import 'mdui/components/segmented-button-group.js';
import 'mdui/components/segmented-button.js';

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

import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js';
import type { SegmentedButton } from 'mdui/components/segmented-button.js';

Kullanım örneği:

Gün

Hafta

<mdui-segmented-button-group>
  <mdui-segmented-button>Gün</mdui-segmented-button>
  <mdui-segmented-button>Hafta</mdui-segmented-button>
  <mdui-segmented-button>Ay</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group> öğesinde selects özniteliğini single olarak belirterek tek seçim modunu etkinleştirebilirsiniz. Bu durumda, <mdui-segmented-button-group> bileşeninin value değeri, seçili olan <mdui-segmented-button> bileşeninin value değerine eşit olur.

Gün

Hafta

Gün

Hafta

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Gün</mdui-segmented-button>
  <mdui-segmented-button value="week">Hafta</mdui-segmented-button>
  <mdui-segmented-button value="month">Ay</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Gün</mdui-segmented-button>
  <mdui-segmented-button value="week">Hafta</mdui-segmented-button>
  <mdui-segmented-button value="month">Ay</mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

Çoklu Seçim Modu

<mdui-segmented-button-group> öğesinde selects özniteliğini multiple olarak belirterek çoklu seçim modunu etkinleştirebilirsiniz. Bu durumda, <mdui-segmented-button-group> bileşeninin value değeri, seçili olan <mdui-segmented-button> bileşenlerinin value değerlerinden oluşan bir dizi olur.

Not: Çoklu seçim modunda, <mdui-segmented-button-group> bileşeninin value değeri bir dizidir ve bu değeri yalnızca JavaScript özelliği aracılığıyla okuyabilir ve ayarlayabilirsiniz.

Gün

Hafta

Gün

Hafta

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Gün</mdui-segmented-button>
  <mdui-segmented-button value="week">Hafta</mdui-segmented-button>
  <mdui-segmented-button value="month">Ay</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Gün</mdui-segmented-button>
  <mdui-segmented-button value="week">Hafta</mdui-segmented-button>
  <mdui-segmented-button value="month">Ay</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Varsayılan olarak hafta ve ay'ı seçili olarak ayarla
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Kaynak Kodu

Simge

<mdui-segmented-button> öğesinde icon ve end-icon özniteliklerini ayarlayarak, butonun soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz. Ayrıca icon ve end-icon slot'ları aracılığıyla da butonun soluna ve sağına öğeler ekleyebilirsiniz.

Gün

Hafta

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Gün</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Hafta</mdui-segmented-button>
  <mdui-segmented-button>
    Ay
    <mdui-icon slot="icon" name="downloading"></mdui-icon>
    <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
  </mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

<mdui-segmented-button> öğesinde selected-icon özniteliğini ekleyerek seçili durumdaki Material Icons simgesini ayarlayabilirsiniz. Ayrıca selected-icon slot'u aracılığıyla da ayarlayabilirsiniz.

Gün

Hafta

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Gün</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Hafta
  </mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

Bağlantı

<mdui-segmented-button> öğesinde href özniteliğini ayarlayarak butonu bir bağlantıya dönüştürebilirsiniz. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: download, target, rel.

Bağlantı

Hafta

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Bağlantı</mdui-segmented-button>
  <mdui-segmented-button>Hafta</mdui-segmented-button>
  <mdui-segmented-button>Ay</mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

Devre Dışı ve yükleniyor durumu

<mdui-segmented-button-group> öğesine disabled özniteliğini ekleyerek tüm segmentli buton grubunu devre dışı bırakabilirsiniz.

Gün

Hafta

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Gün</mdui-segmented-button>
  <mdui-segmented-button>Hafta</mdui-segmented-button>
  <mdui-segmented-button>Ay</mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

<mdui-segmented-button> öğesine disabled özniteliğini ekleyerek belirli bir butonu devre dışı bırakabilir; loading özniteliğini ekleyerek belirli bir butona yükleniyor durumu ekleyebilirsiniz.

Gün

Hafta

Yıl

<mdui-segmented-button-group>
  <mdui-segmented-button>Gün</mdui-segmented-button>
  <mdui-segmented-button disabled>Hafta</mdui-segmented-button>
  <mdui-segmented-button loading>Ay</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Yıl</mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

`mdui-segmented-button-group` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`full-width`	`fullWidth`	`boolean`	`false`
Ana öğenin genişliğini doldurup doldurmayacağı.
`selects`	`selects`	`'single' \| 'multiple'`	-
Segmentli butonların seçilebilir durumu. Varsayılan olarak seçilemez. Olası değerler: `single`: Tek seçim `multiple`: Çoklu seçim
`disabled`	`disabled`	`boolean`	`false`
Devre dışı durumda olup olmadığı.
`required`	`required`	`boolean`	`false`
Form gönderilirken seçilmesinin zorunlu olup olmadığı.
`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.
`name`	`name`	`string`	`''`
Form gönderilirken kullanılacak ad, form verileriyle birlikte gönderilir.
`value`	`value`	`string \| string[]`	`''`
Şu anda seçili olan `<mdui-segmented-button>` değeri. Not: Bu özelliğin HTML özelliği her zaman bir dizedir ve yalnızca `selects="single"` olduğunda HTML özelliği ile başlangıç değeri ayarlanabilir. Bu özelliğin JavaScript özellik değeri `selects="single"` olduğunda bir dize, `selects="multiple"` olduğunda bir dize dizisidir. Bu nedenle, `selects="multiple"` olduğunda, bu değer yalnızca JavaScript özellik değeri değiştirilerek değiştirilebilir.
	`defaultValue`	`string \| string[]`	`''`
Varsayılan seçili değer. Form sıfırlandığında bu varsayılan değere sıfırlanır. Bu özellik yalnızca JavaScript özelliği ile ayarlanabilir.
	`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
`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
`change`
Seçili değer değiştiğinde tetiklenir.
`invalid`
Form alanı doğrulaması başarısız olduğunda tetiklenir.

Slots

Ad
Varsayılan
`<mdui-segmented-button>` bileşeni.

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.

`mdui-segmented-button` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`icon`	`icon`	`string`	-
Soldaki Material Icons simge adı. `slot="icon"` ile de ayarlanabilir.
`end-icon`	`endIcon`	`string`	-
Sağdaki Material Icons simge adı. `slot="end-icon"` ile de ayarlanabilir.
`selected-icon`	`selectedIcon`	`string`	-
Seçili durumdaki Material Icons simge adı. `slot="selected-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.

Slots

Ad
Varsayılan
Segmentli buton öğesinin metin içeriği.
`icon`
Segmentli buton öğesinin solundaki simge.
`selected-icon`
Seçili durumdaki soldaki simge.
`end-icon`
Segmentli buton öğesinin sağındaki simge.

CSS Parts

Ad
`button`
İçteki `<button>` veya `<a>` öğesi.
`icon`
Soldaki simge.
`selected-icon`
Seçili durumdaki soldaki simge.
`end-icon`
Sağdaki simge.
`label`
Metin içeriği.
`loading`
Yüklenme durumundaki `<mdui-circular-progress>` öğesi.

Önceki Bölüm

Select Seçim Kutusu

Sonraki Bölüm

Slider Kaydırıcı

SegmentedButtonSegmentli Buton

Kullanım Şekli

Örnekler

Tam Genişlik Gösterimi

Tek Seçim Modu

Çoklu Seçim Modu

Simge

Bağlantı

Devre Dışı ve yükleniyor durumu

`mdui-segmented-button-group` API

Özellikler

Yöntemler

Olaylar

Slots

CSS Custom Property

`mdui-segmented-button` API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts