ButtonButon

Butonlar, e-posta gönderme, belge paylaşma veya gönderi beğenme gibi bazı işlemleri yürütmek için kullanılır.

Kullanım Şekli

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

import 'mdui/components/button.js';

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

import type { Button } from 'mdui/components/button.js';

Kullanım örneği:

Buton

<mdui-button>Buton</mdui-button>

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.

Simge

Slot

<mdui-button icon="search" end-icon="arrow_forward">Simge</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>

Kaynak Kodu

Bağlantı

href özniteliğini ayarlamak, butonu 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-button href="https://www.mdui.org" target="_blank">Bağlantı</mdui-button>

Kaynak Kodu

Devre Dışı ve yükleniyor durumu

Butonu devre dışı bırakmak için disabled özniteliğini ekleyin; butona yükleniyor durumu eklemek için loading özniteliğini ekleyin.

Devre Dışı

Yükleniyor

Yükleniyor ve Devre Dışı

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

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`variant`	`variant`	`'elevated' \| 'filled' \| 'tonal' \| 'outlined' \| 'text'`	`'filled'`
Butonun şekli. Olası değerler: `elevated`: Gölgeli buton, butonu arka plandan görsel olarak ayırmak gerektiğinde kullanılır `filled`: Güçlü görsel etki, 'Kaydet', 'Onayla' gibi önemli işlemlerin son adımı için uygundur `tonal`: Görsel etkisi `filled` ve `outlined` arasındadır, 'İleri' gibi orta-yüksek öncelikli işlemler için uygundur `outlined`: Kenarlıklı buton, 'Geri' gibi orta öncelikli ve ikincil işlemler için uygundur `text`: Metin butonu, en düşük öncelikli işlemler için uygundur
`full-width`	`fullWidth`	`boolean`	`false`
Ana öğenin genişliğini doldurup doldurmayacağı.
`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.
`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
Butonun metni.
`icon`
Butonun solundaki öğe.
`end-icon`
Butonun sağındaki öğe.

CSS Parts

Ad
`button`
İçteki `<button>` veya `<a>` öğesi.
`label`
Butonun metni.
`icon`
Butonun solundaki simge.
`end-icon`
Butonun sağındaki simge.
`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

BottomAppBar Alt Uygulama Çubuğu

Sonraki Bölüm

ButtonIcon Simge Butonu

ButtonButon

Kullanım Şekli

Örnekler

Şekil

Tam Genişlik

Simge

Bağlantı

Devre Dışı ve yükleniyor durumu

API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts

CSS Custom Property