# Genel Bakış mdui'nin CDN'si ve en basit sayfa şablonuyla mdui'yi kullanmaya başlayalım. > mdui 2 dokümantasyonunu okumaktasınız! > > mdui 1 dokümantasyonunu okumak için lütfen [www.mdui.org/docs/](https://www.mdui.org/docs/) adresini ziyaret edin. ## Hızlı Başlangıç {#getting-started} mdui'yi kullanmanın en kolay yolu, CSS ve JS dosyalarını doğrudan CDN'den dahil etmektir. mdui'yi npm ile kurmak istiyorsanız, lütfen [Kurulum](/tr/docs/2/getting-started/installation) bölümüne bakın. **Dosyaları Dahil Etme** Aşağıdaki kodu sayfanın `` etiketine ekleyin: ```html ``` Bileşenlerin simge özniteliklerini kullanmanız gerekiyorsa (örneğin `` içindeki `icon` özniteliği gibi), simgelerin CSS dosyasını da dahil etmeniz gerekir. Bkz. [Material Icons Simgelerini Kullanma](/tr/docs/2/components/icon#usage-material-icons). mdui, herhangi bir üçüncü taraf kütüphanesine bağlı değildir. Yukarıdaki dosyaları dahil ettikten sonra normal şekilde çalışacaktır. ## En Basit Sayfa Şablonu {#template} Aşağıda, daha fazla bileşen ve içerik ekleyerek bir web sitesi oluşturabileceğiniz en basit sayfa şablonu verilmiştir. ```html Merhaba, dünya! Merhaba, dünya! ``` # Kurulum mdui'yi npm aracılığıyla kurabilir veya CDN'den dahil edebilirsiniz. npm kullanarak kurulum yapmanız önerilir. ## npm kurulumu {#npm} ```bash npm install mdui --save ``` ### Tam import {#full-import} Projenizin giriş dosyasına aşağıdaki iki dosyayı import ederek tüm mdui bileşenlerini kullanabilirsiniz: ```js import 'mdui/mdui.css'; import 'mdui'; ``` İhtiyacınız olan fonksiyonu doğrudan mdui'den de import edebilirsiniz. Örneğin, [`snackbar`](/tr/docs/2/functions/snackbar) fonksiyonunu import etmek için şu şekilde yapabilirsiniz: ```js import { snackbar } from 'mdui'; ``` mdui'den import edilebilen tüm fonksiyonları göster 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### İhtiyaca göre import {#cherry-picking} Proje boyutunu optimize etmek için sadece ihtiyacınız olan bileşenleri ve fonksiyonları import edebilirsiniz. Örneğin, sadece [``](/tr/docs/2/components/button) bileşenini ve [`snackbar`](/tr/docs/2/functions/snackbar) fonksiyonunu kullanmanız gerekiyorsa, aşağıdaki şekilde import edebilirsiniz: ```js // CSS dosyasını her zaman import etmek gerekir import 'mdui/mdui.css'; // bileşenini import et import 'mdui/components/button.js'; // snackbar fonksiyonunu import et import { snackbar } from 'mdui/functions/snackbar.js'; ``` Her bileşenin veya fonksiyonun dokümantasyon sayfasında, ihtiyaca göre nasıl import edileceği detaylı olarak açıklanmıştır. İhtiyaca göre import edilebilen tüm bileşenleri ve fonksiyonları göster 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} mdui'yi doğrudan CDN üzerinden kullanmak için `` ve ` Bana Tıkla ``` ### ES modül yapı sürümünü kullanma {#es-module} Aşağıdaki örnek, mdui'nin ES modül yapı sürümünün nasıl kullanılacağını göstermektedir. Bu sürümde, mdui'yi CDN'den import etmek için ES modül sözdizimini kullanabilirsiniz: ```html Bana Tıkla ``` # Hızlı Başlangıç mdui'nin bileşenleri standart Web Components bileşenleridir. mdui bileşenlerini `
` etiketi gibi kullanabilirsiniz. Her bileşenin dokümantasyonunda, öznitelikler, özellikler, yöntemler, olaylar, slot, CSS Part, CSS Custom Property dahil olmak üzere tüm API'si ayrıntılı olarak açıklanmıştır. Bu bölümdeki dokümantasyon size Web Components kullanımını tanıtacaktır. ## Öznitelik {#attribute} Öznitelikler, HTML öznitelikleri ve JavaScript özellikleri olarak ikiye ayrılır. Genellikle bire bir karşılık gelirler ve senkronize kalırlar. Yani, bir HTML özniteliği değerini güncellediğinizde, JavaScript özellik değeri de buna göre güncellenir; bunun tersi de geçerlidir. HTML öznitelikleri doğrudan bileşenin HTML dizesinde ayarlanabilir ve `getAttribute` ve `setAttribute` yöntemleriyle okunup değiştirilebilir: ```html Bana Tıkla ``` JavaScript özellikleri ise doğrudan bileşen örneğinin özellik değerlerini okumak veya ayarlamak için kullanılabilir: ```html Bana Tıkla ``` Bazı özellik değerleri boolean türündedir. Bu özelliklerin HTML özniteliği mevcut olduğunda, JavaScript özelliği `true`, aksi halde `false` olur. Ancak, bazı çerçevelerle uyumluluk için mdui, `false` dize değerini de boolean `false` değeri olarak değerlendirir. ```html ``` Bazen özellik değerleri dizi, nesne veya fonksiyon olabilir. Bu durumda yalnızca JavaScript özelliği bulunur, karşılık gelen bir HTML özniteliği yoktur. Örneğin, [``](/tr/docs/2/components/slider) bileşeninin [`labelFormatter`](/tr/docs/2/components/slider#attributes-labelFormatter) özelliği bir fonksiyondur. Bu özelliği yalnızca JavaScript aracılığıyla ayarlayabilirsiniz: ```html ``` Aşağıda, [``](/tr/docs/2/components/slider) bileşeninin özellik dokümantasyonunun bir kısmı örnek olarak verilmiştir: | HTML özniteliği | JavaScript özelliği | reflect | | --------- | ---------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | Bu bileşenin `name` özniteliği, HTML özniteliğine ve JavaScript özelliğine sahiptir ve reflect sütunu, JavaScript özelliği güncellendiğinde HTML özniteliğinin de senkronize olarak güncellendiğini gösterir. `value` özelliği ise JavaScript özelliği güncellendiğinde HTML özniteliğini güncellemez. `labelFormatter` özelliği ise yalnızca JavaScript özelliğine sahiptir. ## Yöntem {#method} Bazı bileşenler genel yöntemler sağlar. Bu yöntemleri çağırarak farklı işlevleri gerçekleştirebilirsiniz. Örneğin, [``](/tr/docs/2/components/text-field) bileşeninin [`focus()`](/tr/docs/2/components/text-field#methods-focus) yöntemi, metin alanının odaklanmasını sağlar. ```html ``` Her bir bileşenin dokümantasyon sayfasında mevcut tüm yöntemleri ve parametrelerini inceleyebilirsiniz. ## Olay {#event} Bazı bileşenler belirli işlemleri gerçekleştirirken olaylar tetikler. Örneğin, [``](/tr/docs/2/components/dialog) bileşeni açılırken [`open`](/tr/docs/2/components/dialog#events-open) olayını tetikler. Bu olayı dinleyerek özel işlemler gerçekleştirebilirsiniz. ```html Diyalog ``` Her bir bileşenin dokümantasyon sayfasında mevcut tüm olayları ve parametrelerini inceleyebilirsiniz. Eğer mdui'yi diğer çerçevelerde (Vue, React, Angular vb.) kullanıyorsanız, olayları bağlamak için çerçevenin sağladığı sözdizimini kullanabilirsiniz. Ancak, React gibi bazı çerçevelerin olay bağlama sözdizimi yalnızca standart olayları (örneğin `click` olayı) bağlamak için kullanılabilir, özel olayları (örneğin `open` olayı) bağlamak için kullanılamaz. Bu nedenle, React'te özel olayları bağlamak için önce öğenin referansını almanız ve ardından `addEventListener` yöntemini kullanarak olayı bağlamanız gerekir. React'te mdui kullanımı hakkında daha fazla bilgi için bkz. [Çerçevelerle Entegrasyon - React](/tr/docs/2/frameworks/react). ## Slot {#slot} Birçok bileşen, özel HTML içeriğini bileşenin içine yerleştirmek için slot sağlar. En yaygın olanı varsayılan slottur. Bu, bileşenin içindeki sıradan bir HTML veya düz metindir. Örneğin, [``](/tr/docs/2/components/button) bileşeninin varsayılan slot'u, butonun metnini ayarlamak için kullanılır. Örnekteki "Bana Tıkla" varsayılan slot'un içeriğidir: ```html Bana Tıkla ``` Bazı bileşenler ayrıca adlandırılmış slot da sağlar. Adlandırılmış slot için HTML'deki `slot` özniteliğinde slot adını belirtmeniz gerekir. Aşağıdaki örnekte, [``](/tr/docs/2/components/icon) bileşeni `slot="start"` olarak belirtilmiştir. Bu, [`start`](/tr/docs/2/components/button#slots-icon) adında adlandırılmış bir slot olduğu anlamına gelir, yani bu simge bileşenin içindeki sol tarafa eklenecektir: ```html Ayarlar ``` Bir bileşen birden fazla adlandırılmış slot kullanıyorsa, adlandırılmış slot'ların sırası önemli değildir. Bileşenin içinde oldukları sürece, tarayıcı bunları otomatik olarak doğru konumlara yerleştirecektir. Desteklenen tüm slot'ları her bir bileşenin dokümantasyon sayfasında inceleyebilirsiniz. ## CSS Custom Property {#css-custom-properties} CSS Custom Property, CSS'teki değişkenlerdir. mdui, bir dizi [genel CSS Custom Property](/tr/docs/2/styles/design-tokens) tanımlar. Bu özellikler her bileşenin içinde referans alınır. Bu nedenle, bu CSS Custom Property'leri değiştirerek mdui bileşenlerinin stillerini genel olarak değiştirebilirsiniz. Örneğin, aşağıdaki kod tüm bileşenlerin köşe yuvarlaklık boyutunu küçültür: ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Ayrıca yerel kapsamda da CSS Custom Property'leri değiştirebilirsiniz. Örneğin, aşağıdaki kod yalnızca `class="sharp"` içeren öğe ve alt öğelerinde köşe yuvarlaklık boyutunu küçültür: ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Bazı bileşenler ayrıca o bileşene özgü CSS Custom Property'ler sağlar. Bu özelliklerin kapsamı belirli bir bileşen olduğu için `--mdui` ön eki içermezler. Örneğin, aşağıdaki kod [``](/tr/docs/2/components/dialog) bileşeninin `--z-index` özelliğini değiştirerek `z-index` stilini değiştirir: ```css mdui-dialog { --z-index: 3000; } ``` Bir bileşenin desteklediği CSS Custom Property'leri, her bir bileşenin dokümantasyon sayfasında inceleyebilirsiniz. ## CSS Part {#css-part} mdui bileşenleri, stilleri ve davranışları kapsüllemek için shadow DOM kullanır, ancak normal CSS seçicileri shadow DOM içindeki öğeleri seçemez. Bu nedenle, bazı bileşenler Shadow DOM öğelerine `part` özniteliği ekler. `::part` CSS seçicisini kullanarak ilgili öğeleri seçebilir ve stillerinin bir kısmını geçersiz kılabilirsiniz. Örneğin, aşağıdaki kod [`button`](/tr/docs/2/components/button#cssParts-button) part'ını kullanarak butonun iç boşluğunu değiştirir ve [`label`](/tr/docs/2/components/button#cssParts-label), [`icon`](/tr/docs/2/components/button#cssParts-icon), [`end-icon`](/tr/docs/2/components/button#cssParts-end-icon) part'larını kullanarak sırasıyla metin, sol simge ve sağ simgenin renklerini değiştirir: ```html Buton ``` Bileşenin shadow DOM öğelerinin yapısını ve varsayılan stillerini, tarayıcının geliştirici araçlarını açarak inceleyebilirsiniz. CSS Part kullanmadan önce, genel CSS Custom Property'leri ve bileşene özgü CSS Custom Property'lerin ihtiyaçlarınızı karşılayıp karşılamadığını değerlendirmelisiniz. Eğer ihtiyaçlarınızı karşılıyorsa, stilleri özelleştirmek için öncelikle CSS Custom Property'leri kullanmalısınız. Bir bileşen tarafından açığa çıkarılan tüm `part` özniteliklerini, her bir bileşenin dokümantasyon sayfasında inceleyebilirsiniz. ## Bileşen Güncelleme Mekanizması {#update-mechanism} mdui bileşenleri, [Lit](https://lit.dev/) tabanlı olarak geliştirilmiştir. Lit, Web Components geliştirmeyi daha kolay hale getiren hafif bir kütüphanedir. mdui bileşenlerini kullanırken, bunların render ve güncelleme mekanizmalarını anlamanız gerekebilir. Bir mdui bileşeninin özelliklerini değiştirdiğinizde, bileşen yeniden render edilir. Ancak bu yeniden render işlemi senkronize olarak gerçekleşmez. Birden fazla özellik değerini aynı anda değiştirdiğinizde, Lit bu değişiklikleri bir sonraki güncelleme döngüsüne kadar önbelleğe alır. Bu sayede, özellik değerlerini kaç kez değiştirdiğinizden bağımsız olarak her bileşen yalnızca bir kez yeniden render edilir. Ayrıca, yalnızca shadow DOM'da değişen kısımlar yeniden render edilir. Aşağıdaki örnekte, butonun `disabled` JavaScript özellik değerini `true` olarak ayarlayıp hemen HTML özniteliğini sorguluyoruz. Ancak, bileşen henüz yeniden render edilmediği için sorgulanan HTML özniteliği hala `false` olacaktır: ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` Bir özellik değeri değişikliğinden sonra yeniden render işleminin tamamlanmasını beklemek için bileşenin `updateComplete` özelliğini kullanabilirsiniz. Bu özellik, bileşen yeniden render işlemini tamamladığında çözülen bir Promise döndürür: ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # TypeScript Desteği mdui, TypeScript ile geliştirilmiştir ve bu nedenle TypeScript'e iyi düzeyde destek sağlar. Tüm resmi mdui kütüphaneleri kendi tip bildirim dosyalarıyla birlikte gelir ve doğrudan kullanılabilir. ## Bileşenlerin Örnek Türü {#instance} Bazen, bir JavaScript değişkenini bir mdui bileşen örneği olarak kullanmanız gerekebilir. Bu durumda, ilgili bileşen türünü doğrudan mdui'den import edebilirsiniz. Örneğin, Tooltip bileşeninin türünü bileşen dosyasından import edin: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Veya Tooltip bileşeninin türünü doğrudan mdui'den import edin: ```ts import type { Tooltip } from 'mdui'; ``` Ardından, bir JavaScript değişkenini Tooltip türü olarak kullanabilirsiniz: ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` Bu noktada IDE'niz, `tooltip` değişkeninin özelliklerini ve yöntemlerini otomatik olarak önerecektir. Eğer `tooltip` değişkenine bir olay dinleyicisi eklerseniz, olay adları, olay türleri ve geri çağırma fonksiyonundaki `this` işaretçisi de otomatik olarak önerilecektir: ```ts tooltip.addEventListener('open', function (event) {}); ``` ## Olay Türleri {#event} Her bileşen, olay adlarını ve bunlara karşılık gelen olay nesnesi türlerini eşleyen bir arayüz dışa aktarır. Arayüz adı `${bileşenAdı}EventMap` şeklindedir. Örneğin, Tooltip bileşeni `TooltipEventMap` adında bir arayüz dışa aktarır: ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` Bu arayüzü bileşen dosyasından import edebilirsiniz: ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` Veya bu arayüzü doğrudan mdui'den import edebilirsiniz: ```ts import type { TooltipEventMap } from 'mdui'; ``` Bu arayüzün yalnızca bileşene özel olayları içerdiğini, ancak mdui bileşenlerinin `HTMLElement`'ten miras aldığını ve bu nedenle `HTMLElement` olaylarını da desteklediğini unutmayın. Bir bileşenin tüm olay türlerini almak için kesişim türünü kullanabilirsiniz: ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # IDE Desteği mdui, VS Code ve WebStorm için özel olarak optimize edilmiştir. Bu IDE'lerde kod tamamlama, üzerine gelme ipuçları gibi özellikleri elde edebilirsiniz. ## VS Code {#vscode} ### npm ile kurulan mdui {#vscode-npm} mdui'yi npm aracılığıyla kurduysanız, mevcut projenizde VS Code'un IDE desteğini etkinleştirmek için aşağıdaki adımları izleyin: 1. Proje kök dizininde `.vscode` dizinini oluşturun. 2. `.vscode` dizini içinde `settings.json` dosyasını oluşturun. 3. `settings.json` dosyasına aşağıdaki kod satırlarını ekleyin: ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` Eğer `settings.json` dosyası zaten mevcutsa, yukarıdaki iki satırı JSON belgesinin kök düğümüne eklemeniz yeterlidir. Değişiklikleri tamamladıktan sonra VS Code'u yeniden başlatın. ### CDN ile kullanılan mdui {#vscode-cdn} Eğer mdui'yi CDN aracılığıyla kullanıyorsanız, mdui'nin VS Code eklentisini kurarak IDE desteği elde edebilirsiniz. VS Code'un eklenti mağazasında `mdui` araması yapın ve ilk sonucu kurun veya [kurulum için buraya tıklayın](vscode:extension/zdhxiong.mdui). Kurulum tamamlandığında, tüm projeler mdui'nin IDE desteğini kullanabilecektir. IDE desteğinin kullanılan mdui sürümüyle tutarlı olmasını sağlamak için, VS Code eklentisini kurmak yerine öncelikle npm ile kurulum yapıp `settings.json` dosyasını ayarlamanız önerilir. ## WebStorm {#webstorm} ### npm ile kurulan mdui {#webstorm-npm} mdui'yi npm aracılığıyla kurduysanız, mevcut projenizde WebStorm'un IDE desteğini etkinleştirmek için aşağıdaki adımları izleyin: 1. Proje kök dizinindeki `package.json` dosyasının kök düğümüne aşağıdaki kod satırlarını ekleyin: ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` Eğer `package.json` dosyasının kök düğümünde zaten bir `web-types` özelliği varsa, `./node_modules/mdui/web-types.en.json` değerini `web-types` dizinine eklemeniz yeterlidir. Değişiklikleri tamamladıktan sonra WebStorm'u yeniden başlatın. ### CDN ile kullanılan mdui {#webstorm-cdn} Eğer mdui'yi CDN aracılığıyla kullanıyorsanız, mdui'nin WebStorm eklentisini kurarak IDE desteği elde edebilirsiniz. WebStorm'un eklenti mağazasında `mdui` araması yapın ve ilk sonucu kurun. Kurulum tamamlandığında, tüm projeler mdui'nin IDE desteğini kullanabilecektir. IDE desteğinin kullanılan mdui sürümüyle tutarlı olmasını sağlamak için, WebStorm eklentisini kurmak yerine öncelikle npm ile kurulum yaparak IDE desteği elde etmeniz önerilir. ## VS Code ve WebStorm Destekleri Arasındaki Farklar {#difference} mdui'nin VS Code ve WebStorm desteği arasında bazı farklılıklar bulunmaktadır. Aşağıdaki tabloda detaylı farklılıklar listelenmiştir: | Kod tamamlama ve üzerine gelme ipucu alınan konum | VS Code | WebStorm | | -------------------------------------------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | HTML etiket adları | | | | HTML etiketindeki öznitelik adları | | | | HTML etiketindeki öznitelik değerlerinin numaralandırılmış değerleri | | （numaralandırılmış değerlerin yorumlarını göstermeyi desteklemez） | | HTML etiketindeki olay adları | | | | HTML'deki slot `name` öznitelik değeri | | | | CSS'teki `::part()` seçicisinin `part` öznitelik adı | | | | CSS'teki bileşen içi CSS Custom Property adları | | | | CSS'teki genel CSS Custom Property adları | | | | CSS'teki genel class adları | | | # Yerelleştirme mdui dahili olarak varsayılan olarak İngilizce kullanır. Başka bir dili kullanmak istiyorsanız, çoklu dil yapılandırması yapmanız gerekir. ## Kullanım Yöntemi {#usage} mdui, çoklu dil işlevselliğini uygulamak için üç fonksiyon sağlar: - [`loadLocale`](/tr/docs/2/functions/loadLocale): Dil paketini yükler. Parametre, bir dil kodunu parametre olarak alan ve Promise döndüren bir fonksiyondur. Dil paketi yüklendiğinde Promise, ilgili dil paketiyle çözülür. Bu fonksiyonu projenizin giriş dosyasında çağırdığınızdan emin olun. - [`setLocale`](/tr/docs/2/functions/setLocale): Belirtilen dile geçiş yapar. Parametre yeni dil kodudur, yeni dil paketi yüklendikten sonra çözülen bir Promise döndürür. - [`getLocale`](/tr/docs/2/functions/getLocale): Mevcut dil kodunu alır. Kullanım örneği aşağıdaki gibidir: ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // Proje girişinde dil paketini yüklemek için loadLocale'yi çağırın loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // Dili değiştirmeniz gerektiğinde bu fonksiyonu çağırın. Promise çözüldükten sonra dil başarıyla değişir setLocale('zh-cn').then(() => { // Geçerli dil kodunu almak için getLocale'yi çağırın console.log(getLocale()); // zh-cn }); ``` ## Durum Olayları {#event} Dil değişikliğinin başlangıcında, sonunda ve başarısız olduğunda, `window` üzerinde `mdui-localize-status` olayı tetiklenir. Bu olayı dinleyerek özel işlemler gerçekleştirebilirsiniz, örneğin dil değişikliği başarılı olduğunda dil kodunu Çerez'e yazmak gibi. Olayın `detail.status` özelliği, hangi tür durum değişikliğinin meydana geldiğini açıklar. Olası değerler: `loading`, `ready`, `error`:
detail.status Açıklama
loading

Yeni dil paketi yüklenmeye başlıyor.

detail nesnesi şunları içerir:

  • loadingLocale: Yeni yüklenen dilin dil kodu.
ready

Yeni dil paketi başarıyla yüklendi.

detail nesnesi şunları içerir:

  • readyLocale: Yeni yüklenen dilin dil kodu.
error

Yeni dil paketi yüklenirken hata oluştu.

detail nesnesi şunları içerir:

  • errorLocale: Yüklemesi başarısız olan dilin dil kodu.
  • errorMessage: Yükleme başarısız olduğunda oluşan hata mesajı.
Kullanım örneği aşağıdaki gibidir: ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log( `Yeni dil paketi yüklenmeye başlıyor: ${event.detail.loadingLocale}`, ); } else if (event.detail.status === 'ready') { console.log( `Yeni dil paketi ${event.detail.readyLocale} başarıyla yüklendi`, ); } else if (event.detail.status === 'error') { console.error( `Yeni dil paketi ${event.detail.errorLocale} yüklenirken hata oluştu: ${event.detail.errorMessage}`, ); } }); ``` ## Dil Paketi Yükleme Yöntemi {#load-locale} ### Tembel yükleme {#lazy-load} [Dinamik import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) kullanarak, ilgili dile geçildiğinde ilgili dil paketinin indirilmesini sağlayabilirsiniz. Bu en çok önerilen yöntemdir. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### Ön yükleme {#pre-load} Sayfa yüklenirken ihtiyaç duyulan tüm dil paketlerini önceden indirin. Bu sayede dil değiştirirken tekrar indirme yapmanıza gerek kalmaz, böylece dil değiştirme daha hızlı olur. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### Statik importlar {#static-imports} Bu yöntemi kullanarak ihtiyaç duyulan tüm dil paketlerini proje kodunuzla aynı dosyada birleştirebilir, böylece dil paketlerini ayrıca indirmeniz gerekmez. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## CDN Üzerinden Dil Paketi Yükleme {#cdn} Eğer mdui'yi CDN aracılığıyla kullanıyorsanız, dil paketini doğrudan CDN'den yükleyebilirsiniz. Kullanım örneği aşağıdaki gibidir: ```html ``` ## Desteklenen Diller {#languages} Şu anda mdui aşağıdaki dilleri desteklemektedir: | Dil | Dil Kodu | | -------------------------------- | -------- | | Arapça | ar-eg | | Azerice | az-az | | Bulgarca | bg-bg | | Bengalce (Bangladeş) | bn-bd | | Beyaz Rusça | be-by | | Katalanca | ca-es | | Çekçe | cs-cz | | Danca | da-dk | | Almanca | de-de | | Yunanca | el-gr | | İngilizce | en-gb | | İngilizce (Amerikan) | en-us | | İspanyolca | es-es | | Estonca | et-ee | | Farsça | fa-ir | | Fince | fi-fi | | Fransızca (Belçika) | fr-be | | Fransızca (Kanada) | fr-ca | | Fransızca (Fransa) | fr-fr | | İrlandaca | ga-ie | | Galiçyaca (İspanya) | gl-es | | İbranice | he-il | | Hintçe | hi-in | | Hırvatça | hr-hr | | Macarca | hu-hu | | Ermenice | hy-am | | Endonezce | id-id | | İtalyanca | it-it | | İzlandaca | is-is | | Japonca | ja-jp | | Gürcüce | ka-ge | | Khmerce | km-kh | | Kuzey Kürtçe | kmr-iq | | Kannadaca | kn-in | | Kazakça | kk-kz | | Korece | ko-kr | | Litvanca | lt-lt | | Letonca | lv-lv | | Makedonca | mk-mk | | Malayalam dili | ml-in | | Moğolca | mn-mn | | Malayca (Malezya) | ms-my | | Norveççe | nb-no | | Nepalce | ne-np | | Felemenkçe (Belçika) | nl-be | | Felemenkçe | nl-nl | | Lehçe | pl-pl | | Portekizce (Brezilya) | pt-br | | Portekizce | pt-pt | | Romence | ro-ro | | Rusça | ru-ru | | Slovakça | sk-sk | | Sırpça | sr-rs | | Slovence | sl-si | | İsveççe | sv-se | | Tamilce | ta-in | | Tayca | th-th | | Türkçe | tr-tr | | Urduca (Pakistan) | ur-pk | | Ukraynaca | uk-ua | | Vietnamca | vi-vn | | Basitleştirilmiş Çince | zh-cn | | Geleneksel Çince (Çin Hong Kong) | zh-hk | | Geleneksel Çince (Çin Tayvan) | zh-tw | ## Yeni Çeviri Gönderme {#contribute} Yeni bir çeviriye katkıda bulunmak veya mevcut çevirileri iyileştirmek için lütfen Github üzerinde bir Birleştirme İsteği (Pull Request) oluşturun. Dil paketleri [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff) adresinde bulunmaktadır, doğrudan Github üzerinde düzenleme yapabilirsiniz. # Sıkça Sorulan Sorular Aşağıda, mdui topluluğunda sıkça karşılaşılan sorunlar ve resmi cevaplar derlenmiştir. Soru sormadan önce benzer sorunların olup olmadığını kontrol etmeniz önerilir. ## Kendi kendini kapatan etiketler (self-closing tags) kullanınca bileşenler neden görünmüyor? {#no-self-closing} mdui, Web Components tabanlı bir bileşen kütüphanesidir. Web Components standardı, kendi kendini kapatan etiketleri (self-closing tags) desteklemez. Bu nedenle, lütfen mdui bileşenleri için kapanış etiketlerini eklediğinizden emin olun. ```html ``` ## Bileşenler yüklenmeden önce nasıl gizlenir? {#waiting-load} mdui bileşenleri JavaScript ile kaydedildiği için, js dosyası yüklenip bileşen kaydedilene kadar bileşenler geçici olarak stilsiz görünebilir. Bu sorunu çözmek için iki yöntem aşağıda açıklanmıştır: Bir yöntem, CSS'teki [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:defined) pseudo-sınıfını kullanarak kayıtlı olmayan mdui bileşenlerini gizlemektir. Aşağıdaki CSS kodu, kayıtlı olmayan tüm mdui bileşenlerini gizler ve bileşen kaydı tamamlandığında hemen gösterir: ```css :not(:defined) { visibility: hidden; } ``` Diğer bir yöntem ise JavaScript'teki [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined) yöntemini kullanmaktır. Bu yöntem, belirtilen bileşenin kaydı tamamlandığında çözülecek (resolve) bir promise döndürür. Bazı bileşenlerin özel bir nedenle yüklenememesi durumunu ele almak için [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) yöntemiyle birlikte kullanabilirsiniz. Aşağıdaki örnek, önce `opacity: 0` ile ``'yi gizler, ardından bileşen kaydı tamamlandıktan sonra sayfanın yumuşak bir geçişle görünmesini sağlar. Ayrıca örnek, tüm promise'lerin tamamlanmasını beklemek için `Promise.allSettled()` kullanır, böylece bir bileşen yüklenemese bile sayfanın düzgün görüntülenmesini garanti eder: ```html ``` # LLMs.txt mdui, LLM (büyük dil modelleri) için doğru ve referans verilebilir bağlam sağlayan `llms.txt` ve `llms-full.txt` dosyalarını sunar. Bu, yapay zekanın mdui ile ilgili sorulara daha güvenilir bir şekilde yanıt vermesine yardımcı olur. ## AI'ya bağlam sağlamak için llms.txt kullanımı {#context} İki giriş noktası: - `llms.txt`: https://www.mdui.org/tr/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/tr/docs/2/llms-full.txt `llms.txt` özlü bir dizindir; internet erişimine sahip modellerin bağlantılardan gerekli Markdown sayfalarını alması ya da projeye genel bir bakış sunması için uygundur. `llms-full.txt`, `llms.txt` içindeki tüm sayfa içeriklerini içeren tam bağlamı sağlar. Bu, modelin internete erişimi olmadığında veya tüm bağlamın tek seferde sağlanması gerektiğinde uygundur. ## Dokümanların Markdown sürümleri {#md-mirror} Her doküman sayfasının karşılık gelen bir Markdown sürümü vardır: Sayfa URL'sinin sonuna `.md` eklemeniz yeterlidir (ana sayfa için `index.md` ekleyin). Örneğin: https://www.mdui.org/tr/docs/2/components/button → https://www.mdui.org/tr/docs/2/components/button.md https://www.mdui.org/tr/docs/2/ → https://www.mdui.org/tr/docs/2/index.md Bu Markdown bağlantısını veya düz metnini doğrudan bağlam olarak kullanarak daha odaklı ve doğru yanıtlar alabilirsiniz. ## ChatGPT, Claude ve diğer LLM'lerde nasıl kullanılır {#how-to-use} Modelin internet/yükleme desteğine bağlı olarak aşağıdaki yöntemlerden birini veya bir kombinasyonunu seçin: 1. Doğrudan yapıştırma: `llms-full.txt` içeriğini sistem mesajı veya ilk mesaj olarak yapıştırın. Örnek: "İşte mdui bağlamı. Lütfen sonraki soruları kesinlikle buna dayanarak yanıtlayın; çelişki olması durumunda bu bağlamı esas alın: \n\n[llms-full.txt içeriğini yapıştırın]". 2. Dosya yükleme: `llms-full.txt` (veya `llms.txt`) dosyasını yükleyin ve ilk mesajda "Ekleri ana bağlam olarak kullan" talimatını verin. Örnek: "Ekli mdui dokümanlarına dayanarak `` kullanımını ve yaygın hataları göster." 3. Çevrimiçi okuma: Sohbette `llms.txt` veya `llms-full.txt` bağlantısını verin. Örnek: "Lütfen https://www.mdui.org/tr/docs/2/llms-full.txt adresini bağlam olarak okuyun ve takip edin, mdui hakkındaki sorularımı yanıtlayın." 4. Belirli bir sayfaya yönlendirme: Sadece belirli bir bileşen/fonksiyonu tartışırken, o sayfanın Markdown adresini doğrudan verin. Örnek: "Lütfen https://www.mdui.org/tr/docs/2/components/button.md adresini okuyun ve bu dokümana dayanarak üç en iyi uygulama örneği sunun." **İpucu**: Sayfanın sağ üst köşesindeki simgesine tıklayarak, yukarıdaki bağlantıları tek tıkla kopyalayabilir, geçerli sayfanın Markdown sürümünü açabilir veya geçerli sayfayı ya da `llms-full.txt` dosyasını bağlam olarak ChatGPT'de açabilirsiniz. # MCP Sunucusu mdui, yapay zeka ajanlarına bileşenler, simgeler, CSS Custom Property'leri ve dokümantasyon sorgulama yetenekleri sağlamak için yerel olarak kullanılabilen özel bir [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) sunucusu olan `@mdui/mcp` sunucusunu sunar. Claude Code, Cursor, GitHub Copilot gibi geliştirme araçlarıyla birlikte çalışarak kod oluşturulmasına yardımcı olabilir ve mdui'nin bileşenleri ile stillerinin daha iyi kullanılmasını sağlayabilir. ## Araçlar {#tools} mdui'nin MCP sunucusu, yapay zeka ajanlarına aşağıdaki araçları sunar: - `list_components`: Tüm mdui bileşenlerini listeler. - `get_component_metadata`: Tek bir bileşenin ayrıntılı API meta verilerini alır. - `list_css_classes`: Genel CSS sınıf adlarını listeler. - `list_css_variables`: Genel CSS Custom Property'lerini listeler. - `list_documents`: Tüm dokümanları listeler. - `get_document`: Tek bir dokümanın tam içeriğini alır. - `list_icon_codes`: Özniteliklerde veya API'lerde kullanılabilecek simge kodlarını listeler. - `list_icon_components`: Bağımsız simge bileşenlerini ve bunların ESM içe aktarma ifadelerini listeler. ## Kullanım Şekli {#usage} MCP sunucusu yalnızca [stdio iletimini](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) destekler. VS Code, Cursor, Claude Code, Windsurf, Zed gibi istemcilerde ve stdio protokolünü destekleyen yapay zeka ajanlarında doğrudan kullanılabilir. ### VS Code {#vscode} > [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) ve [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) eklentilerinin yüklü olduğundan emin olun. 1. Proje kök dizininde `.vscode/mcp.json` dosyası oluşturun ve aşağıdaki yapılandırmayı ekleyin: ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. `mcp.json` dosyasındaki "Başlat" düğmesine tıklayın. 3. GitHub Copilot Chat'te sohbete başlayın. ### Cursor {#cursor} 1. Proje kök dizininde `.cursor/mcp.json` dosyasını oluşturun veya düzenleyin ve aşağıdaki yapılandırmayı ekleyin: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Ayarlar > Cursor Ayarları > MCP & Entegrasyonlar bölümüne gidin ve mdui sunucusunu etkinleştirin. 3. Cursor Sohbeti'nde sohbete başlayın. ### Claude Code {#claude-code} 1. Terminalde aşağıdaki komutu çalıştırarak mdui MCP sunucusunu ekleyin: ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. Ardından `claude` komutunu çalıştırarak oturumu başlatın. 3. İstemleri kullanmaya başlayın. ### Windsurf {#windsurf} 1. Ayarlar > Windsurf Ayarları > Cascade bölümüne gidin. 2. MCP'leri Yönet'e tıklayın, ardından "Ham yapılandırmayı görüntüle"ye tıklayın ve yapılandırma dosyasına aşağıdakileri ekleyin: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > MCP sunucusu otomatik olarak görünmezse, listeyi yenilemek için Yenile düğmesine tıklayabilirsiniz. 3. İstemleri kullanarak sohbete başlayın. ### Zed {#zed} 1. Ayarlar > Ayarları Aç bölümüne gidin ve `settings.json` dosyasına aşağıdaki yapılandırmayı ekleyin: ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. İstemleri kullanmaya başlayın. ### Özel MCP İstemcisi {#custom} Yerel veya geliştirme ortamında özel bir MCP istemcisi kullanırken, bu sunucuyu istemcinin yapılandırma dosyasına ekleyin. Örneğin: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # Koyu Mod mdui'nin tüm bileşenleri Koyu Mod'u destekler ve işletim sisteminin ayarlarına göre temayı otomatik olarak değiştirmeyi destekler. Dokümantasyon sayfasının sağ üst köşesindeki simgesine istediğiniz zaman tıklayarak temayı değiştirebilir ve her bir bileşenin farklı temalar altındaki görünümünü inceleyebilirsiniz. Koyu Mod'u kullanmak için `` etiketine `mdui-theme-dark` sınıfını eklemeniz yeterlidir: ```html ``` Temanın işletim sistemi ayarlarına göre otomatik olarak değişmesini istiyorsanız, `` etiketine `mdui-theme-auto` sınıfını eklemeniz yeterlidir: ```html ``` Sayfanın farklı bölümlerinde farklı temalar da kullanabilirsiniz. Örneğin aşağıdaki örnekte, `` üzerinde Koyu Mod ayarlanmış, ancak sayfadaki bir `
` üzerine `mdui-theme-light` sınıfı eklenmiştir. Bu sayede bu div içindeki öğeler Açık Mod'da görünecek, sayfanın geri kalanı ise Koyu Mod'da olacaktır: ```html
``` Doğrudan CSS sınıfı eklemenin yanı sıra, mdui tema üzerinde daha kolay yönetmek için iki fonksiyon daha sağlar: - [`getTheme`](/tr/docs/2/functions/getTheme): Geçerli sayfadaki veya belirtilen öğedeki temayı alır. - [`setTheme`](/tr/docs/2/functions/setTheme): Geçerli sayfadaki veya belirtilen öğedeki temayı ayarlar. --- Dikkat edilmesi gereken nokta, mdui'nin `:root` ile `.mdui-theme-light`, `.mdui-theme-dark`, `.mdui-theme-auto` seçicilerinde `color` ve `background-color` stillerini ayarlamasıdır. Bu varsayılan stilleri beğenmezseniz, kendiniz geçersiz kılabilirsiniz. Aşağıdaki örnek, Açık Mod'da sayfa arka planını saf beyaz, metni saf siyah olarak ayarlar; Koyu Mod'da ise sayfa arka planını saf siyah, metni saf beyaz olarak ayarlar: ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # Dinamik Renk mdui dinamik renk özelliği sağlar. Sadece bir renk değeri sağlayarak, mdui otomatik olarak tam bir renk şeması oluşturabilir. Ayrıca, mdui belirtilen bir duvar kağıdından ana rengi çıkarmayı ve buna göre bir renk şeması oluşturmayı da destekler. Dokümantasyon sayfasının sağ üst köşesindeki simgesine istediğiniz zaman tıklayarak renk şemasını değiştirebilir ve her bir bileşenin farklı renk şemaları altındaki görünümünü inceleyebilirsiniz. Bir renk şeması aslında bir dizi CSS Custom Property'dir. mdui bileşenlerindeki renk değerleri bu CSS Custom Property'lerini referans alır, bu nedenle tüm bileşenlerin renk şemasını tek seferde güncelleyebilirsiniz. Tam CSS Custom Property listesi için bkz. [Design Tokens - Renk](/tr/docs/2/styles/design-tokens#color). ## Renk Şeması Oluşturma {#color-scheme} Renk şeması oluşturmak için [`setColorScheme`](/tr/docs/2/functions/setColorScheme) fonksiyonunu kullanabilirsiniz. Bu fonksiyon parametre olarak bir onaltılık renk değeri alır, bir renk şeması oluşturur ve sayfanın `` öğesini bu renk şemasına ayarlar. Örneğin: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // #0061a4 değerine göre bir renk şeması oluşturur ve öğesini bu renk şemasına ayarlar setColorScheme('#0061a4'); ``` İkinci parametrede `target` özelliğini de belirterek renk şemasının hangi öğede ayarlanacağını da belirtebilirsiniz. Örneğin: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // #0061a4 değerine göre bir renk şeması oluşturur ve .foo öğesini bu renk şemasına ayarlar setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` Varsayılan olarak oluşturulan renk şeması yalnızca [Design Tokens - Renk](/tr/docs/2/styles/design-tokens#color) bölümünde listelenen renkleri içerir. İkinci parametrede `customColors` özelliğini belirtebilirsiniz. mdui, verdiğiniz özel renk adlarına ve renk değerlerine göre bir dizi özel renk grubu oluşturur. Örneğin: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // #0061a4 değerine göre bir renk şeması oluşturur, mevcut error renk grubunun değerini değiştirir ve yeni bir music renk grubu ekler setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` Bir özel renk grubu dört CSS Custom Property içerir: - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` Buradaki `{name}`, girdiğiniz `customColors` içindeki `name` alanıdır, yani özel renk adıdır. Özel renk adı, varsayılan renk şemasındaki mevcut bir renk adı olabilir, örneğin `primary`, `secondary`, `tertiary`, `error` bunlar varsayılan renk şemasında bulunan renk adlarıdır. Bu değerleri özel renk adı olarak belirtirseniz, oluşturulan renk şemasında bu dört CSS Custom Property, belirttiğiniz renk değeriyle oluşturulacaktır. Örneğin yukarıdaki örnekte `error` adında bir özel renk adı belirtilmiştir. `error` varsayılan renk şemasında bulunan bir renk adı olduğu için ve karşılık gelen CSS Custom Property'leri mdui bileşenleri tarafından hata durumunu belirtmek için kullanıldığından, renk değeri şimdi yeşil bir değere ayarlandığı için mdui bileşenlerindeki hata durumu da yeşile dönecektir. Özel renk adı ayrıca yeni eklenen bir renk de olabilir, örneğin yukarıdaki örnekteki `music` varsayılan renk şemasında bulunmayan bir renk adıdır. Bu durumda oluşturulan renk şeması ek olarak dört CSS Custom Property daha içerecektir. Bu CSS Custom Property'leri kendi stillerinizde referans alabilirsiniz: ```html
Müzik
Müzik Konteynırı
``` Ayrıca, yukarıdaki yöntemlerle oluşturulan renk şemasını kaldırmak için [`removeColorScheme`](/tr/docs/2/functions/removeColorScheme) fonksiyonunu da kullanabilirsiniz. Hangi öğedeki renk şemasının kaldırılacağını belirtmek için parametre geçirebilirsiniz. Varsayılan olarak, `` üzerindeki renk şemasını kaldırır. ## Duvar Kağıdından Renk Çıkarma {#from-wallpaper} mdui, verilen bir `Image` örneğinden ana rengi çıkarmak için [`getColorFromImage`](/tr/docs/2/functions/getColorFromImage) fonksiyonunu sağlar. Bu fonksiyon, çözümlenen değeri çıkarılan onaltılık renk değeri olan bir Promise döndürür. Bu fonksiyondan elde ettiğiniz renk değerini kullanarak, yukarıdaki dokümantasyonda tanıtılan [`setColorScheme`](/tr/docs/2/functions/setColorScheme) fonksiyonunu çağırarak renk şemasını ayarlayabilirsiniz. Örneğin: ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # Tipografi mdui, makalelerin ve tabloların stilini optimize etmek için özel olarak `mdui-prose` ve `mdui-table` CSS sınıflarını sağlar. ## Makale Düzeni {#prose} Makalenin üst öğesine `mdui-prose` sınıfını ekleyerek, makale içindeki `` tablo stilleri de dahil olmak üzere tüm makalenin görüntüleme stilini optimize edebilirsiniz. Örneğin: ```html

Başlık

Gövde metni

``` ## Tablo Stili {#table} `` öğesine `mdui-table` sınıfını ekleyerek tablonun görüntüleme stilini optimize edebilirsiniz. Örneğin: ```html
``` Tablonun üst öğesi içinde yatay olarak kaydırılabilmesini istiyorsanız, `` öğesinin üst öğesine `mdui-table` sınıfını ekleyebilirsiniz. Örneğin: ```html
``` # Design Tokens Design Tokens, tasarım sistemlerini yönetmek için kullanılan bir stratejidir. Tasarım sistemindeki tüm yeniden kullanılabilir öğeleri (örneğin renkler, yazı tipleri, boşluklar vb.) bağımsız değişkenler halinde soyutlayarak, tüm tasarım sistemi boyunca bunları birleşik bir şekilde yönetmenize ve uygulamanıza olanak tanır. mdui, Design Tokens'ı uygulamak için genel CSS Custom Property'leri kullanır. Bu, yalnızca CSS Custom Property'leri değiştirerek tüm mdui bileşenlerinin stillerini genel olarak değiştirebileceğiniz anlamına gelir. Aynı zamanda, kendi geliştirdiğiniz stiller için de öncelikle CSS Custom Property'lerini referans almanız önerilir. Bu, stillerinizin mdui bileşenlerinin stilleriyle tutarlı olmasını sağlamanın yanı sıra, dinamik renk düzenini değiştirirken kendi stillerinizin de renk düzeniyle senkronize olarak güncellenmesini sağlar. ## Renk {#color} mdui, Açık Mod ve Koyu Mod için ayrı ayrı birer grup CSS Custom Property sağlar. Açık Mod'da CSS Custom Property adı `--mdui-color-{name}-light` şeklindedir, burada `{name}` renk adıdır; Koyu Mod'da ise `--mdui-color-{name}-dark` şeklindedir. Ayrıca mdui, `--mdui-color-{name}` adında bir CSS Custom Property daha sağlar. Bu özellik, Açık Mod'da `--mdui-color-{name}-light` değerini, Koyu Mod'da ise `--mdui-color-{name}-dark` değerini referans alır. Bu sayede mevcut Açık Mod ve Koyu Mod'a göre rengi otomatik olarak değiştirebilir. Bazı renklerin CSS Custom Property'lerini değiştirmeniz gerekiyorsa, hem `--mdui-color-{name}-light` hem de `--mdui-color-{name}-dark` özelliklerini aynı anda değiştirmeniz gerekir. CSS Custom Property'leri okurken ise doğrudan `--mdui-color-{name}` özelliğini kullanın. CSS Custom Property'lerinin değeri, üç rengin RGB değerlerinin `,` ile ayrılmasıyla oluşur. Aşağıdaki örnek, renk CSS Custom Property'lerinin kullanımını göstermektedir: ```css /* primary renginin değerini değiştir */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* foo öğesinin arka plan rengini primary olarak ayarla */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* bar öğesinin arka plan rengini 0.8 opaklıkta primary olarak ayarla */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` Tamamen yeni bir renk şeması oluşturmanız gerekiyorsa, [`setColorScheme`](/tr/docs/2/functions/setColorScheme) fonksiyonunu kullanmanız önerilir. Bu fonksiyon, verdiğiniz bir renk değerine göre tam bir renk şeması oluşturabilir.
Renk Adı CSS Custom Property Varsayılan Değer Örnek
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## Köşe Yuvarlaklığı {#shape-corner} mdui, 7 farklı boyutta köşe yuvarlaklığı sağlar. Aşağıda bu köşe yuvarlaklığı CSS Custom Property'lerinin nasıl kullanılacağına dair bir örnek verilmiştir: ```css /* extra-small köşe yuvarlaklık boyutunu değiştir */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* foo öğesinin köşe yuvarlaklığını extra-small olarak ayarla */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | CSS Custom Property | Varsayılan Değer | Örnek | | --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## Tipografi {#typescale} mdui, Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small dahil olmak üzere 15 farklı metin stili sağlar. Aşağıda kullanım örneği verilmiştir: ```css /* Body large metin stilini değiştir */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* foo öğesinin metin stilini Body large olarak ayarla */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
CSS Custom Property Varsayılan Değer Örnek
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## Durum Katmanı Opaklığı {#state-layer} Bazı mdui bileşenleri, etkileşim sırasında üzerlerine yarı saydam bir katman ekler. Örneğin, [``](/tr/docs/2/components/button) bileşeni, fare üzerine gelindiğinde, odaklandığında, tıklandığında veya sürüklendiğinde yarı saydam bir katman belirir. Bu katmanların opaklığını CSS Custom Property'leri değiştirerek ayarlayabilirsiniz. Aşağıda kullanım örneği verilmiştir: ```css /* Durum katmanı opaklığını değiştir */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | CSS Custom Property | Varsayılan Değer | Örnek | | ---------------------------- | ------ | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## Yükselme Yüksekliği (Gölge) {#elevation} Bazı mdui bileşenleri, sayfadaki yükselme hissini simüle etmek için gölge efektine sahiptir. Bu efektleri CSS Custom Property'leri değiştirerek bileşenlerin gölge efektlerini ayarlayabilirsiniz. Aşağıda kullanım örneği verilmiştir: ```css /* level1 seviyesindeki gölgeyi değiştir */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* foo öğesinin gölgesini level1 olarak ayarla */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | CSS Custom Property | Varsayılan Değer | Örnek | | ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## Animasyon {#motion} mdui bileşenlerindeki animasyonların hız eğrisi ve süresi CSS Custom Property'leri aracılığıyla yapılandırılabilir. Aşağıda kullanım örneği verilmiştir: ```css /* standard hız eğrisini ve short1 süresini değiştir */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* foo öğesinin geçiş efektini standard hız eğrisi ve short1 süresi kullanacak şekilde ayarla */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
Tür CSS Custom Property Varsayılan Değer
Hız Eğrisi --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
Süre --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## Duyarlı Kırılma Noktaları {#breakpoint} mdui bir dizi duyarlı kırılma noktası sağlar. Bu kırılma noktaları CSS Custom Property'leri aracılığıyla yapılandırılabilir. Aşağıda kullanım örneği verilmiştir: ```css /* sm kırılma noktası değerini değiştir */ :root { --mdui-breakpoint-sm: 560px; } ``` Dikkat edilmesi gereken nokta, bu CSS Custom Property'leri CSS medya sorgularında kullanılamaz. Aşağıdaki örnek hatalı bir kullanımdır: ```css /* Hatalı kullanım. Medya sorgusunda CSS Custom Property kullanılamaz */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` JavaScript'te kırılma noktası kontrolü yapmanız gerekiyorsa, [`breakpoint`](/tr/docs/2/functions/breakpoint) fonksiyonunu kullanabilirsiniz. | CSS Custom Property | Varsayılan Değer | | ----------------------- | -------- | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # React ile Entegrasyon React'te mdui kullanırken, yalnızca [Kurulum](/tr/docs/2/getting-started/installation#npm) sayfasındaki adımları izleyerek kurulumu tamamlamanız yeterlidir. ## Önemli Notlar {#notes} React'te mdui kullanırken bazı sınırlamalar vardır. Bu sınırlamalar, React'te Web Bileşenleri (Web Components) kullanımına ait genel sınırlamalardır, mdui bileşen kütüphanesinin kendine özgü sınırlamaları değildir. ### Olay Bağlama {#event-binding} React özel olayları (custom events) desteklemediğinden, mdui bileşenleri tarafından sağlanan olayları kullanırken önce `ref` özniteliğini kullanarak bileşene bir referans almanız gerekir. Aşağıda, React'te mdui bileşen olaylarını kullanma örneği verilmiştir: ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log('anahtar değiştirildi'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### JSX TypeScript Tip Bildirimi {#jsx-typescript} TypeScript dosyalarında (.tsx) mdui kullanıyorsanız, TypeScript tip bildirimlerini eklemeniz gerekir. Projenizin .d.ts dosyasına mdui'nin tip bildirim dosyasını manuel olarak dahil etmeniz gerekir: ```ts /// ``` # Vue ile Entegrasyon Vue'da mdui kullanırken, öncelikle [Kurulum](/tr/docs/2/getting-started/installation#npm) sayfasındaki yönergeleri izleyerek kurulumu tamamlamanız ve ardından bazı gerekli yapılandırmaları yapmanız gerekir. ## Yapılandırma {#configuration} Vue'yu, mdui bileşenlerini Vue bileşenleri olarak ayrıştırmayacak şekilde yapılandırmanız gerekir. `vite.config` dosyasında `compilerOptions.isCustomElement` seçeneğini ayarlamanız yeterlidir: ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // mdui- ile başlayan tüm etiket adları mdui bileşenleridir isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` Bu yapılandırma hakkında daha fazla bilgi için [Vue resmi belgelerine](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) başvurabilirsiniz. ## Önemli Notlar {#notes} ### Çift Yönlü Veri Bağlama {#data-binding} mdui bileşenlerinde, çift yönlü veri bağlama için `v-model` kullanamazsınız. Veri bağlama ve güncellemeyi kendiniz yönetmeniz gerekir. Örneğin: ```html ``` ### eslint yapılandırması {#eslint} [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue) kullanıyorsanız, `.eslintrc.js` dosyasına aşağıdaki kuralı eklemeniz gerekir: ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Angular ile Entegrasyon Angular'da mdui'yi kullanırken, öncelikle [Kurulum](/tr/docs/2/getting-started/installation#npm) sayfasındaki yönergeleri izleyerek kurulumu tamamlamanız ve ardından bazı gerekli yapılandırmaları yapmanız gerekir. ## Yapılandırma {#configuration} İlk olarak, Angular'da Web Bileşenleri (Web Components) desteğini etkinleştirmemiz gerekiyor. Örnek aşağıda verilmiştir: ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` Yapılandırma tamamlandıktan sonra, Angular bileşen kodumuza mdui bileşenlerini dahil edip kullanabiliriz: ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Diyalog İçeriği
` }) export class DialogExampleComponent implements OnInit { // #dialog öğesine referans almak için @ViewChild kullanın @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // mdui bileşenine erişmek için nativeElement kullanın this.dialog?.nativeElement.open = true; } } ``` # Diğer Çerçevelerle Entegrasyon mdui, tarayıcılar tarafından yerel olarak desteklenen Web Bileşenleri (Web Components) kullanılarak geliştirilmiştir, bu nedenle tüm Web çerçevelerinde kullanılabilir. Aşağıda, yaygın çerçevelerde mdui kullanma yöntemleri listelenmiştir. ## Aurelia {#Aurelia} [Kurulum](/tr/docs/2/getting-started/installation#npm) sayfasındaki yönergeleri izleyerek kurulumu tamamladıktan sonra, ek bir paket kurmanız ve yapılandırmanız gerekir (yalnızca Aurelia 2 için geçerlidir): ```bash npm install aurelia-mdui --save ``` Ardından bunu uygulamanıza kaydedin: ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **Not** Lütfen hata raporlarını [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui) adresine gönderin. ## WebCell {#WebCell} [WebCell](https://web-cell.dev/) içinde mdui kullanırken, [Kurulum](/tr/docs/2/getting-started/installation#npm) sayfasındaki adımları izleyerek kurulumu tamamlamanız yeterlidir. Web Bileşenleri, TypeScript ve JSX desteği birinci sınıf özelliklerdir ve kutudan çıkar çıkmaz kullanıma hazırdır. Alternatif olarak, [resmi GitHub şablon deposunu](https://github.com/EasyWebApp/WebCell-mobile) kullanarak [tek tıklamayla yeni bir proje oluşturabilirsiniz](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp). # Avatar Bileşeni Avatar, bir kullanıcıyı veya öğeyi temsil etmek için kullanılır. Resimler, simgeler veya karakterler dahil olmak üzere çeşitli formları destekler. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/avatar.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### Resim Avatar {#example-src} Avatar olarak bir resim bağlantısı belirtmek için `src` özniteliğini kullanabilir veya varsayılan slot'ta bir `` öğesi sağlayabilirsiniz. ```html Resim avatar örneği ``` Resmin konteynır kutusuna nasıl sığacağını tanımlamak için `fit` özniteliğini kullanabilirsiniz. Bu, yerel [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) özelliğine benzer. ### Simge Avatar {#example-icon} Avatar olarak bir Material Icons simgesi belirtmek için `icon` özniteliğini kullanabilir veya varsayılan slot'ta bir simge öğesi sağlayabilirsiniz. ```html ``` ### Karakter Avatar {#example-char} Varsayılan slot'ta herhangi bir metni avatar olarak kullanabilirsiniz. ```html A ``` ## mdui-avatar API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
src src true string

Avatar resminin URL adresi.
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Resmin kapsayıcıya nasıl yerleştirileceği, yerel object-fit özelliği ile aynı şekilde çalışır. Olası değerler:

  • contain: Resmin orijinal en-boy oranını korur, içerik orantılı olarak ölçeklenir
  • cover: Resmin orijinal en-boy oranını korur, ancak içeriğin bir kısmı kırpılabilir
  • fill: Varsayılan değer, resmin orijinal en-boy oranını korumaz, içerik tüm kapsayıcıyı dolduracak şekilde gerilir
  • none: Resmin orijinal boyutlarını korur, içerik ölçeklenmez veya gerilmez
  • scale-down: Resmin orijinal en-boy oranını korur, içerik boyutu none veya contain'den küçük olanla aynıdır
icon icon true string

Avatar için Material Icons simge adı.
label label true string

Avatar için alternatif metin açıklaması.
### Slots
Ad Açıklama
Varsayılan

Özel avatar içeriği; harfler, karakterler, <img> öğesi, simgeler vb. olabilir.
### CSS Parts
Ad Açıklama
image

Resim avatar olarak kullanıldığında, bileşenin içindeki <img> öğesi.
icon

Simge avatar olarak kullanıldığında, bileşenin içindeki <mdui-icon> öğesi.
### CSS Custom Property
Ad Açıklama
--shape-corner

Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Rozet Bileşeni Badge Rozet, sayı veya durum göstergeleri gibi dinamik bilgileri görüntülemek için kullanılır. Metin veya sayı içerebilir. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/badge.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Badge } from 'mdui/components/badge.js'; ``` Kullanım örneği: ```html 12 ``` ## Örnekler {#examples} ### Şekil {#example-variant} Rozetin şeklini ayarlamak için `variant` özniteliğini kullanın. `variant` `large` olduğunda, büyük bir rozet görüntülenecektir. Görüntülenecek metni varsayılan slot'ta belirtebilirsiniz. ```html 99+ ``` ## mdui-badge API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true 'small' | 'large' 'large'

Rozetin şekli. Olası değerler:

  • small: Küçük rozet, metin içermez
  • large: Büyük rozet, metin içerir
### Slots
Ad Açıklama
Varsayılan

Rozette görüntülenen metin.
### CSS Custom Property
Ad Açıklama
--shape-corner

Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Alt Uygulama Çubuğu Bileşeni Alt uygulama çubuğu, öncelikle mobil cihazlarda sayfa alt kısmında gezinme öğelerini ve diğer önemli işlemleri görüntülemek için kullanılır. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/bottom-app-bar.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` Kullanım örneği: (Örnekteki `style="position: relative"` ifadesinin yalnızca gösterim amacıyla olduğunu, gerçek kullanımda bu stili kaldırmanız gerektiğini unutmayın.) ```html
``` **Önemli Notlar:** Bu bileşen varsayılan olarak `position: fixed` konumlandırmasını kullanır ve sayfa içeriğinin bu bileşen tarafından engellenmesini önlemek için `body` üzerine otomatik olarak `padding-bottom` stili ekler. Ancak aşağıdaki iki durumda varsayılan olarak `position: absolute` konumlandırması kullanılacaktır: 1. `scroll-target` özniteliği belirtildiğinde. Bu durumda `padding-bottom` stili, `scroll-target` öğesine eklenir. 2. [``](/tr/docs/2/components/layout) bileşeninin içinde bulunduğunda. Bu durumda `padding-bottom` stili eklenmez. ## Örnekler {#examples} ### Belirtilen Konteynır İçinde {#example-scroll-target} Varsayılan olarak, alt uygulama çubuğu geçerli pencereye göre sayfanın alt kısmında görüntülenir. Alt uygulama çubuğunu belirli bir konteynırın içine yerleştirmek istiyorsanız, `scroll-target` özniteliğini kullanabilirsiniz. Bu özniteliğin değeri, kaydırılabilir içeriğe sahip konteynırın CSS seçicisi veya DOM öğesi olmalıdır. Bu durumda, alt uygulama çubuğu ana öğeye göre konumlandırılacaktır (ana öğeye `position: relative; overflow: hidden` stillerini kendiniz eklemelisiniz). ```html
İçerik
``` ### Kaydırma Sırasında Gizleme {#example-scroll-behavior} `scroll-behavior` özniteliğini `hide` olarak ayarlamak, sayfa aşağı kaydırıldığında alt uygulama çubuğunu gizleyecek ve yukarı kaydırıldığında tekrar gösterecektir. Alt uygulama çubuğunun kaç piksel kaydırmadan sonra gizlenmeye başlayacağını ayarlamak için `scroll-threshold` özniteliğini kullanın. ```html
İçerik
``` ### Sabit Yüzen İşlem Butonu {#example-fab-detach} Alt uygulama çubuğu bir [yüzen işlem butonu (FAB)](/tr/docs/2/components/fab) içeriyorsa, `fab-detach` özniteliğini ekleyebilirsiniz. Bu sayede sayfa kaydırıldığında ve alt uygulama çubuğu gizlendiğinde, yüzen işlem butonu sayfanın sağ alt köşesinde kalmaya devam eder. ```html
``` ## mdui-bottom-app-bar API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
hide hide true boolean false

Gizlenip gizlenmeyeceği.
fab-detach fabDetach true boolean false

Alt uygulama çubuğundaki <mdui-fab> bileşeninin uygulama çubuğundan ayrılıp ayrılmayacağı. true ise, uygulama çubuğu gizlendikten sonra <mdui-fab> sayfada kalmaya devam eder.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Kaydırma davranışı. Olası değerler:

  • hide: Kaydırma sırasında gizlenir.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Kaydırma olaylarının izleneceği öğe. Değer bir CSS seçici, DOM öğesi veya JQ nesnesi olabilir. Varsayılan olarak window nesnesinin kaydırma olaylarını izler.
scroll-threshold scrollThreshold true number

Kaydırma davranışını tetiklemek için gereken kaydırma mesafesi. Birimi px'dir.
order order true number

Bu bileşenin <mdui-layout> içindeki yerleşim sırası. Küçükten büyüğe doğru sıralanır. Varsayılan değer 0'dır.
### Olaylar
Ad Açıklama
show

Gösterme başladığında tetiklenir. event.preventDefault() çağrılarak gösterim engellenebilir.
shown

Gösterme animasyonu tamamlandığında tetiklenir.
hide

Gizleme başladığında tetiklenir. event.preventDefault() çağrılarak gizleme engellenebilir.
hidden

Gizleme animasyonu tamamlandığında tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Alt uygulama çubuğunun içindeki öğeler.
### CSS Custom Property
Ad Açıklama
--shape-corner

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

Bileşenin CSS z-index değeri.
# Buton Bileşeni 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 {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/button.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Button } from 'mdui/components/button.js'; ``` Kullanım örneği: ```html Buton ``` ## Örnekler {#examples} ### Şekil {#example-variant} Butonun şeklini ayarlamak için `variant` özniteliğini kullanın. ```html Yükseltilmiş Dolu Tonlu Kenarlıklı Metin ``` ### Tam Genişlik {#example-full-width} `full-width` özniteliğini eklemek, butonun ana öğesinin tüm genişliğini kaplamasını sağlar. ```html Buton ``` ### Simge {#example-icon} `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. ```html Simge Slot ``` ### Bağlantı {#example-link} `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`. ```html Bağlantı ``` ### Devre Dışı ve yükleniyor durumu {#example-disabled} Butonu devre dışı bırakmak için `disabled` özniteliğini ekleyin; butona yükleniyor durumu eklemek için `loading` özniteliğini ekleyin. ```html Devre Dışı Yükleniyor Yükleniyor ve Devre Dışı ``` ## mdui-button API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true '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 true boolean false

Ana öğenin genişliğini doldurup doldurmayacağı.
icon icon true string

Soldaki Material Icons simge adı. slot="icon" ile de ayarlanabilir.
end-icon endIcon true string

Sağdaki Material Icons simge adı. slot="end-icon" ile de ayarlanabilir.
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
disabled disabled true boolean false

Devre dışı olup olmadığı.
loading loading true boolean false

Yüklenme durumunda olup olmadığı.
name name true string ''

Form verileriyle birlikte gönderilen buton adı.

Not: Bu özellik yalnızca href özelliği belirtilmediğinde geçerlidir.
value value true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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 Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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 Açıklama
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 Açıklama
Varsayılan

Butonun metni.
icon

Butonun solundaki öğe.
end-icon

Butonun sağındaki öğe.
### CSS Parts
Ad Açıklama
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 Açıklama
--shape-corner

Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Simge Butonu Bileşeni Simge butonları, genellikle ikincil işlemleri yürütmek için kullanılır. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/button-icon.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### Simge {#example-icon} Material Icons simge adını belirtmek için `icon` özniteliğini kullanın. Varsayılan slot aracılığıyla da simge öğesini belirtebilirsiniz. ```html ``` ### Şekil {#example-variant} Simge butonunun şeklini ayarlamak için `variant` özniteliğini kullanın. ```html ``` ### Seçilebilir {#example-selectable} Simge butonunun seçilebilir olması için `selectable` özniteliğini ekleyin. ```html ``` 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. ```html ``` Simge butonu seçildikten sonra, `selected` özniteliği `true` olur. Ayrıca `selected` özniteliğini ekleyerek simge butonunun varsayılan olarak seçili durumda olmasını sağlayabilirsiniz. ```html ``` ### Bağlantı {#example-link} `href` özniteliğini eklemek, simge butonunu bir bağlantıya dönüştürür. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: `download`, `target`, `rel`. ```html ``` ### Devre Dışı ve yükleniyor durumu {#example-disabled} Simge butonunu devre dışı bırakmak için `disabled` özniteliğini ekleyin; yükleniyor durumu eklemek için `loading` özniteliğini ekleyin. ```html ``` ## mdui-button-icon API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

Simge butonunun şekli. Olası değerler:

  • standard: En düşük öncelikli işlemler için uygundur
  • filled: Güçlü görsel etki, yüksek öncelikli işlemler için uygundur
  • tonal: Görsel etkisi filled ve outlined arasındadır, orta-yüksek öncelikli işlemler için uygundur
  • outlined: Orta öncelikli işlemler için uygundur
icon icon true string

Material Icons simge adı. Varsayılan slot ile de ayarlanabilir.
selected-icon selectedIcon true string

Seçili durumdaki Material Icons simge adı. slot="selected-icon" ile de ayarlanabilir.
selectable selectable true boolean false

Seçilebilir olup olmadığı.
selected selected true boolean false

Seçili olup olmadığı.
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
disabled disabled true boolean false

Devre dışı olup olmadığı.
loading loading true boolean false

Yüklenme durumunda olup olmadığı.
name name true string ''

Form verileriyle birlikte gönderilen buton adı.

Not: Bu özellik yalnızca href özelliği belirtilmediğinde geçerlidir.
value value true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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 Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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 Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
change

Seçim durumu değiştiğinde tetiklenir.
invalid

Form alanı doğrulaması başarısız olduğunda tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Simge öğesi.
selected-icon

Seçili durumda görüntülenen simge öğesi.
### CSS Parts
Ad Açıklama
button

İçteki <button> veya <a> öğesi.
icon

Seçili olmayan durumdaki simge.
selected-icon

Seçili durumdaki simge.
loading

Yüklenme durumundaki <mdui-circular-progress> öğesi.
### CSS Custom Property
Ad Açıklama
--shape-corner

Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Kart Bileşeni Kart, tek bir konuyla ilgili içerik ve işlemleri barındırmak için kullanılan çok yönlü bir bileşendir. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/card.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Card } from 'mdui/components/card.js'; ``` Kullanım örneği: ```html Kart ``` ## Örnekler {#examples} ### Şekil {#example-variant} Kartın şeklini ayarlamak için `variant` özniteliğini kullanın. ```html ``` ### Tıklanabilir {#example-clickable} Kartı tıklanabilir yapmak için `clickable` özniteliğini ekleyin. Bu, fareyle üzerine gelme efekti ve tıklama dalgası efekti ekleyecektir. ```html ``` ### Bağlantı {#example-link} `href` özniteliğini eklemek, kartı bir bağlantıya dönüştürür. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: `download`, `target`, `rel`. ```html ``` ### Devre Dışı Durumu {#example-disabled} Kartı devre dışı bırakmak için `disabled` özniteliğini ekleyin. ```html ``` ## mdui-card API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

Kartın şekli. Olası değerler:

  • elevated: Gölgeli kart, arka plandan görsel ayrımı yüksektir
  • filled: Dolgu renkli kart, arka plandan görsel ayrımı düşüktür
  • outlined: Kenarlıklı kart, arka plandan görsel ayrımı en yüksektir
clickable clickable true boolean false

Tıklanabilir olup olmadığı. true olduğunda, kart fare ile üzerine gelme efekti ve tıklama dalgası efekti gösterir.
disabled disabled true boolean false

Devre dışı olup olmadığı.
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Kartın içeriği.
### CSS Custom Property
Ad Açıklama
--shape-corner

Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Onay Kutusu Bileşeni Onay kutuları, kullanıcının bir dizi seçenekten bir veya daha fazlasını seçmesine veya tek bir seçeneğin açık/kapalı durumunu değiştirmesine olanak tanır. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/checkbox.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` Kullanım örneği: ```html Onay Kutusu ``` ## Örnekler {#examples} ### Seçili Durumu {#example-checked} Onay kutusu seçiliyken, `checked` özniteliğinin değeri `true` olur. `checked` özniteliğini eklemek, onay kutusunun varsayılan olarak seçili durumda olmasını sağlar. ```html Onay Kutusu ``` ### Devre Dışı Durumu {#example-disabled} Onay kutusunu devre dışı bırakmak için `disabled` özniteliğini ekleyin. ```html Onay Kutusu Onay Kutusu ``` ### Belirsiz Durumu {#example-indeterminate} Onay kutusunun belirsiz durumda olduğunu belirtmek için `indeterminate` özniteliğini ekleyin. ```html Onay Kutusu ``` ### Simge {#example-icon} `unchecked-icon`, `checked-icon`, `indeterminate-icon` özniteliklerini ayarlayarak, sırasıyla seçilmemiş, seçili ve belirsiz durumlardaki onay kutusunun Material Icons simgelerini belirleyebilirsiniz. Ayrıca `unchecked-icon`, `checked-icon`, `indeterminate-icon` slot'ları aracılığıyla da ayarlayabilirsiniz. ```html Onay Kutusu Onay Kutusu
Onay Kutusu Onay Kutusu ``` ## mdui-checkbox API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
disabled disabled true boolean false

Devre dışı durumda olup olmadığı.
checked checked true boolean false

Seçili durumda olup olmadığı.
undefined defaultChecked false boolean false

Varsayılan seçili durumu. Form sıfırlandığında bu duruma geri döner. Bu özellik yalnızca JavaScript özelliği ile ayarlanabilir.
indeterminate indeterminate true boolean false

Belirsiz durumda olup olmadığı.
required required true boolean false

Form gönderilirken bu onay kutusunun işaretlenmesinin zorunlu olup olmadığı.
form form true 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 true string ''

Form verileriyle birlikte gönderilen onay kutusu adı.
value value true string 'on'

Form verileriyle birlikte gönderilen onay kutusu değeri.
unchecked-icon uncheckedIcon true string

Seçili olmayan durumdaki Material Icons simge adı. slot="unchecked-icon" ile de ayarlanabilir.
checked-icon checkedIcon true string

Seçili durumdaki Material Icons simge adı. slot="checked-icon" ile de ayarlanabilir.
indeterminate-icon indeterminateIcon true string

Belirsiz durumdaki Material Icons simge adı. slot="indeterminate-icon" ile de ayarlanabilir.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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.
autofocus autofocus true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
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.
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
change

Seçim durumu değiştiğinde tetiklenir.
input

Seçim durumu değiştiğinde tetiklenir.
invalid

Form alanı doğrulaması başarısız olduğunda tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Onay kutusu metni.
unchecked-icon

Seçili olmayan durumdaki simge.
checked-icon

Seçili durumdaki simge.
indeterminate-icon

Belirsiz durumdaki simge.
### CSS Parts
Ad Açıklama
control

Soldaki simge alanı.
unchecked-icon

Seçili olmayan durumdaki simge.
checked-icon

Seçili durumdaki simge.
indeterminate-icon

Belirsiz durumdaki simge.
label

Onay kutusu metni.
# Chip Bileşeni 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 {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/chip.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Chip } from 'mdui/components/chip.js'; ``` Kullanım örneği: ```html Chip ``` ## Örnekler {#examples} ### Şekil {#example-variant} Chip'in şeklini ayarlamak için `variant` özniteliğini kullanın. Chip'lerin kullanım amacına göre seçebileceğiniz 4 şekli vardır: - `assist`: Geçerli bağlamla ilgili yardımcı işlemleri görüntülemek için kullanılır. Örneğin, bir sipariş sayfasında paylaşma, favorilere ekleme gibi işlevler sağlamak. - `filter`: İçeriği filtrelemek için kullanılır. Örneğin, bir 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ının işlemlerini kolaylaştırmak için dinamik olarak oluşturulan öneri bilgilerini sağlamak için kullanılır. Örneğin, bir sohbet uygulamasında kullanıcının göndermek isteyebileceği bilgileri tahmin edip seçenek olarak sunmak. ```html Yardımcı Filtrele Girdi Öneri ``` ### Gölge {#example-elevated} `elevated` özniteliğini eklemek, chip'in gölgeye sahip olmasını sağlar. ```html Chip ``` ### Simge {#example-icon} `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. ```html Simge Bitiş Simgesi Slot ``` ### Bağlantı {#example-link} `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`. ```html Bağlantı ``` ### Devre Dışı ve yükleniyor durumu {#example-disabled} Chip'i devre dışı bırakmak için `disabled` özniteliğini ekleyin; chip'e yükleniyor durumu eklemek için `loading` özniteliğini ekleyin. ```html Devre Dışı Yükleniyor Yükleniyor ve Devre Dışı ``` ### Seçilebilir {#example-selectable} Chip'in seçilebilir olması için `selectable` özniteliğini ekleyin. ```html Chip ``` 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. ```html Chip Chip ``` 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. ```html Chip ``` ### Silinebilir {#example-deletable} `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. ```html Chip Chip Chip ``` ## mdui-chip API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true '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 true boolean false

Gölge gösterilip gösterilmeyeceği.
selectable selectable true boolean false

Seçilebilir olup olmadığı.
selected selected true boolean false

Seçili olup olmadığı.
deletable deletable true boolean false

Silinebilir olup olmadığı. true olduğunda, chip'in sağ tarafında bir silme simgesi görüntülenir.
icon icon true string

Soldaki Material Icons simge adı. slot="icon" ile de ayarlanabilir.
selected-icon selectedIcon true string

Seçili durumda soldaki Material Icons simge adı. slot="selected-icon" ile de ayarlanabilir.
end-icon endIcon true string

Sağdaki Material Icons simge adı. slot="end-icon" ile de ayarlanabilir.
delete-icon deleteIcon true string

Silinebilir durumdayken sağdaki silme simgesi için Material Icons simge adı. slot="delete-icon" ile de ayarlanabilir.
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
disabled disabled true boolean false

Devre dışı olup olmadığı.
loading loading true boolean false

Yüklenme durumunda olup olmadığı.
name name true string ''

Form verileriyle birlikte gönderilen buton adı.

Not: Bu özellik yalnızca href özelliği belirtilmediğinde geçerlidir.
value value true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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 Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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 Açıklama
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 Açıklama
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 Açıklama
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 Açıklama
--shape-corner

Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Dairesel İlerleme Bileşeni Dairesel ilerleme, veri yükleme veya form gönderme gibi görevlerin ilerlemesini göstermek için kullanılan dairesel bir bileşendir. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/circular-progress.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### Sabit İlerleme {#example-value} Dairesel ilerleme varsayılan olarak belirsiz bir ilerlemeye sahiptir. Geçerli ilerlemeyi `value` özniteliği aracılığıyla ayarlayabilirsiniz. Varsayılan maksimum ilerleme değeri `1`'dir. ```html ``` İlerlemenin maksimum değerini `max` özniteliği aracılığıyla ayarlayabilirsiniz. ```html ``` ## mdui-circular-progress API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
max max true number 1

İlerleme göstergesinin maksimum değeri. Varsayılan 1'dir.
value value false number

İlerleme göstergesinin geçerli değeri. Bu değer belirtilmezse, belirsiz durumda görüntülenir.
# Daraltılabilir Panel Bileşeni Daraltılabilir panel bileşeni, karmaşık içerik alanlarını gruplandırmak ve gizlemek için kullanılır, böylece sayfanın düzenli kalması sağlanır. Lütfen unutmayın ki, daraltılabilir panel bileşeninin kendisi herhangi bir stil içermez, stilleri kendiniz eklemeniz veya diğer bileşenlerle birlikte kullanmanız gerekir. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` Kullanım örneği: ```html ilk içerik ikinci içerik ``` ## Örnekler {#examples} ### Panel Başlığı ve İçeriği {#example-header} `` bileşeninin `header` özniteliği aracılığıyla panel başlık metnini ayarlayabilirsiniz. Ayrıca panel başlık öğesini belirtmek için `header` slot'unu da kullanabilirsiniz. Bileşenin varsayılan slot'u panel içeriği içindir. ```html Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
``` ### Akordeon Modu {#example-accordion} `` bileşenine `accordion` özniteliğini eklemek akordeon modunu etkinleştirir. Bu modda, bir seferde yalnızca bir panel açık durumda olabilir. ```html Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
``` ### Aktif Panel(ler)i Ayarlama {#example-value} `` bileşeninin `value` özniteliği aracılığıyla, geçerli açık olan panel(ler)i alabilir veya açılmasını istediğiniz panel(ler)i ayarlayabilirsiniz. Akordeon modunda, `value` özniteliğinin değeri bir string'dir. Bu özniteliği HTML özniteliği veya JavaScript özelliği olarak kullanabilirsiniz. Akordeon olmayan modda, `value` özniteliğinin değeri bir dizidir ve bu durumda bu değeri yalnızca JavaScript özelliği aracılığıyla kullanabilirsiniz. ```html Akordeon Modu Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
Akordeon Olmayan Mod Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
``` ### Devre Dışı Durumu {#example-disabled} `` bileşenine `disabled` özniteliğini ekleyerek tüm daraltılabilir panel grubunu devre dışı bırakabilirsiniz. Benzer şekilde, `` bileşenine `disabled` özniteliğini ekleyerek belirli bir paneli devre dışı bırakabilirsiniz. ```html Tümü Devre Dışı Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
İlk Panel Devre Dışı Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
``` ### Daraltmayı Tetikleyen Öğe {#example-trigger} Varsayılan olarak, panel başlık alanının herhangi bir yerine tıklamak daraltma işlemini tetikler. Daraltmayı tetikleyecek öğeyi belirtmek için `` bileşeninin `trigger` özniteliğini kullanabilirsiniz. `trigger` özniteliği bir CSS seçicisi veya DOM öğesi olabilir. ```html Öğe 1
Öğe 1 - alt öğe
``` ## mdui-collapse-item API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
value value true string

Bu daraltılabilir panel öğesinin değeri.
header header true string

Bu daraltılabilir panel öğesinin başlık metni.
disabled disabled true boolean false

Bu daraltılabilir panel öğesinin devre dışı olup olmadığı.
trigger trigger false string | HTMLElement | JQ<HTMLElement>

Bu öğeye tıklandığında daraltma tetiklenir. Değer bir CSS seçici, DOM öğesi veya JQ nesnesi olabilir. Varsayılan olarak tüm başlık alanına tıklanarak tetiklenir.
### Olaylar
Ad Açıklama
open

Açılma başladığında tetiklenir.
opened

Açılma animasyonu tamamlandığında tetiklenir.
close

Kapanma başladığında tetiklenir.
closed

Kapanma animasyonu tamamlandığında tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Daraltılabilir panel öğesinin gövde içeriği.
header

Daraltılabilir panel öğesinin başlık içeriği.
### CSS Parts
Ad Açıklama
header

Daraltılabilir panelin başlık içeriği.
body

Daraltılabilir panelin gövde içeriği.
## mdui-collapse API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
accordion accordion true boolean false

Akordeon modunun etkinleştirilip etkinleştirilmeyeceği.
value value false string | string[]

Şu anda genişletilmiş olan <mdui-collapse-item> değeri.

Not: Bu özelliğin HTML özelliği her zaman bir dizedir ve yalnızca accordion true olduğunda başlangıç değeri ayarlanabilir; bu özelliğin JavaScript özellik değeri accordion true olduğunda bir dize, accordion false olduğunda bir dize dizisidir. Bu nedenle, accordion false olduğunda, bu değer yalnızca JavaScript özellik değeri değiştirilerek değiştirilebilir.
disabled disabled true boolean false

Bu daraltılabilir panelin devre dışı olup olmadığı.
### Olaylar
Ad Açıklama
change

Şu anda genişletilmiş daraltılabilir panel öğesi değiştiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

<mdui-collapse-item> bileşeni.
# Diyalog Bileşeni Diyalog, kullanıcının işlem akışında önemli bildirimler sağlamak için kullanılır. Bu bileşeni doğrudan kullanmanın yanı sıra, mdui ayrıca dört fonksiyon sunar: [`mdui.dialog`](/tr/docs/2/functions/dialog), [`mdui.alert`](/tr/docs/2/functions/alert), [`mdui.confirm`](/tr/docs/2/functions/confirm), [`mdui.prompt`](/tr/docs/2/functions/prompt). Bu fonksiyonlar, Dialog bileşeninin kullanımını kolaylaştırabilir. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/dialog.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` Kullanım örneği: ```html Diyalog Kapat Diyalogu Aç ``` ## Örnekler {#examples} ### Kaplamaya Tıklayarak Kapatma {#example-close-on-overlay-click} `close-on-overlay-click` özniteliğini ekleyin, kaplama katmanına tıklandığında diyalog kapanacaktır. ```html Diyalog Diyalogu Aç ``` ### ESC Tuşuna Basarak Kapatma {#example-close-on-esc} `close-on-esc` özniteliğini ekleyin, ESC tuşuna basıldığında diyalog kapanacaktır. ```html Diyalog Diyalogu Aç ``` ### Tam Ekran {#example-fullscreen} `fullscreen` özniteliğini ekleyin, diyalog tam ekran olarak görüntülenecektir. ```html Diyalog Kapat Diyalogu Aç ``` ### Simge {#example-icon} `icon` özniteliğini ayarlayın, diyalogun üst kısmına bir Material Icons simgesi eklenecektir. ```html Diyalog Diyalogu Aç ``` Ayrıca `icon` slot'u aracılığıyla diyalogun üst kısmına bir simge öğesi de ekleyebilirsiniz. ```html Diyalog Diyalogu Aç ``` ### Başlık ve Açıklama {#example-headline} Diyalogun başlığını ve açıklamasını `headline` ve `description` öznitelikleri ile ayarlayın. ```html Diyalogu Aç ``` Ayrıca `headline` ve `description` slot'ları aracılığıyla diyalogun başlık öğesini ve açıklama öğesini de ayarlayabilirsiniz. ```html Seçilen resimler silinsin mi? Resimler, hesabınızdan ve tüm senkronize cihazlardan kalıcı olarak kaldırılacaktır. Diyalogu Aç ``` ### Alt İşlem Butonları {#example-action} Alt işlem butonlarını `action` slot'u aracılığıyla ekleyebilirsiniz. ```html İptal Sil Diyalogu Aç ``` `stacked-actions` özniteliğini ekleyin, alt işlem butonları dikey olarak sıralanacaktır. ```html Hız artırmayı aç Hayır, teşekkürler Diyalogu Aç ``` ### Üst İçerik {#example-header} Diyalogun üst kısmındaki içeriği `header` slot'u aracılığıyla ayarlayabilirsiniz. ```html Başlık Kaydet
Diyalogu Aç ``` ## mdui-dialog API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
icon icon true string

Üstteki Material Icons simge adı. slot="icon" ile de ayarlanabilir.
headline headline true string

Başlık. slot="headline" ile de ayarlanabilir.
description description true string

Başlığın altındaki metin. slot="description" ile de ayarlanabilir.
open open true boolean false

Diyaloğun açık olup olmadığı.
fullscreen fullscreen true boolean false

Diyaloğun tam ekran görüntülenip görüntülenmeyeceği.
close-on-esc closeOnEsc true boolean false

ESC tuşuna basılarak diyaloğun kapatılmasına izin verilip verilmeyeceği.
close-on-overlay-click closeOnOverlayClick true boolean false

Kaplama katmanına tıklanarak diyaloğun kapatılmasına izin verilip verilmeyeceği.
stacked-actions stackedActions true boolean false

Alttaki işlem butonlarının dikey olarak düzenlenip düzenlenmeyeceği.
### Olaylar
Ad Açıklama
open

Diyalog açılmaya başladığında tetiklenir. event.preventDefault() çağrılarak diyaloğun açılması engellenebilir.
opened

Diyalog açılma animasyonu tamamlandığında tetiklenir.
close

Diyalog kapanmaya başladığında tetiklenir. event.preventDefault() çağrılarak diyaloğun kapanması engellenebilir.
closed

Diyalog kapanma animasyonu tamamlandığında tetiklenir.
overlay-click

Kaplama katmanına tıklandığında tetiklenir.
### Slots
Ad Açıklama
header

Üst öğe, varsayılan olarak icon slotu ve headline slotunu içerir.
icon

Üst simge.
headline

Üst başlık.
description

Başlığın altındaki metin.
Varsayılan

Diyalog gövde içeriği.
action

Alt işlem çubuğundaki öğeler.
### CSS Parts
Ad Açıklama
overlay

Kaplama katmanı.
panel

Diyalog kabı.
header

Diyalog başlık kısmı; simge ve başlığı içerir.
icon

Üst simge, başlık kısmında bulunur.
headline

Üst başlık, başlık kısmında bulunur.
body

Diyalog gövde kısmı.
description

Alt metin kısmı, gövde kısmında bulunur.
action

Alt işlem butonu.
### CSS Custom Property
Ad Açıklama
--shape-corner

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

Bileşenin CSS z-index değeri.
# Ayırıcı Bileşeni Ayırıcı, listeler ve konteynırlar içindeki içeriği gruplandırmak için kullanılan ince bir çizgidir. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/divider.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Divider } from 'mdui/components/divider.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### Dikey Ayırıcı {#example-vertical} `vertical` özniteliğini ekleyin, ayırıcı dikey olarak görüntülenecektir. ```html
``` ### Sol Girinti {#example-inset} `inset` özniteliğini ekleyin, ayırıcı soldan girintili olacaktır. Bu genellikle, ayırıcıyı listedeki sol metinle hizalamak için kullanılır. ```html Öğe 1 Öğe 2 ``` ### Çift Taraflı Girinti {#example-middle} `middle` özniteliğini ekleyin, ayırıcı her iki taraftan girintili olacaktır. ```html Öğe 1 Öğe 2 ``` ## mdui-divider API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
vertical vertical true boolean false

Dikey ayırıcı çizgi olup olmadığı.
inset inset true boolean false

Sol taraftan girinti yapılıp yapılmayacağı.
middle middle true boolean false

Her iki taraftan da girinti yapılıp yapılmayacağı.
# Açılır Menü Bileşeni Açılır menü bileşeni, belirli içeriği açılır bir kontrol içinde göstermek için kullanılır ve genellikle menü bileşeniyle birlikte kullanılır. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/dropdown.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` Kullanım örneği: ```html açılır menüyü aç Öğe 1 Öğe 2 ``` ## Örnekler {#examples} ### Devre Dışı Durumu {#example-disabled} Açılır menü bileşenini devre dışı bırakmak için `disabled` özniteliğini ekleyin. ```html açılır menüyü aç Öğe 1 Öğe 2 ``` ### Açılma Konumu {#example-placement} Açılır menü bileşeninin açılma konumunu ayarlamak için `placement` özniteliğini kullanın. ```html açılır menüyü aç Öğe 1 Öğe 2 ``` ### Tetikleme Şekli {#example-trigger} Açılır menü bileşeninin tetikleme şeklini ayarlamak için `trigger` özniteliğini kullanın. ```html açılır menüyü aç Öğe 1 Öğe 2 ``` ### İmleç Konumunda Açma {#example-open-on-pointer} `open-on-pointer` özniteliğini ekleyin, açılır menü bileşeni imleç konumunda açılacaktır. Genellikle `trigger="contextmenu"` ile birlikte kullanılarak fare sağ tuşuyla menü açılmasını sağlar. ```html Menüyü açmak için bu alanda fare sağ tuşunu kullanın Öğe 1 Öğe 2 ``` ### Menü Açık Kalma Durumu {#example-stay-open-on-click} Açılır menü içinde menü kullanırken, varsayılan olarak bir menü öğesine tıklamak açılır menüyü otomatik olarak kapatır. `stay-open-on-click` özniteliğini ekleyerek, bir menü öğesine tıklandığında açılır menünün açık kalmasını sağlayabilirsiniz. ```html açılır menüyü aç Öğe 1 Öğe 2 ``` ### Açma/Kapama Gecikmesi {#example-delay} `trigger="hover"` ayarlandığında, `open-delay` ve `close-delay` öznitelikleri aracılığıyla açma ve kapama gecikmesini ayarlayabilirsiniz. ```html açılır menüyü aç Öğe 1 Öğe 2 ``` ## mdui-dropdown API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
open open true boolean false

Açılır menü bileşeninin açık olup olmadığı.
disabled disabled true boolean false

Açılır menü bileşeninin devre dışı olup olmadığı.
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

Açılır menü bileşeninin tetiklenme şekli. Birden fazla değer boşlukla ayrılarak desteklenir. Olası değerler:

  • click: Tıklama ile tetiklenir
  • hover: Fareyle üzerine gelme ile tetiklenir
  • focus: Odaklanma ile tetiklenir
  • contextmenu: Fare sağ tıklama veya dokunarak uzun basma ile tetiklenir
  • manual: Açılır menü bileşeni yalnızca programlama yoluyla açılıp kapatılabilir, başka tetikleme şekli belirtilemez
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Açılır menü içeriğinin konumu. Olası değerler:

  • auto: Konumu otomatik olarak belirler
  • top-start: Üstte sola hizalanmış
  • top: Üstte ortalanmış
  • top-end: Üstte sağa hizalanmış
  • bottom-start: Altta sola hizalanmış
  • bottom: Altta ortalanmış
  • bottom-end: Altta sağa hizalanmış
  • left-start: Solda üste hizalanmış
  • left: Solda ortalanmış
  • left-end: Solda alta hizalanmış
  • right-start: Sağda üste hizalanmış
  • right: Sağda ortalanmış
  • right-end: Sağda alta hizalanmış
stay-open-on-click stayOpenOnClick true boolean false

<mdui-menu-item> öğesine tıklandıktan sonra açılır menü bileşeninin açık kalıp kalmayacağı.
open-delay openDelay true number 150

Fareyle üzerine gelerek açılır menü bileşenini açma gecikmesi, milisaniye cinsinden.
close-delay closeDelay true number 150

Fareyle üzerine gelerek açılır menü bileşenini kapatma gecikmesi, milisaniye cinsinden.
open-on-pointer openOnPointer true boolean false

Açılır menü bileşeninin, tetiklendiği imleç konumunda açılıp açılmayacağı. Genellikle fare sağ tıklama menüsünü açmak için kullanılır.
### Olaylar
Ad Açıklama
open

Açılır menü bileşeni açılmaya başladığında tetiklenir. event.preventDefault() çağrılarak açılması engellenebilir.
opened

Açılır menü bileşeni açılma animasyonu tamamlandığında tetiklenir.
close

Açılır menü bileşeni kapanmaya başladığında tetiklenir. event.preventDefault() çağrılarak kapanması engellenebilir.
closed

Açılır menü bileşeni kapanma animasyonu tamamlandığında tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Açılır menü bileşeninin içeriği.
trigger

Açılır menü bileşenini tetikleyen öğe, örneğin <mdui-button> öğesi.
### CSS Parts
Ad Açıklama
trigger

Açılır menü bileşenini tetikleyen öğelerin kabı, yani trigger slotunun kabı.
panel

Açılır menü bileşeni içeriğinin kabı.
### CSS Custom Property
Ad Açıklama
--z-index

Bileşenin CSS z-index değeri.
# Yüzen İşlem Butonu Bileşeni Yüzen işlem butonu (FAB), sayfadaki ana işlemi vurgulamak için kullanılır ve kritik işlemleri kolay erişilebilir bir konuma yerleştirir. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/fab.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Fab } from 'mdui/components/fab.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### Simge {#example-icon} Material Icons simge adını belirtmek için `icon` özniteliğini kullanın. Ayrıca `icon` slot'u aracılığıyla da simge öğesini belirtebilirsiniz. ```html ``` ### Genişletilmiş Durum {#example-extended} `extended` özniteliğini ekleyerek FAB'ı genişletilmiş duruma ayarlayabilirsiniz. Bu durumda, varsayılan slot içindeki metin görüntülenecektir. ```html Oluştur ``` ### Şekil {#example-variant} FAB'ın şeklini ayarlamak için `variant` özniteliğini kullanın. ```html ``` ### Boyut {#example-size} FAB'ın boyutunu ayarlamak için `size` özniteliğini kullanın. ```html ``` ### Bağlantı {#example-link} `href` özniteliğini ekleyerek FAB'ı bir bağlantıya dönüştürebilirsiniz. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: `download`, `target`, `rel`. ```html ``` ### Devre Dışı ve yükleniyor durumu {#example-disabled} FAB'ı devre dışı bırakmak için `disabled` özniteliğini ekleyin; FAB'a yükleniyor durumu eklemek için `loading` özniteliğini ekleyin. ```html ``` ## mdui-fab API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

FAB'ın şekli. Bu bileşenin farklı şekilleri yalnızca renk olarak farklılık gösterir. Olası değerler:

  • primary: Birincil kap arka plan rengini kullanır
  • surface: Yüzey kap yüksek arka plan rengini kullanır
  • secondary: İkincil kap arka plan rengini kullanır
  • tertiary: Üçüncül kap arka plan rengini kullanır
size size true 'normal' | 'small' | 'large' 'normal'

FAB'ın boyutu. Olası değerler:

  • normal: Normal boyutlu FAB
  • small: Küçük FAB
  • large: Büyük FAB
icon icon true string

Material Icons simge adı. slot="icon" ile de ayarlanabilir.
extended extended true boolean false

Genişletilmiş durumda olup olmadığı.
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
disabled disabled true boolean false

Devre dışı olup olmadığı.
loading loading true boolean false

Yüklenme durumunda olup olmadığı.
name name true string ''

Form verileriyle birlikte gönderilen buton adı.

Not: Bu özellik yalnızca href özelliği belirtilmediğinde geçerlidir.
value value true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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 Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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 Açıklama
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 Açıklama
Varsayılan

Metin.
icon

Simge.
### CSS Parts
Ad Açıklama
button

İçteki <button> veya <a> öğesi.
label

Sağdaki metin.
icon

Soldaki simge.
loading

Yüklenme durumundaki <mdui-circular-progress> öğesi.
### CSS Custom Property
Ad Açıklama
--shape-corner-small

size="small" olduğunda bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
--shape-corner-normal

size="normal" olduğunda bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
--shape-corner-large

size="large" olduğunda bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Simge Bileşeni Simge, yaygın işlemleri temsil etmek için kullanılır. Material Icons simgelerini ve SVG simgelerini destekler. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/icon.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Icon } from 'mdui/components/icon.js'; ``` Kullanım örneği: ```html ``` ### Material Icons Simgelerini Kullanma {#usage-material-icons} Bu bileşen aracılığıyla Material Icons simgelerini kullanmak için, Material Icons CSS dosyasını ayrıca içe aktarmanız gerekir. Material Icons'un 5 farklı çeşidi vardır: Filled, Outlined, Rounded, Sharp, Two Tone. Kullanacağınız simge çeşidine göre ilgili CSS dosyasını içe aktarın: ```html ``` Bileşeni kullanırken, `name` özniteliğine simge adını girin ve simge çeşidi adını sonek olarak ekleyin (Dolu çeşidi için sonek eklenmez). Aşağıda `delete` simgesinin 5 çeşidinin kullanımı verilmiştir: ```html ``` Sayfanın alt kısmındaki [Material Icons simge arama](/tr/docs/2/components/icon#search) aracında simgeleri arayabilir ve kullanmak istediğiniz simgeye tıklayarak simge kodunu panoya kopyalayabilirsiniz. Ayrıca mdui, [`@mdui/icons`](/tr/docs/2/libraries/icons) adında bağımsız bir paket sunar. Bu paketteki her simge bileşeni ayrı bir dosyadır, böylece tüm simge kütüphanesini içe aktarmadan ihtiyacınız olan simge bileşenlerini içe aktarabilirsiniz. ### SVG Simgelerini Kullanma {#usage-svg} Bu bileşen, simge içeriği olarak SVG simgelerinin kullanımını da destekler. Bileşenin `src` özniteliği aracılığıyla SVG simgesinin bağlantısını iletebilirsiniz. Örneğin: ```html ``` Ayrıca bileşenin varsayılan slot'una SVG içeriğini de iletebilirsiniz. Örneğin: ```html ``` ## Örnekler {#examples} ### Renk Ayarlama {#example-color} Simge rengini değiştirmek için `` öğesinin veya ana öğesinin `color` CSS stilini ayarlayın. ```html ``` ### Boyut Ayarlama {#example-size} Simge boyutunu değiştirmek için `` öğesinin veya ana öğesinin `font-size` CSS stilini ayarlayın. ```html ``` ## mdui-icon API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
name name true string

Material Icons simge adı.
src src true string

SVG simgesinin yolu.
### Slots
Ad Açıklama
Varsayılan

svg simgesinin içeriği.
# Layout Bileşeni Layout bileşeni, karmaşık sayfa düzenleri oluşturmak için esnek bir düzen sistemi sağlar. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **Giriş:** Düzen sistemi, dıştan içe doğru bir prensibi takip eder. Her düzen bileşeni (`` bileşeni), dört yönden (üst, alt, sol, sağ) birinde yer kaplar. Sonraki düzen bileşenleri, kalan alanda yer kaplamaya devam eder. Aşağıdaki bileşenler doğrudan `` bileşeninden türetilmiştir ve bu nedenle düzen bileşenleri olarak da kullanılabilirler: - [``](/tr/docs/2/components/navigation-bar) - [``](/tr/docs/2/components/navigation-drawer) - [``](/tr/docs/2/components/navigation-rail) - [``](/tr/docs/2/components/bottom-app-bar) - [``](/tr/docs/2/components/top-app-bar) Düzen sisteminin son kısmı `` bileşenidir. Bu bileşen kalan alanı kaplar. Sayfa içeriğinizi bu bileşenin içine yerleştirebilirsiniz. ## Örnekler {#examples} ### Düzen Bileşenlerinin Sırası {#layout-default-order} Varsayılan olarak, düzen bileşenleri koddaki görünme sıralarına göre yer kaplar. Bu kavramı aşağıdaki iki örnekle anlayabilirsiniz. Bu örneklerde [``](/tr/docs/2/components/top-app-bar) ve [``](/tr/docs/2/components/navigation-drawer) koddaki görünme sıraları farklıdır.

Lütfen bu örneği büyük ekranlı bir monitörde görüntüleyin.

```html Üst Uygulama Çubuğu Gezinme çekmecesi Ana Alan ``` ```html Gezinme çekmecesi Üst Uygulama Çubuğu Ana Alan ``` Görüldüğü gibi, [``](/tr/docs/2/components/top-app-bar) bileşenini [``](/tr/docs/2/components/navigation-drawer) bileşeninden önce yerleştirmek, [``](/tr/docs/2/components/top-app-bar) bileşeninin sayfanın tüm genişliğini kaplamasına, [``](/tr/docs/2/components/navigation-drawer) bileşeninin ise yalnızca kalan alanda yüksekliği kaplamasına neden olur. İkisinin sırasını değiştirmek, [``](/tr/docs/2/components/navigation-drawer) bileşeninin sayfanın tüm yüksekliğini kaplamasına, [``](/tr/docs/2/components/top-app-bar) bileşeninin ise yalnızca kalan alanda genişliği kaplamasına neden olur. ### Düzen Bileşenlerinin Konumu {#example-placement} `` bileşenleri için, düzendeki üst, alt, sol, sağ konumunu belirtmek üzere `placement` özniteliğini kullanabilirsiniz. [``](/tr/docs/2/components/navigation-drawer) ve [``](/tr/docs/2/components/navigation-rail) bileşenleri için de düzendeki sol, sağ konumunu belirtmek üzere `placement` özniteliğini kullanabilirsiniz. Aşağıdaki örnekte, iki `` bileşenini uygulamanın iki tarafına yerleştiriyoruz. ```html Üst Uygulama Çubuğu Layout Öğesi Layout Öğesi Ana Alan ``` ### Özel Düzen Bileşeni Sırası {#example-order} Çoğu durumda, istediğiniz düzeni elde etmek için düzen bileşenlerini sırayla yerleştirmeniz yeterlidir. Ayrıca, düzen sırasını belirtmek için `order` özniteliğini de kullanabilirsiniz. Sistem, bileşenleri `order` değerine göre küçükten büyüğe doğru sıralar; `order` değerleri aynıysa kod sırasına göre sıralar. Tüm düzen bileşenlerinin varsayılan `order` değeri `0`'dır. ```html Layout Öğesi Üst Uygulama Çubuğu
order="-1" Ana Alan ``` ## mdui-layout-item API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

Bileşenin konumu. Olası değerler:

  • top: Üstte
  • bottom: Altta
  • left: Solda
  • right: Sağda
order order true number

Bu bileşenin <mdui-layout> içindeki yerleşim sırası. Küçükten büyüğe doğru sıralanır. Varsayılan değer 0'dır.
### Slots
Ad Açıklama
Varsayılan

Herhangi bir içerik içerebilir.
## mdui-layout-main API ### Slots
Ad Açıklama
Varsayılan

Herhangi bir içerik içerebilir.
## mdui-layout API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
full-height fullHeight true boolean false

Geçerli düzenin yüksekliğini %100 olarak ayarlar.
### Slots
Ad Açıklama
Varsayılan

<mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, <mdui-layout-main> öğelerini içerebilir.
# Doğrusal İlerleme Bileşeni Doğrusal ilerleme, veri yükleme veya form gönderme gibi görevlerin ilerlemesini kullanıcıya göstermek için kullanılan yatay bir göstergedir. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/linear-progress.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### İlerleme Ayarlama {#example-value} Doğrusal ilerleme varsayılan olarak belirsiz bir ilerlemeye sahiptir. Geçerli ilerlemeyi `value` özniteliği aracılığıyla ayarlayabilirsiniz. Varsayılan maksimum ilerleme değeri `1`'dir. ```html ``` İlerlemenin maksimum değerini `max` özniteliği aracılığıyla da ayarlayabilirsiniz. ```html ``` ## mdui-linear-progress API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
max max true number 1

İlerleme göstergesinin maksimum değeri. Varsayılan 1'dir.
value value false number

İlerleme göstergesinin geçerli değeri. Bu değer belirtilmezse, belirsiz durumdadır.
### CSS Parts
Ad Açıklama
indicator

Gösterge kısmı.
### CSS Custom Property
Ad Açıklama
--shape-corner

Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Liste Bileşeni Liste, metin veya resimleri görüntülemek için dikey olarak sıralanmış bir dizindir ve kullanıcıların ilgili bilgilere hızlıca göz atmasını ve erişmesini kolaylaştırır. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { List } from 'mdui/components/list.js'; import type { ListItem } from 'mdui/components/list-item.js'; import type { ListSubheader } from 'mdui/components/list-subheader.js'; ``` Kullanım örneği: ```html Alt Başlık Öğe 1 Öğe 2 ``` ## Örnekler {#examples} ### Metin İçeriği {#example-text} `` bileşeninde `headline` özniteliğini ayarlayarak liste öğesinin ana metnini, `description` özniteliğini ayarlayarak ikincil metnini belirleyebilirsiniz. ```html ``` Ana metni varsayılan slot aracılığıyla, ikincil metni ise `description` slot'u aracılığıyla da belirtebilirsiniz. ```html Ana Metin Ana Metin Destekleyici metin ``` Varsayılan olarak, ana metin ve ikincil metin, uzunlukları ne olursa olsun tamamen görüntülenir. `headline-line` ve `description-line` özniteliklerini ayarlayarak ana metin ve ikincil metin için satır sınırlaması ekleyebilirsiniz. En fazla 3 satır ile sınırlayabilirsiniz. ```html Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin ``` ### Kenar İçerikleri {#example-side} `` bileşeninde `icon` ve `end-icon` özniteliklerini ayarlayarak, liste öğesinin soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz. ```html Ana Metin ``` Ayrıca `icon` ve `end-icon` slot'ları aracılığıyla da liste öğesinin soluna ve sağına öğeler ekleyebilirsiniz. ```html Ana Metin ``` ### Bağlantı {#example-link} `href` özniteliğini ayarlayarak liste öğesini bir bağlantıya dönüştürebilirsiniz. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: `download`, `target`, `rel`. ```html Ana Metin ``` ### Devre Dışı Durumu {#example-disabled} `` bileşenine `disabled` özniteliğini ekleyerek o liste öğesini devre dışı bırakabilirsiniz. Bu durumda, liste öğesindeki onay kutusu, radyo butonu, anahtar (switch) gibi bileşenler de devre dışı kalacaktır. ```html Ana Metin Ana Metin ``` ### Aktif Durumu {#example-active} `` bileşenine `active` özniteliğini ekleyerek o liste öğesini aktif hale getirebilirsiniz. ```html Ana Metin Ana Metin ``` ### Tıklanamaz Durumu {#example-nonclickable} `` bileşenine `nonclickable` özniteliğini ekleyerek, liste öğesindeki fareyle üzerine gelme ve tıklama dalgası efektlerini kaldırabilirsiniz. ```html Ana Metin Ana Metin ``` ### Yuvarlatılmış Köşe Şekli {#example-rounded} `` bileşenine `rounded` özniteliğini ekleyerek liste öğesinin yuvarlatılmış köşelere sahip olmasını sağlayabilirsiniz. ```html Ana Metin Ana Metin ``` ### Dikey Hizalama Şekli {#example-alignment} `` bileşeninde `alignment` özniteliğini ayarlayarak, liste öğesinin sol ve sağ kenarlarındaki öğelerin liste öğesine göre hizalamasını ayarlayabilirsiniz. Olası değerler: - `start`: Üst hizalama - `center`: Orta hizalama - `end`: Alt hizalama ```html Ana Metin Ana Metin Ana Metin ``` ### Özel İçerik {#example-custom} `` bileşeninde `custom` slot'unu kullanarak liste öğesinin içeriğini tamamen özelleştirebilirsiniz. ```html
test
 ``` ## mdui-list-item API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
headline headline true string

Ana metin. Varsayılan slot ile de ayarlanabilir.
headline-line headlineLine true 1 | 2 | 3

Ana metin satır sayısı. Sınır aşıldığında kesilir. Varsayılan olarak satır sınırı yoktur. Olası değerler:

  • 1: Tek satır gösterir, aşıldığında kesilir
  • 2: İki satır gösterir, aşıldığında kesilir
  • 3: Üç satır gösterir, aşıldığında kesilir
description description true string

Alt metin. slot="description" ile de ayarlanabilir.
description-line descriptionLine true 1 | 2 | 3

Alt metin satır sayısı. Sınır aşıldığında kesilir. Varsayılan olarak satır sınırı yoktur. Olası değerler:

  • 1: Tek satır gösterir, aşıldığında kesilir
  • 2: İki satır gösterir, aşıldığında kesilir
  • 3: Üç satır gösterir, aşıldığında kesilir
icon icon true string

Soldaki Material Icons simge adı. slot="icon" ile de ayarlanabilir.
end-icon endIcon true string

Sağdaki Material Icons simge adı. slot="end-icon" ile de ayarlanabilir.
disabled disabled true boolean false

Bu liste öğesinin devre dışı olup olmadığı. Devre dışı olduğunda liste öğesi grileşir ve içindeki <mdui-checkbox>, <mdui-radio>, <mdui-switch> gibi öğeler de devre dışı olur.
active active true boolean false

Bu liste öğesinin etkin olup olmadığı.
nonclickable nonclickable true boolean false

Liste öğesinin tıklanamaz hale getirilip getirilmeyeceği. Ayarlandığında, liste öğesindeki <mdui-checkbox>, <mdui-radio>, <mdui-switch> gibi öğeler yine de etkileşime açıktır.
rounded rounded true boolean false

Yuvarlak köşeli liste öğesi kullanılıp kullanılmayacağı.
alignment alignment true 'start' | 'center' | 'end' 'center'

Liste öğesinin dikey hizalama şekli. Olası değerler:

  • start: Üste hizalı
  • center: Ortaya hizalı
  • end: Alta hizalı
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Ana metin.
description

Alt metin.
icon

Liste öğesinin solundaki öğe.
end-icon

Liste öğesinin sağındaki öğe.
custom

Herhangi bir özel içerik.
### CSS Parts
Ad Açıklama
container

Liste öğesi kabı.
icon

Soldaki simge.
end-icon

Sağdaki simge.
body

Orta kısım.
headline

Ana başlık.
description

Alt başlık.
### CSS Custom Property
Ad Açıklama
--shape-corner

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

rounded özelliği belirtildiğinde liste öğesinin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
## mdui-list-subheader API ### Slots
Ad Açıklama
Varsayılan

Liste başlık metni.
## mdui-list API ### Slots
Ad Açıklama
Varsayılan

<mdui-list-item> öğeleri.
# Menü Bileşeni Menü bileşeni, dikey olarak sıralanmış bir dizi seçenek sunar. Menü, kullanıcı bir buton veya başka bir kontrol ile etkileşime girdiğinde görüntülenir. Açılır menü uygulamanız gerekiyorsa, [``](/tr/docs/2/components/dropdown) bileşeni ile birlikte kullanabilirsiniz. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Kullanım örneği: ```html Öğe 1 Öğe 2 ``` ## Örnekler {#examples} ### Açılır Menü {#example-dropdown} Açılır menü uygulamak için [``](/tr/docs/2/components/dropdown) bileşeni ile birlikte kullanın. ```html açılır menüyü aç Öğe 1 Öğe 2 ``` ### Kompakt Düzen {#example-dense} `` bileşenine `dense` özniteliğini ekleyerek kompakt bir düzen elde edebilirsiniz. ```html Öğe 1 Öğe 2 Öğe 3 ``` ### Devre Dışı Menü Öğesi {#example-disabled} `` bileşenine `disabled` özniteliğini ekleyerek bir menü öğesini devre dışı bırakabilirsiniz. ```html Öğe 1 Öğe 2 Öğe 3 ``` ### Tek Seçim Desteği {#example-selects-single} `` bileşeninde `selects` özniteliğini `single` olarak belirterek tek seçim özelliğini etkinleştirebilirsiniz. Bu durumda, `` bileşeninin `value` değeri, seçili olan `` bileşeninin `value` değerine eşit olur. ```html Öğe 1 Öğe 2 ``` ### Çoklu Seçim Desteği {#example-selects-multiple} `` bileşeninde `selects` özniteliğini `multiple` olarak belirterek çoklu seçim özelliğini etkinleştirebilirsiniz. Bu durumda, `` bileşeninin `value` değeri, seçili olan `` bileşenlerinin `value` değerlerinden oluşan bir dizi olur. Not: Çoklu seçim modunda, `` bileşeninin `value` değeri bir dizidir ve bu değeri yalnızca JavaScript özelliği aracılığıyla okuyabilir ve ayarlayabilirsiniz. ```html Öğe 1 Öğe 2 Öğe 3 ``` ### Simge {#example-icon} `` bileşeninde `icon` ve `end-icon` özniteliklerini ayarlayarak, menü öğesinin soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz. `end-text` özniteliğini ayarlayarak sağ tarafa metin ekleyebilirsiniz. Ayrıca `icon`, `end-icon` ve `end-text` slot'ları aracılığıyla da menü öğesinin soluna ve sağına simge ve metin ekleyebilirsiniz. Menü öğesinin sol tarafında diğer menü öğeleriyle hizalamayı korumak için boş bir simge konumu bırakmanız gerekiyorsa, `icon` özniteliğini boş bir string olarak ayarlayabilirsiniz. ```html Öğe 1 Öğe 2 Ctrl+X Öğe 3 ``` Tek seçim veya çoklu seçim modunda, seçili durum simgesini `selected-icon` özniteliği veya `selected-icon` slot'u aracılığıyla ayarlayabilirsiniz. ```html Öğe 1 Öğe 2 ``` ### Bağlantı {#example-link} `` bileşeninde `href` özniteliğini ayarlayarak menü öğesini bir bağlantıya dönüştürebilirsiniz. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: `download`, `target`, `rel`. ```html Öğe 1 Öğe 2 ``` ### Alt Menü {#example-submenu} `` bileşeninde, alt menü öğelerini belirtmek için `submenu` slot'unu kullanabilirsiniz. ```html Satır aralığı Tek 1.5 Çift Özel: 1.2 Paragraf stili ``` `` bileşeninde `submenu-trigger` özniteliği aracılığıyla alt menünün tetiklenme şeklini ayarlayabilirsiniz. ```html Satır aralığı Tek 1.5 Çift Özel: 1.2 Paragraf stili ``` `submenu-trigger` özniteliği `hover` olarak ayarlandığında, `` bileşeninde `submenu-open-delay` ve `submenu-close-delay` öznitelikleri aracılığıyla alt menünün açılma ve kapanma gecikmesini ayarlayabilirsiniz. ```html Satır aralığı Tek 1.5 Çift Özel: 1.2 Paragraf stili ``` ### Özel İçerik {#example-custom} `` bileşeninde `custom` slot'unu kullanarak menü öğesinin içeriğini tamamen özelleştirebilirsiniz. ```html
ABS
Sayının mutlak değerini alır
ACOS
Sayının radyan cinsinden arkkosinüs değeri
ACOSH
Sayının hiperbolik arkkosinüs değeri
 ``` ## mdui-menu-item API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
value value true string

Menü öğesinin değeri.
disabled disabled true boolean false

Menü öğesinin devre dışı olup olmadığı.
icon icon true string

Soldaki Material Icons simge adı. slot="icon" ile de ayarlanabilir.

Solda simge görüntülenmesi gerekmediği halde bir simge konumu için yer ayrılması gerekiyorsa, yer tutucu olarak boş bir dize iletilebilir.
end-icon endIcon true string

Sağdaki Material Icons simge adı. slot="end-icon" ile de ayarlanabilir.
end-text endText true string

Sağdaki metin. slot="end-text" ile de ayarlanabilir.
selected-icon selectedIcon true string

Seçili durumdaki Material Icons simge adı. slot="selected-icon" ile de ayarlanabilir.
submenu-open submenuOpen true boolean false

Alt menünün açık olup olmadığı.
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
submenu-open

Alt menü açılmaya başladığında tetiklenir. event.preventDefault() çağrılarak alt menünün açılması engellenebilir.
submenu-opened

Alt menü açılma animasyonu tamamlandığında tetiklenir.
submenu-close

Alt menü kapanmaya başladığında tetiklenir. event.preventDefault() çağrılarak alt menünün kapanması engellenebilir.
submenu-closed

Alt menü kapanma animasyonu tamamlandığında tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Menü öğesinin metni.
icon

Menü öğesinin solundaki simge.
end-icon

Menü öğesinin sağındaki simge.
end-text

Menünün sağındaki metin.
selected-icon

Seçili durumdaki simge.
submenu

Alt menü.
custom

Herhangi bir özel içerik.
### CSS Parts
Ad Açıklama
container

Menü öğesinin kabı.
icon

Soldaki simge.
label

Metin içeriği.
end-icon

Sağdaki simge.
end-text

Sağdaki metin.
selected-icon

Seçili durumdaki simge.
submenu

Alt menü öğesi.
## mdui-menu API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
selects selects true 'single' | 'multiple'

Menü öğelerinin seçilebilir durumu. Varsayılan olarak seçilemez. Olası değerler:

  • single: Tek seçim
  • multiple: Çoklu seçim
value value false string | string[]

Şu anda seçili olan <mdui-menu-item> 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.
dense dense true boolean false

Menü öğelerinin sıkı düzen kullanıp kullanmayacağı.
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

Alt menünün tetiklenme şekli. Birden fazla değer boşlukla ayrılarak desteklenir. Olası değerler:

  • click: Menü öğesine tıklandığında alt menü açılır
  • hover: Fare menü öğesinin üzerine geldiğinde alt menü açılır
  • focus: Menü öğesine odaklanıldığında alt menü açılır
  • manual: Alt menü yalnızca programlama yoluyla açılıp kapatılabilir, başka tetikleme şekli belirtilemez
submenu-open-delay submenuOpenDelay true number 200

Fareyle üzerine gelerek alt menüyü açma gecikmesi, milisaniye cinsinden.
submenu-close-delay submenuCloseDelay true number 200

Fareyle üzerine gelerek alt menüyü kapatma gecikmesi, milisaniye cinsinden.
### Yöntemler
Ad Açıklama
focus(options?: FocusOptions): void

Odağı geçerli öğeye ayarlar.
blur(): void

Odağı geçerli öğeden kaldırır.
### Olaylar
Ad Açıklama
change

Menü öğesi seçim durumu değiştiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Alt menü öğeleri (<mdui-menu-item>), ayırıcılar (<mdui-divider>) gibi öğeler.
### CSS Custom Property
Ad Açıklama
--shape-corner

Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Alt Gezinme Çubuğu Bileşeni Gezinme çubuğu, mobil cihazlarda birkaç ana sayfa arasında kolayca geçiş yapmak için kullanılır. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` Kullanım örneği: (Örnekteki `style="position: relative"` ifadesi yalnızca gösterim amacıyladır, gerçek kullanımda bu stili kaldırmanız gerekir.) ```html Öğe 1 Öğe 2 Öğe 3 ``` **Önemli Notlar:** Bu bileşen varsayılan olarak `position: fixed` konumlandırmasını kullanır ve sayfa içeriğinin bu bileşen tarafından engellenmesini önlemek için `body` üzerine otomatik olarak `padding-bottom` stili ekler. Ancak aşağıdaki iki durumda varsayılan olarak `position: absolute` konumlandırması kullanılacaktır: 1. `scroll-target` özniteliği belirtildiğinde. Bu durumda `padding-bottom` stili, `scroll-target` öğesine eklenir. 2. Bileşen [``](/tr/docs/2/components/layout) içinde bulunduğunda. Bu durumda `padding-bottom` stili eklenmez. ## Örnekler {#examples} ### Metin Etiketi Görünürlük Durumu {#example-label-visibility} Gezinme çubuğundaki metin etiketleri, varsayılan olarak gezinme öğesi sayısı 3 veya daha az olduğunda her zaman görünür; gezinme öğesi sayısı 3'ten fazla olduğunda, yalnızca seçili durumdaki öğenin metni görünür. ```html Öğe 1 Öğe 2 Öğe 3
Öğe 1 Öğe 2 Öğe 3 Öğe 4 ``` `` bileşeninde `label-visibility` özniteliğini ayarlayarak metin etiketlerinin görünürlük durumunu düzenleyebilirsiniz. Olası değerler: - `selected`: Yalnızca seçili durumdaki öğenin metnini göster - `labeled`: Metni her zaman göster - `unlabeled`: Metni asla gösterme ```html Öğe 1 Öğe 2 Öğe 3 seçili etiketli etiketsiz ``` ### Belirtilen Konteynır İçinde {#example-scroll-target} Varsayılan olarak, gezinme çubuğu geçerli pencereye göre sayfanın alt kısmında görüntülenir. Gezinme çubuğunu belirli bir konteynırın içine yerleştirmek istiyorsanız, `` bileşeninde `scroll-target` özniteliğini belirtebilirsiniz. Bu özniteliğin değeri, kaydırılabilir içeriğe sahip konteynırın CSS seçicisi veya DOM öğesi olmalıdır. Bu durumda, gezinme çubuğu ana öğeye göre konumlandırılacaktır (ana öğeye `position: relative; overflow: hidden` stillerini kendiniz eklemelisiniz). ```html
Öğe 1 Öğe 2 Öğe 3
Sayfa içeriği
``` ### Kaydırma Sırasında Gizleme {#example-scroll-behavior} `` bileşeninde `scroll-behavior` özniteliğini `hide` olarak ayarlayarak, sayfa aşağı kaydırıldığında gezinme çubuğunu gizleme ve yukarı kaydırıldığında gösterme efekti elde edebilirsiniz. Gezinme çubuğunun kaç piksel kaydırmadan sonra gizlenmeye başlayacağını ayarlamak için `scroll-threshold` özniteliğini kullanın. ```html
Öğe 1 Öğe 2 Öğe 3
Sayfa içeriği
``` ### Simge {#example-icon} `` bileşeninde, `icon` özniteliği etkin olmayan durumdaki gezinme öğesi simgesini, `active-icon` özniteliği ise etkin durumdaki gezinme öğesi simgesini belirtmek için kullanılır. Ayrıca `icon` ve `active-icon` slot'ları aracılığıyla da etkin olmayan ve etkin durumdaki simge öğelerini belirtebilirsiniz. ```html Öğe 1 Öğe 2 ``` ### Bağlantı {#example-link} `` bileşeninde `href` özniteliğini ayarlayarak gezinme öğesini bir bağlantıya dönüştürebilirsiniz. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: `download`, `target`, `rel`. ```html Öğe 1 Öğe 2 ``` ### Rozet {#example-badge} `` bileşeninde, `badge` slot'u aracılığıyla rozet ekleyebilirsiniz. ```html Öğe 1 99+ Öğe 2 ``` ## mdui-navigation-bar-item API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
icon icon true string

Etkin olmayan durumdaki Material Icons simge adı. slot="icon" ile de ayarlanabilir.
active-icon activeIcon true string

Etkin durumdaki Material Icons simge adı. slot="active-icon" ile de ayarlanabilir.
value value true string

Gezinme öğesinin değeri.
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Gezinme öğesi metni.
icon

Simge.
active-icon

Etkin durumdaki simge öğesi.
badge

Rozet.
### CSS Parts
Ad Açıklama
container

Gezinme öğesi kabı.
indicator

Gösterge.
badge

Rozet.
icon

Simge.
active-icon

Etkin durumdaki simge.
label

Gezinme öğesi metni.
### CSS Custom Property
Ad Açıklama
--shape-corner-indicator

Göstergenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
## mdui-navigation-bar API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
hide hide true boolean false

Gizlenip gizlenmeyeceği.
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

Metnin görünürlük durumu. Olası değerler:

  • auto: Seçenek sayısı 3 veya daha az olduğunda metin her zaman görünür; seçenek sayısı 3'ten fazla olduğunda yalnızca seçili durumdaki metin görünür
  • selected: Metin yalnızca seçili durumda görünür
  • labeled: Metin her zaman görünür
  • unlabeled: Metin hiçbir zaman görünmez
value value true string

Şu anda seçili olan <mdui-navigation-bar-item> değeri.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Kaydırma davranışı. Olası değerler:

  • hide: Kaydırma sırasında gizlenir.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Kaydırma olaylarının izleneceği öğe. Değer bir CSS seçici, DOM öğesi veya JQ nesnesi olabilir. Varsayılan olarak window nesnesinin kaydırma olaylarını izler.
scroll-threshold scrollThreshold true number

Kaydırma davranışını tetiklemek için gereken kaydırma mesafesi. Birimi px'dir.
order order true number

Bu bileşenin <mdui-layout> içindeki yerleşim sırası. Küçükten büyüğe doğru sıralanır. Varsayılan değer 0'dır.
### Olaylar
Ad Açıklama
change

Değer değiştiğinde tetiklenir.
show

Gösterme başladığında tetiklenir. event.preventDefault() çağrılarak gösterim engellenebilir.
shown

Gösterme animasyonu tamamlandığında tetiklenir.
hide

Gizleme başladığında tetiklenir. event.preventDefault() çağrılarak gizleme engellenebilir.
hidden

Gizleme animasyonu tamamlandığında tetiklenir.
### Slots
Ad Açıklama
Varsayılan

<mdui-navigation-bar-item> bileşeni.
### CSS Custom Property
Ad Açıklama
--shape-corner

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

Bileşenin CSS z-index değeri.
# Gezinme Çekmecesi Bileşeni Gezinme çekmecesi, sayfanın yan tarafında gezinme seçenekleri sunarak kullanıcının farklı sayfalara veya içeriklere hızlıca erişmesini sağlar. Genellikle, gezinme çekmecesi içinde gezinme öğeleri eklemek için [``](/tr/docs/2/components/list) bileşenini kullanabilirsiniz. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/navigation-drawer.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` Kullanım örneği: ```html Gezinme çekmecesini kapat Gezinme çekmecesini aç ``` **Önemli Notlar:** Bu bileşen varsayılan olarak `position: fixed` konumlandırmasını kullanır. `modal` özniteliği `false` olduğunda ve ekran genişliği [`--mdui-breakpoint-md`](/tr/docs/2/styles/design-tokens#breakpoint) değerine eşit veya büyük olduğunda, sayfa içeriğinin bu bileşen tarafından engellenmesini önlemek için `body` üzerine otomatik olarak `padding-left` veya `padding-right` stili eklenir. Ancak aşağıdaki iki durumda varsayılan olarak `position: absolute` konumlandırması kullanılacaktır: 1. `contained` özniteliği `true` olduğunda. 2. Bileşen [``](/tr/docs/2/components/layout) içinde bulunduğunda. Bu durumda `padding-left` veya `padding-right` stili eklenmez. ## Örnekler {#examples} ### Belirtilen Konteynır İçinde {#example-contained} Varsayılan olarak, gezinme çekmecesi geçerli pencereye göre sayfanın solunda veya sağında görüntülenir. Gezinme çekmecesini belirli bir konteynırın içine yerleştirmek istiyorsanız, `contained` özniteliğini ekleyebilirsiniz. Bu durumda, gezinme çekmecesi ana öğeye göre konumlandırılacaktır (ana öğeye `position: relative; overflow: hidden;` stilini kendiniz eklemelisiniz). ```html
Gezinme çekmecesini kapat
Gezinme çekmecesini aç
``` ### Modal (Kalıcı) Kullanım {#example-modal} `modal` özniteliğini eklemek, gezinme çekmecesi açıldığında bir kaplama katmanı görüntüler. Pencere veya ana öğe genişliğinin [`--mdui-breakpoint-md`](/tr/docs/2/styles/design-tokens#breakpoint) değerinden küçük olduğu durumlarda, bu parametreye bakılmaksızın her zaman bir kaplama katmanı gösterileceğini unutmayın. `close-on-esc` özniteliğini eklemek, ESC tuşuna basıldığında gezinme çekmecesini kapatır. `close-on-overlay-click` özniteliğini eklemek, kaplama katmanına tıklandığında gezinme çekmecesini kapatır. ```html
Gezinme çekmecesini kapat
Gezinme çekmecesini aç
``` ### Sağ Tarafta Konumlandırma {#example-placement} `placement` özniteliğini `right` olarak ayarlayarak gezinme çekmecesini sayfanın sağ tarafında görüntüleyebilirsiniz. ```html
Gezinme çekmecesini kapat
Gezinme çekmecesini aç
``` ## mdui-navigation-drawer API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
open open true boolean false

Gezinme çekmecesinin açık olup olmadığı.
modal modal true boolean false

Gezinme çekmecesi açıldığında kaplama katmanının gösterilip gösterilmeyeceği.

Dar ekranlı cihazlarda (ekran genişliği --mdui-breakpoint-md değerinden küçükse), bu parametreye bakılmaksızın kaplama katmanı her zaman gösterilir.
close-on-esc closeOnEsc true boolean false

Kaplama katmanı varken ESC tuşuna basıldığında gezinme çekmecesinin kapanıp kapanmayacağı.
close-on-overlay-click closeOnOverlayClick true boolean false

Kaplama katmanına tıklandığında gezinme çekmecesinin kapanıp kapanmayacağı.
placement placement true 'left' | 'right' 'left'

Gezinme çekmecesinin konumu. Olası değerler:

  • left: Sol
  • right: Sağ
contained contained true boolean false

Varsayılan olarak, gezinme çekmecesi body öğesine göre görüntülenir. Bu özellik true olarak ayarlandığında, gezinme çekmecesi üst öğesine göre görüntülenir.

Not: Bu özellik ayarlanırken, üst öğede manuel olarak position: relative; overflow: hidden; stilleri ayarlanmalıdır.
order order true number

Bu bileşenin <mdui-layout> içindeki yerleşim sırası. Küçükten büyüğe doğru sıralanır. Varsayılan değer 0'dır.
### Olaylar
Ad Açıklama
open

Gezinme çekmecesi açılmadan önce tetiklenir. event.preventDefault() çağrılarak gezinme çekmecesinin açılması engellenebilir.
opened

Gezinme çekmecesi açılma animasyonu tamamlandıktan sonra tetiklenir.
close

Gezinme çekmecesi kapanmadan önce tetiklenir. event.preventDefault() çağrılarak gezinme çekmecesinin kapanması engellenebilir.
closed

Gezinme çekmecesi kapanma animasyonu tamamlandıktan sonra tetiklenir.
overlay-click

Kaplama katmanına tıklandığında tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Gezinme çekmecesindeki içerik.
### CSS Parts
Ad Açıklama
overlay

Kaplama katmanı.
panel

Gezinme çekmecesi kabı.
### CSS Custom Property
Ad Açıklama
--shape-corner

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

Bileşenin CSS z-index değeri.
# Yan Gezinme Çubuğu Bileşeni Yan gezinme çubuğu, tablet ve masaüstü bilgisayarlarda farklı ana sayfalara erişim sağlamak için kullanılır. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { NavigationRail } from 'mdui/components/navigation-rail.js'; import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js'; ``` Kullanım örneği: (Örnekteki `style="position: relative"` ifadesi yalnızca gösterim amacıyladır, gerçek kullanımda bu stili kaldırmanız gerekir.) ```html Son Resimler Kitaplık ``` **Önemli Notlar:** Bu bileşen varsayılan olarak `position: fixed` konumlandırmasını kullanır ve sayfa içeriğinin bu bileşen tarafından engellenmesini önlemek için `body` üzerine otomatik olarak `padding-left` veya `padding-right` stili ekler. Ancak aşağıdaki iki durumda varsayılan olarak `position: absolute` konumlandırması kullanılacaktır: 1. `` bileşeninin `contained` özniteliği `true` olduğunda. Bu durumda `padding-left` veya `padding-right` stili, ana öğeye eklenir. 2. [``](/tr/docs/2/components/layout) bileşeninin içinde bulunduğunda. Bu durumda `padding-left` veya `padding-right` stili eklenmez. ## Örnekler {#examples} ### Belirtilen Konteynır İçinde {#example-contained} Varsayılan olarak, yan gezinme çubuğu geçerli pencereye göre sayfanın solunda veya sağında görüntülenir. Yan gezinme çubuğunu belirli bir konteynırın içine yerleştirmek istiyorsanız, `` bileşenine `contained` özniteliğini ekleyebilirsiniz. Bu durumda, yan gezinme çubuğu ana öğesine göre konumlandırılacaktır (ana öğeye `position: relative` stilini kendiniz eklemelisiniz). ```html
Son Resimler Kitaplık
Sayfa içeriği
``` ### Sağ Tarafta Konumlandırma {#example-placement} `` bileşeninde `placement` özniteliğini `right` olarak ayarlayarak, yan gezinme çubuğunu sağ tarafta görüntüleyebilirsiniz. ```html
Son Resimler Kitaplık
Sayfa içeriği
``` ### Ayırıcı Çizgi Gösterme {#example-divider} `` bileşenine `divider` özniteliğini ekleyerek, yan gezinme çubuğu ile sayfa içeriği arasında bir ayırıcı çizgi görüntüleyebilirsiniz. ```html
Son Resimler Kitaplık
Sayfa içeriği
``` ### Üst/Alt Kısma Öğe Ekleme {#example-top-bottom} `` bileşeni içinde `top` ve `bottom` slot'ları aracılığıyla üst ve alt kısma öğeler ekleyebilirsiniz. ```html
Son Resimler Kitaplık
Sayfa içeriği
``` ### Gezinme Öğelerinin Dikey Hizalama Şekli {#example-alignment} `` bileşeninin `alignment` özniteliğini ayarlayarak, gezinme öğelerinin dikey hizalama şeklini değiştirebilirsiniz. ```html
Son Resimler Kitaplık
başlangıç orta son
``` ### Simge {#example-icon} `` bileşeninde, `icon` özniteliği etkin olmayan durumdaki gezinme öğesi simgesini, `active-icon` özniteliği ise etkin durumdaki gezinme öğesi simgesini belirtmek için kullanılır. Ayrıca `icon` ve `active-icon` slot'ları aracılığıyla da etkin olmayan ve etkin durumdaki simge öğelerini belirtebilirsiniz. ```html
Son Resimler Kitaplık
Sayfa içeriği
``` ### Yalnızca Simge Kullanımı {#example-no-label} `` bileşeni, metin eklenmeden yalnızca simge kullanabilir. ```html
Sayfa içeriği
``` ### Bağlantı {#example-link} `` bileşeninde `href` özniteliğini ayarlayarak gezinme öğesini bir bağlantıya dönüştürebilirsiniz. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: `download`, `target`, `rel`. ```html
Son Resimler Kitaplık
Sayfa içeriği
``` ### Rozet {#example-badge} `` bileşeninde, `badge` slot'u aracılığıyla rozet ekleyebilirsiniz. ```html
Son 99+ Resimler Kitaplık
Sayfa içeriği
``` ## mdui-navigation-rail-item API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
icon icon true string

Etkin olmayan durumdaki Material Icons simge adı. slot="icon" ile de ayarlanabilir.
active-icon activeIcon true string

Etkin durumdaki Material Icons simge adı. slot="active-icon" ile de ayarlanabilir.
value value true string

Gezinme öğesinin değeri.
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Metin içeriği.
icon

Simge.
active-icon

Etkin durumdaki simge.
badge

Rozet.
### CSS Parts
Ad Açıklama
container

Gezinme öğesi kabı.
indicator

Gösterge.
badge

Rozet.
icon

Simge.
active-icon

Etkin durumdaki simge.
label

Metin içeriği.
### CSS Custom Property
Ad Açıklama
--shape-corner-indicator

Göstergenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
## mdui-navigation-rail API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
value value true string

Şu anda seçili olan <mdui-navigation-rail-item> değeri.
placement placement true 'left' | 'right' 'left'

Gezinme rayının konumu. Olası değerler:

  • left: Sol
  • right: Sağ
alignment alignment true 'start' | 'center' | 'end' 'start'

<mdui-navigation-rail-item> öğelerinin hizalama şekli. Olası değerler:

  • start: Üste hizalı
  • center: Ortaya hizalı
  • end: Alta hizalı
contained contained true boolean false

Varsayılan olarak, gezinme rayı body öğesine göre görüntülenir. Bu özellik true olarak ayarlandığında, gezinme rayı üst öğesine göre görüntülenir.

Not: Bu özellik ayarlanırken, üst öğede manuel olarak position: relative; stili ayarlanmalıdır.
divider divider true boolean false

Gezinme rayı ile sayfa içeriği arasına ayırıcı çizgi eklenip eklenmeyeceği.
order order true number

Bu bileşenin <mdui-layout> içindeki yerleşim sırası. Küçükten büyüğe doğru sıralanır. Varsayılan değer 0'dır.
### Olaylar
Ad Açıklama
change

Değer değiştiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

<mdui-navigation-rail-item> bileşeni.
top

Üstteki öğeler.
bottom

Alttaki öğeler.
### CSS Parts
Ad Açıklama
top

Üst öğelerin kabı.
bottom

Alt öğelerin kabı.
items

<mdui-navigation-rail-item> bileşenlerinin kabı.
### CSS Custom Property
Ad Açıklama
--shape-corner

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

Bileşenin CSS z-index değeri.
# Radyo Butonu Bileşeni Radyo butonları, kullanıcının bir dizi seçenek arasından birini seçmesini sağlamak için kullanılır. Her seferinde yalnızca bir seçeneğin seçilebilmesini garanti eder. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` Kullanım örneği: ```html Çince İngilizce ``` ## Örnekler {#examples} ### Seçili Durumu {#example-checked} `` bileşeninin `value` değeri, seçili olan `` bileşeninin `value` değerine eşittir. Ayrıca `` bileşeninin `value` değerini güncelleyerek seçili radyo butonunu değiştirebilirsiniz. ```html Çince İngilizce ``` `` bileşenini tek başına kullanabilirsiniz. Bu durumda seçili durumu `checked` özniteliği aracılığıyla okuyabilir ve değiştirebilirsiniz. ```html Radyo Butonu ``` ### Devre Dışı Durumu {#example-disabled} `` bileşenine `disabled` özniteliğini ekleyerek tüm radyo butonu grubunu devre dışı bırakabilirsiniz. ```html Çince İngilizce ``` Belirli bir radyo butonunu devre dışı bırakmak için `` bileşenine `disabled` özniteliğini ekleyebilirsiniz. ```html Çince İngilizce ``` ### Simge {#example-icon} `unchecked-icon` ve `checked-icon` özniteliklerini ayarlayarak, sırasıyla seçilmemiş ve seçili durumlardaki radyo butonunun Material Icons simgelerini belirleyebilirsiniz. Ayrıca `unchecked-icon` ve `checked-icon` slot'ları aracılığıyla da ayarlayabilirsiniz. ```html Çince İngilizce ``` ## mdui-radio-group API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
disabled disabled true boolean false

Bu bileşenin devre dışı olup olmadığı.
form form true 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 true string ''

Form verileriyle birlikte gönderilen radyo butonu grubu adı.
value value true string ''

Form verileriyle birlikte gönderilen, radyo butonu grubunun şu anda seçili olan değeri.
undefined defaultValue false 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.
required required true boolean false

Form gönderilirken radyo butonlarından birinin seçilmesinin zorunlu olup olmadığı.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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 Açıklama
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 Açıklama
change

Seçili değer değiştiğinde tetiklenir.
input

Seçili değer değiştiğinde tetiklenir.
invalid

Form alanı doğrulaması başarısız olduğunda tetiklenir.
### Slots
Ad Açıklama
Varsayılan

<mdui-radio> öğeleri.
## mdui-radio API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
value value true string ''

Geçerli radyo seçeneğinin değeri.
disabled disabled true boolean false

Geçerli radyo seçeneğinin devre dışı olup olmadığı.
checked checked true boolean false

Geçerli radyo seçeneğinin seçili olup olmadığı.
unchecked-icon uncheckedIcon true string

Seçili olmayan durumdaki Material Icons simge adı. slot="unchecked-icon" ile de ayarlanabilir.
checked-icon checkedIcon true string

Seçili durumdaki Material Icons simge adı. slot="checked-icon" ile de ayarlanabilir.
autofocus autofocus true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
change

Bu radyo seçeneği seçildiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Metin içeriği.
unchecked-icon

Seçili olmayan durumdaki simge.
checked-icon

Seçili durumdaki simge.
### CSS Parts
Ad Açıklama
control

Soldaki simge alanı.
unchecked-icon

Seçili olmayan durumdaki simge.
checked-icon

Seçili durumdaki simge.
label

Metin içeriği.
# Aralık Kaydırıcısı Bileşeni Aralık kaydırıcısı bileşeni, kullanıcının bir dizi değer arasından bir aralık seçmesini sağlamak için kullanılır. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/range-slider.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### Varsayılan Değer {#example-value} `value` özniteliği aracılığıyla aralık kaydırıcısının geçerli değerini okuyabilir veya ayarlayabilirsiniz. Bu öznitelik bir dizidir ve yalnızca JavaScript özelliği aracılığıyla okunabilir ve ayarlanabilir. ```html ``` ### Devre Dışı Durumu {#example-disabled} Aralık kaydırıcısını devre dışı bırakmak için `disabled` özniteliğini ekleyin. ```html ``` ### Aralık {#example-min-max} Aralık kaydırıcısının minimum ve maksimum değerlerini ayarlamak için `min` ve `max` özniteliklerini kullanın. ```html ``` ### Adım Aralığı {#example-step} Aralık kaydırıcısının adım aralığını ayarlamak için `step` özniteliğini kullanın. ```html ``` ### Ölçek İşaretleri {#example-tickmarks} Aralık kaydırıcısına ölçek işaretleri eklemek için `tickmarks` özniteliğini ekleyin. ```html ``` ### Metin İpucunu Gizleme {#example-nolabel} Aralık kaydırıcısındaki metin ipucunu gizlemek için `nolabel` özniteliğini ekleyin. ```html ``` ### Metin İpucunu Değiştirme {#example-labelFormatter} `labelFormatter` JavaScript özelliği aracılığıyla metin ipucunun görüntüleme biçimini değiştirebilirsiniz. Bu özellik bir fonksiyondur. Fonksiyonun parametresi aralık kaydırıcısının geçerli değeridir, dönüş değeri ise görüntülemek istediğiniz metindir. ```html ``` ## mdui-range-slider API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
undefined defaultValue false number[] []

Varsayılan 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.
undefined value false number[]

Kaydırıcının dizi biçimindeki değeri, form verileriyle birlikte gönderilir.

NOT: Bu özellik HTML özelliği ile başlangıç değeri ayarlanamaz; bu değeri değiştirmek için yalnızca JavaScript özellik değeri değiştirilebilir.
autofocus autofocus true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
min min true number 0

Kaydırıcının minimum değeri. Varsayılan 0'dır.
max max true number 100

Kaydırıcının maksimum değeri. Varsayılan 100'dür.
step step true number 1

Adım aralığı. Varsayılan 1'dir.
tickmarks tickmarks true boolean false

İşaret çentiklerinin eklenip eklenmeyeceği.
nolabel nolabel true boolean false

Metin ipucunun gizlenip gizlenmeyeceği.
disabled disabled true boolean false

Devre dışı olup olmadığı.
form form true 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 true string ''

Form verileriyle birlikte gönderilen kaydırıcı adı.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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.
undefined labelFormatter false (value: number) => string

Etiketin görüntüleme biçimini özelleştirmek için kullanılan işlev. İşlevin parametresi kaydırıcının geçerli değeridir ve dönüş değeri görüntülenmesi istenen metindir.
### Yöntemler
Ad Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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 Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
change

Değer değiştiğinde ve odak kaybedildiğinde tetiklenir.
input

Değer değiştiğinde tetiklenir.
invalid

Form alanı doğrulaması başarısız olduğunda tetiklenir.
### CSS Parts
Ad Açıklama
track-inactive

Etkin olmayan durumdaki iz.
track-active

Etkin durumdaki iz.
handle

Kontrol kolu.
label

İpucu metni.
tickmark

İşaret çentiği.
# Seçim Kutusu Bileşeni Açılır seçim bileşeni, bir açılır menü içinde çeşitli seçenekler sunarak kullanıcının istediği içeriği hızlıca seçmesini kolaylaştırır. Bu sayfa esas olarak `` bileşeninin kullanımını açıklamaktadır. Açılır menü öğelerinin kullanımı için [``](/tr/docs/2/components/menu#menu-item-api) bölümüne bakın. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Kullanım örneği: ```html Öğe 1 Öğe 2 ``` ## Örnekler {#examples} ### Şekil {#example-variant} `variant` özniteliği aracılığıyla açılır seçimin şeklini ayarlayın. ```html Öğe 1 Öğe 2 Öğe 1 Öğe 2 ``` ### Çoklu Seçim Desteği {#example-multiple} Açılır seçim varsayılan olarak tektir. `` bileşeninin `value` değeri, seçili olan [``](/tr/docs/2/components/menu#menu-item-api) bileşeninin `value` değerine eşittir. `multiple` özniteliğini ekleyerek açılır seçimi çoklu seçimi destekleyecek şekilde ayarlayabilirsiniz. Bu durumda `` bileşeninin `value` değeri, seçili olan [``](/tr/docs/2/components/menu#menu-item-api) bileşenlerinin `value` değerlerinden oluşan bir dizi olur. Not: Çoklu seçim desteği etkinleştirildiğinde, `` bileşeninin `value` değeri bir dizidir ve bu değeri yalnızca JavaScript özelliği aracılığıyla okuyabilir ve ayarlayabilirsiniz. ```html Öğe 1 Öğe 2 Öğe 3 ``` ### Yardımcı Metin {#example-helper-text} Açılır seçimin üzerindeki etiket metnini ayarlamak için `label` özniteliğini kullanın. ```html Öğe 1 Öğe 2 ``` Bir değer seçilmediğinde görünecek yer tutucu metni ayarlamak için `placeholder` özniteliğini kullanın. ```html Öğe 1 Öğe 2 ``` Açılır seçimin altındaki yardım metnini ayarlamak için `helper` özniteliğini kullanın. Yardım metnini ayarlamak için `helper` slot'unu da kullanabilirsiniz. ```html Öğe 1 Öğe 2 Öğe 1 Öğe 2 Destekleyici metin ``` ### Salt Okunur Modu {#example-readonly} `readonly` özniteliğini ekleyerek açılır seçimi salt okunur moda ayarlayabilirsiniz. ```html Öğe 1 Öğe 2 ``` ### Devre Dışı Bırakma Modu {#example-disabled} `disabled` özniteliğini ekleyerek açılır seçimi devre dışı bırakabilirsiniz. ```html Öğe 1 Öğe 2 ``` ### Temizlenebilir {#example-clearable} `clearable` özniteliğini ekledikten sonra, açılır seçimde bir değer seçiliyken sağ tarafta bir temizleme butonu belirir. ```html Öğe 1 Öğe 2 ``` Ayrıca `clear` slot'u aracılığıyla temizleme butonunu özelleştirebilirsiniz. ```html Öğe 1 Öğe 2 ``` ### Açılır Menü Konumu {#example-placement} `placement` özniteliği aracılığıyla açılır menünün konumunu ayarlayabilirsiniz. ```html Öğe 1 Öğe 2 ``` ### Metni Sağa Hizalama {#example-end-aligned} `end-aligned` özniteliğini ekleyerek metni sağa hizalayabilirsiniz. ```html Öğe 1 Öğe 2 ``` ### Ön ve Arka Metin ve Simgeler {#example-prefix-suffix} `icon` ve `end-icon` özniteliklerini ayarlayarak, açılır seçimin soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz. Ayrıca `icon` ve `end-icon` slot'ları aracılığıyla da açılır seçimin soluna ve sağına öğeler ekleyebilirsiniz. ```html Öğe 1 Öğe 2

Öğe 1 Öğe 2 ``` `prefix` ve `suffix` özniteliklerini ayarlayarak, açılır seçimin soluna ve sağına metin ekleyebilirsiniz. Ayrıca `prefix` ve `suffix` slot'ları aracılığıyla da açılır seçimin soluna ve sağına metin öğeleri ekleyebilirsiniz. Bu metinler yalnızca açılır seçim odaklandığında veya bir değer seçili olduğunda görünür. ```html Öğe 1 Öğe 2

Öğe 1 Öğe 2 $ /100 ``` ## mdui-select API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true 'filled' | 'outlined' 'filled'

Seçim kutusunun stili. Olası değerler:

  • filled: Arka plan renkli seçim kutusu, görsel etkisi daha güçlü
  • outlined: Kenarlıklı seçim kutusu, görsel etkisi daha zayıf
multiple multiple true boolean false

Çoklu seçimin desteklenip desteklenmediği.
name name true string ''

Form verileriyle birlikte gönderilen seçim kutusu adı.
value value false string | string[] ''

Form verileriyle birlikte gönderilen seçim kutusu değeri.

multiple özelliği belirtilmemişse, bu değer bir dizedir; multiple özelliği belirtilmişse, bu değer bir dize dizisidir. HTML özelliği yalnızca dize değeri ayarlayabilir; dizi değeri ayarlamak gerekiyorsa, JavaScript özelliği ile ayarlayın.
undefined defaultValue false 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.
label label true string

Etiket metni.
placeholder placeholder true string

Yer tutucu metni.
helper helper true string

Seçim kutusunun altındaki yardım metni. slot="helper" ile de ayarlanabilir.
clearable clearable true boolean false

Seçim kutusunun temizlenebilir olup olmadığı.
clear-icon clearIcon true string

Seçim kutusu temizlenebilir olduğunda, seçim kutusunun sağ tarafında görüntülenen temizleme butonu için Material Icons simge adı. slot="clear-icon" ile de ayarlanabilir.
placement placement true 'auto' | 'bottom' | 'top' 'auto'

Seçim kutusunun konumu. Olası değerler:

  • auto: Konumu otomatik olarak belirler
  • bottom: Altta
  • top: Üstte
end-aligned endAligned true boolean false

Metnin sağa hizalı olup olmadığı.
prefix prefix true string

Seçim kutusunun ön ek metni. Yalnızca odaklanma durumunda veya seçim kutusunda değer olduğunda gösterilir. slot="prefix" ile de ayarlanabilir.
suffix suffix true string

Seçim kutusunun son ek metni. Yalnızca odaklanma durumunda veya seçim kutusunda değer olduğunda gösterilir. slot="suffix" ile de ayarlanabilir.
icon icon true string

Seçim kutusunun ön ek simgesi için Material Icons simge adı. slot="icon" ile de ayarlanabilir.
end-icon endIcon true string

Seçim kutusunun son ek simgesi için Material Icons simge adı. slot="end-icon" ile de ayarlanabilir.
error-icon errorIcon true string

Form alanı doğrulaması başarısız olduğunda, seçim kutusunun sağ tarafında görüntülenen Material Icons simge adı. slot="error-icon" ile de ayarlanabilir.
form form true 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.
readonly readonly true boolean false

Salt okunur durumda olup olmadığı.
disabled disabled true boolean false

Devre dışı durumda olup olmadığı.
required required true boolean false

Form gönderilirken bu alanın doldurulmasının zorunlu olup olmadığı.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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.
autofocus autofocus true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
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.
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
change

Seçili değer değiştiğinde tetiklenir.
invalid

Form alanı doğrulaması başarısız olduğunda tetiklenir.
clear

clearable özelliği tarafından oluşturulan temizleme butonuna tıklandığında tetiklenir. event.preventDefault() çağrılarak seçim kutusunun temizlenmesi engellenebilir.
### Slots
Ad Açıklama
Varsayılan

<mdui-menu-item> öğeleri.
icon

Soldaki simge.
end-icon

Sağdaki simge.
error-icon

Doğrulama başarısız durumundaki sağdaki simge.
prefix

Soldaki metin.
suffix

Sağdaki metin.
clear-button

Temizleme butonu.
clear-icon

Temizleme butonundaki simge.
helper

Alttaki yardım metni.
### CSS Parts
Ad Açıklama
chips

Çoklu seçimde, seçili değerlere karşılık gelen chiplerin kabı.
chip

Çoklu seçimde, her bir seçili değere karşılık gelen chip.
chip__button

Chip içindeki <button> öğesi.
chip__label

Chip içindeki metin.
chip__delete-icon

Chip içindeki silme simgesi.
text-field

Metin kutusu, yani <mdui-text-field> öğesi.
text-field__container

text-field içindeki metin kutusu kabı.
text-field__icon

text-field içindeki soldaki simge.
text-field__end-icon

text-field içindeki sağdaki simge.
text-field__error-icon

text-field içindeki doğrulama başarısız durumundaki sağdaki simge.
text-field__prefix

text-field içindeki soldaki metin.
text-field__suffix

text-field içindeki sağdaki metin.
text-field__label

text-field içindeki etiket metni.
text-field__input

text-field içindeki <input> öğesi.
text-field__clear-button

text-field içindeki temizleme butonu.
text-field__clear-icon

text-field içindeki temizleme butonundaki simge.
text-field__supporting

text-field içindeki alt yardımcı bilgi kabı, helper ve error'u içerir.
text-field__helper

text-field içindeki alt yardım metni.
text-field__error

text-field içindeki alt hata açıklama metni.
menu

Açılır menü, yani <mdui-menu> öğesi.
# Segmentli Buton Bileşeni 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 {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js 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: ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` Kullanım örneği: ```html Gün Hafta Ay ``` ## Örnekler {#examples} ### Tam Genişlik Gösterimi {#example-full-width} `` öğesine `full-width` özniteliğini ekleyerek bileşenin tüm genişliği kaplamasını sağlayabilirsiniz. ```html Gün Hafta Ay ``` ### Tek Seçim Modu {#example-selects-single} `` öğesinde `selects` özniteliğini `single` olarak belirterek tek seçim modunu etkinleştirebilirsiniz. Bu durumda, `` bileşeninin `value` değeri, seçili olan `` bileşeninin `value` değerine eşit olur. ```html Gün Hafta Ay Gün Hafta Ay ``` ### Çoklu Seçim Modu {#example-selects-multiple} `` öğesinde `selects` özniteliğini `multiple` olarak belirterek çoklu seçim modunu etkinleştirebilirsiniz. Bu durumda, `` bileşeninin `value` değeri, seçili olan `` bileşenlerinin `value` değerlerinden oluşan bir dizi olur. Not: Çoklu seçim modunda, `` bileşeninin `value` değeri bir dizidir ve bu değeri yalnızca JavaScript özelliği aracılığıyla okuyabilir ve ayarlayabilirsiniz. ```html Gün Hafta Ay Gün Hafta Ay ``` ### Simge {#example-icon} `` öğ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. ```html Gün Hafta Ay ``` `` öğesinde `selected-icon` özniteliğini ekleyerek seçili durumdaki Material Icons simgesini ayarlayabilirsiniz. Ayrıca `selected-icon` slot'u aracılığıyla da ayarlayabilirsiniz. ```html Gün Hafta ``` ### Bağlantı {#example-link} `` öğ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`. ```html Bağlantı Hafta Ay ``` ### Devre Dışı ve yükleniyor durumu {#example-disabled} `` öğesine `disabled` özniteliğini ekleyerek tüm segmentli buton grubunu devre dışı bırakabilirsiniz. ```html Gün Hafta Ay ``` `` öğesine `disabled` özniteliğini ekleyerek belirli bir butonu devre dışı bırakabilir; `loading` özniteliğini ekleyerek belirli bir butona yükleniyor durumu ekleyebilirsiniz. ```html Gün Hafta Ay Yıl ``` ## mdui-segmented-button-group API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
full-width fullWidth true boolean false

Ana öğenin genişliğini doldurup doldurmayacağı.
selects selects true '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 true boolean false

Devre dışı durumda olup olmadığı.
required required true boolean false

Form gönderilirken seçilmesinin zorunlu olup olmadığı.
form form true 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 true string ''

Form gönderilirken kullanılacak ad, form verileriyle birlikte gönderilir.
value value false 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.
undefined defaultValue false 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.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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 Açıklama
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 Açıklama
change

Seçili değer değiştiğinde tetiklenir.
invalid

Form alanı doğrulaması başarısız olduğunda tetiklenir.
### Slots
Ad Açıklama
Varsayılan

<mdui-segmented-button> bileşeni.
### CSS Custom Property
Ad Açıklama
--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 Reflect Tür Varsayılan Açıklama
icon icon true string

Soldaki Material Icons simge adı. slot="icon" ile de ayarlanabilir.
end-icon endIcon true string

Sağdaki Material Icons simge adı. slot="end-icon" ile de ayarlanabilir.
selected-icon selectedIcon true string

Seçili durumdaki Material Icons simge adı. slot="selected-icon" ile de ayarlanabilir.
href href true 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 true string

İndirme bağlantısının hedefi.

Not: Bu özellik yalnızca href özelliği belirtildiğinde geçerlidir.
target target true '_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 true '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 true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
disabled disabled true boolean false

Devre dışı olup olmadığı.
loading loading true boolean false

Yüklenme durumunda olup olmadığı.
name name true string ''

Form verileriyle birlikte gönderilen buton adı.

Not: Bu özellik yalnızca href özelliği belirtilmediğinde geçerlidir.
value value true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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 Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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 Açıklama
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 Açıklama
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 Açıklama
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.
# Kaydırıcı Bileşeni Kaydırıcı bileşeni, kullanıcının kaydırıcıyı sürükleyerek bir dizi değer arasından seçim yapmasına olanak tanır. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/slider.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Slider } from 'mdui/components/slider.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### Varsayılan Değer {#example-value} `value` özniteliği aracılığıyla kaydırıcının geçerli değerini okuyabilir veya ayarlayabilirsiniz. ```html ``` ### Devre Dışı Durumu {#example-disabled} Kaydırıcıyı devre dışı bırakmak için `disabled` özniteliğini ekleyin. ```html ``` ### Aralık {#example-min-max} Kaydırıcının minimum ve maksimum değerlerini ayarlamak için `min` ve `max` özniteliklerini kullanın. ```html ``` ### Adım Aralığı {#example-step} Kaydırıcının adım aralığını ayarlamak için `step` özniteliğini kullanın. ```html ``` ### Ölçek İşaretleri {#example-tickmarks} Kaydırıcıda ölçek işaretleri göstermek için `tickmarks` özniteliğini ekleyin. ```html ``` ### Metin İpucunu Gizleme {#example-nolabel} Kaydırıcıdaki metin ipucunu gizlemek istiyorsanız `nolabel` özniteliğini ekleyin. ```html ``` ### Metin İpucunu Değiştirme {#example-labelFormatter} Metin ipucunun görüntüleme biçimini değiştirmek için `labelFormatter` JavaScript özelliğini kullanabilirsiniz. Bu özellik bir fonksiyondur. Fonksiyon, geçerli kaydırıcı değerini parametre olarak alır ve görüntülemek istediğiniz metni döndürür. ```html ``` ## mdui-slider API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
value value false number 0

Form verileriyle birlikte gönderilen kaydırıcı değeri.
undefined defaultValue false number 0

Varsayılan 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.
autofocus autofocus true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
min min true number 0

Kaydırıcının minimum değeri. Varsayılan 0'dır.
max max true number 100

Kaydırıcının maksimum değeri. Varsayılan 100'dür.
step step true number 1

Adım aralığı. Varsayılan 1'dir.
tickmarks tickmarks true boolean false

İşaret çentiklerinin eklenip eklenmeyeceği.
nolabel nolabel true boolean false

Metin ipucunun gizlenip gizlenmeyeceği.
disabled disabled true boolean false

Devre dışı olup olmadığı.
form form true 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 true string ''

Form verileriyle birlikte gönderilen kaydırıcı adı.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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.
undefined labelFormatter false (value: number) => string

Etiketin görüntüleme biçimini özelleştirmek için kullanılan işlev. İşlevin parametresi kaydırıcının geçerli değeridir ve dönüş değeri görüntülenmesi istenen metindir.
### Yöntemler
Ad Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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 Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
change

Değer değiştiğinde ve odak kaybedildiğinde tetiklenir.
input

Değer değiştiğinde tetiklenir.
invalid

Form alanı doğrulaması başarısız olduğunda tetiklenir.
### CSS Parts
Ad Açıklama
track-inactive

Etkin olmayan durumdaki iz.
track-active

Etkin durumdaki iz.
handle

Kontrol kolu.
label

İpucu metni.
tickmark

İşaret çentiği.
# Snackbar Bileşeni Snackbar bileşeni, sayfada kısa uygulama süreci bilgilerini görüntülemek için kullanılır. Bu bileşeni doğrudan kullanmanın yanı sıra, mdui ayrıca Snackbar bileşeninin kullanımını kolaylaştıran bir [`mdui.snackbar`](/tr/docs/2/functions/snackbar) fonksiyonu sunar. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/snackbar.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` Kullanım örneği: ```html Fotoğraf arşivlendi Snackbar'ı Aç ``` ## Örnekler {#examples} ### Konum {#example-placement} `placement` özniteliği aracılığıyla Snackbar'ın görüntüleneceği konumu ayarlayabilirsiniz. ```html
Fotoğraf arşivlendi üst-sol Fotoğraf arşivlendi üst Fotoğraf arşivlendi üst-sağ
Fotoğraf arşivlendi alt-sol Fotoğraf arşivlendi alt Fotoğraf arşivlendi alt-sağ
``` ### İşlem Butonu {#example-action} Snackbar'ın sağ tarafına bir işlem butonu eklemek için `action` özniteliğini kullanabilir ve butonun metnini bu öznitelik aracılığıyla belirtebilirsiniz. İşlem butonuna tıklamak `action-click` olayını tetikler. İşlem butonunun yükleniyor durumunda görünmesini istiyorsanız `action-loading` özniteliğini ekleyebilirsiniz. ```html Fotoğraf arşivlendi Snackbar'ı Aç ``` Ayrıca `action` slot'u aracılığıyla Snackbar'ın sağ tarafına özel bir öğe de ekleyebilirsiniz. ```html Fotoğraf arşivlendi Geri Al Snackbar'ı Aç ``` ### Kapatılabilir {#example-closeable} `closeable` özniteliğini ekledikten sonra, Snackbar'ın sağ tarafında bir kapatma butonu belirir. Bu butona tıklamak Snackbar'ı kapatır ve `close` olayını tetikler. ```html Fotoğraf arşivlendi Snackbar'ı Aç ``` Kapatma butonunun öğesini `close-button` slot'u aracılığıyla özelleştirebilirsiniz. ```html Fotoğraf arşivlendi Snackbar'ı Aç ``` Varsayılan kapatma butonundaki Material Icons simgesini değiştirmek için `close-icon` özniteliğini kullanabilirsiniz. Ayrıca kapatma butonundaki simge öğesini `close-icon` slot'u aracılığıyla da özelleştirebilirsiniz. ```html Fotoğraf arşivlendi Snackbar'ı Aç ``` ### Metin Satır Sayısı {#example-message-line} Varsayılan olarak, mesaj metninin satır sayısı sınırlandırılmamıştır. Metin satır sayısını `message-line` özniteliği aracılığıyla sınırlayabilirsiniz, en fazla 2 satır olabilir. ```html Öğe zaten "seyahat" etiketine sahip. Yeni bir etiket ekleyebilirsiniz. Yeni bir etiket ekleyebilirsiniz. Snackbar'ı Aç ``` ### Otomatik Kapanma Gecikmesi {#example-auto-close-delay} Otomatik kapanma gecikmesini ayarlamak için `auto-close-delay` özniteliğini kullanabilirsiniz. Birim milisaniyedir. Varsayılan değer 5000 milisaniyedir. ```html Fotoğraf arşivlendi Snackbar'ı Aç ``` ### Dış Alana Tıklayarak Kapatma {#example-close-on-outside-click} `close-on-outside-click` özniteliğini ekleyerek, Snackbar'ın dışındaki bir alana tıklandığında Snackbar'ın kapanmasını sağlayabilirsiniz. ```html Fotoğraf arşivlendi Snackbar'ı Aç ``` ## mdui-snackbar API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
open open true boolean false

Snackbar'ın gösterilip gösterilmeyeceği.
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

Snackbar'ın gösterim konumu. Varsayılan bottom'dır. Olası değerler:

  • top: Üstte ortalanmış
  • top-start: Üstte sola hizalı
  • top-end: Üstte sağa hizalı
  • bottom: Altta ortalanmış
  • bottom-start: Altta sola hizalı
  • bottom-end: Altta sağa hizalı
action action true string

İşlem butonunun metni. slot="action" ile işlem butonu da ayarlanabilir.
action-loading actionLoading true boolean false

İşlem butonunun yüklenme durumunda olup olmadığı.
closeable closeable true boolean false

Sağ tarafta kapatma butonu gösterilip gösterilmeyeceği.
close-icon closeIcon true string

Kapatma butonunun Material Icons simge adı. slot="close-icon" ile de ayarlanabilir.
message-line messageLine true 1 | 2

Mesaj metninin maksimum görüntülenme satır sayısı. Varsayılan olarak sınır yoktur. Olası değerler:

  • 1: En fazla bir satır gösterir
  • 2: En fazla iki satır gösterir
auto-close-delay autoCloseDelay true number 5000

Otomatik kapanma gecikme süresi (milisaniye). 0 olarak ayarlanırsa otomatik kapanmaz. Varsayılan 5000 milisaniyedir.
close-on-outside-click closeOnOutsideClick true boolean false

Snackbar dışındaki bir alana tıklandığında veya dokunulduğunda Snackbar'ın kapanıp kapanmayacağı.
### Olaylar
Ad Açıklama
open

Snackbar gösterilmeye başladığında tetiklenir. event.preventDefault() çağrılarak Snackbar'ın gösterilmesi engellenebilir.
opened

Snackbar gösterim animasyonu tamamlandığında tetiklenir.
close

Snackbar gizlenmeye başladığında tetiklenir. event.preventDefault() çağrılarak Snackbar'ın kapanması engellenebilir.
closed

Snackbar gizleme animasyonu tamamlandığında tetiklenir.
action-click

İşlem butonuna tıklandığında tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Snackbar'ın mesaj metin içeriği.
action

Sağdaki işlem butonu.
close-button

Sağdaki kapatma butonu. closeable özelliğinin true olarak ayarlanması gerekir.
close-icon

Kapatma butonundaki simge.
### CSS Parts
Ad Açıklama
message

Mesaj metni.
action

İşlem butonu.
close-button

Kapatma butonu.
close-icon

Kapatma butonundaki simge.
### CSS Custom Property
Ad Açıklama
--shape-corner

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

Bileşenin CSS z-index değeri.
# Anahtar Bileşeni Anahtar bileşeni, tek bir seçeneğin açık veya kapalı durumunu değiştirmek için kullanılır. Sezgisel etkileşim tasarımı sayesinde kullanıcıların ayarları kolayca değiştirmesini sağlar. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/switch.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### Seçili Durumu {#example-checked} Anahtar seçiliyken, `checked` özniteliğinin değeri `true` olur. Ayrıca `checked` özniteliğini ekleyerek anahtarın varsayılan olarak seçili durumda olmasını sağlayabilirsiniz. ```html ``` ### Devre Dışı Durumu {#example-disabled} `disabled` özniteliğini ekleyerek anahtar bileşenini devre dışı bırakabilirsiniz. ```html ``` ### Simge {#example-icon} Seçilmemiş durumdaki Material Icons simgesini ayarlamak için `unchecked-icon` özniteliğini, seçili durumdaki simgeyi ayarlamak için `checked-icon` özniteliğini kullanabilirsiniz. Ayrıca `unchecked-icon` ve `checked-icon` slot'ları aracılığıyla da seçilmemiş ve seçili durumlardaki simge öğelerini özelleştirebilirsiniz. ```html ``` ## mdui-switch API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
disabled disabled true boolean false

Devre dışı durumda olup olmadığı.
checked checked true boolean false

Seçili durumda olup olmadığı.
undefined defaultChecked false boolean false

Varsayılan seçili durumu. Form sıfırlandığında bu duruma sıfırlanır. Bu özellik yalnızca JavaScript özelliği ile ayarlanabilir.
unchecked-icon uncheckedIcon true string

Seçili olmayan durumdaki Material Icons simge adı. slot="unchecked-icon" ile de ayarlanabilir.
checked-icon checkedIcon true string

Seçili durumdaki Material Icons simge adı. slot="checked-icon" ile de ayarlanabilir.

Varsayılan olarak check simgesidir; varsayılan simgeyi kaldırmak için boş dize iletilebilir.
required required true boolean false

Form gönderilirken bu anahtarın seçilmesinin zorunlu olup olmadığı.
form form true 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 true string ''

Form verileriyle birlikte gönderilen anahtar adı.
value value true string 'on'

Form verileriyle birlikte gönderilen anahtar değeri.
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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.
autofocus autofocus true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
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.
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
change

Seçim durumu değiştiğinde tetiklenir.
input

Seçim durumu değiştiğinde tetiklenir.
invalid

Form alanı doğrulaması başarısız olduğunda tetiklenir.
### Slots
Ad Açıklama
unchecked-icon

Seçili olmayan durumdaki öğe.
checked-icon

Seçili durumdaki öğe.
### CSS Parts
Ad Açıklama
track

İz.
thumb

Simge alanı.
unchecked-icon

Seçili olmayan durumdaki simge.
checked-icon

Seçili durumdaki simge.
### CSS Custom Property
Ad Açıklama
--shape-corner

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

Bileşen simge alanının köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
# Sekme Bileşeni Sekme bileşeni, içeriği veya veri kümelerini gruplandırmak ve görüntülemek için kullanılır. Bu sayede kullanıcılar farklı kategoriler arasında hızlıca geçiş yapabilir. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { Tabs } from 'mdui/components/tabs.js'; import type { Tab } from 'mdui/components/tab.js'; import type { TabPanel } from 'mdui/components/tab-panel.js'; ``` Kullanım örneği: ```html Sekme 1 Sekme 2 Sekme 3 Panel 1 Panel 2 Panel 3 ``` ## Örnekler {#examples} ### Sekme Stili {#example-variant} `` bileşeninde `variant` özniteliğini kullanarak sekmelerin stilini ayarlayabilirsiniz. ```html Sekme 1 Sekme 2 Sekme 3 Panel 1 Panel 2 Panel 3 Sekme 1 Sekme 2 Sekme 3 Panel 1 Panel 2 Panel 3 ``` ### Sekme Konumu {#example-placement} `` bileşeninde `placement` özniteliğini kullanarak sekmelerin konumunu ayarlayabilirsiniz. ```html üst-sol üst üst-sağ alt-sol alt alt-sağ sol-üst sol sol-alt sağ-üst sağ sağ-alt Sekme 1 Sekme 2 Sekme 3 Panel 1 Panel 2 Panel 3 ``` ### Tam Genişlik Gösterimi {#example-full-width} `` bileşenine `full-width` özniteliğini ekleyerek sekmelerin tüm genişliği kaplamasını sağlayabilirsiniz. Bu durumda her bir sekme genişliği eşit olarak paylaşır. ```html Sekme 1 Sekme 2 Sekme 3 Panel 1 Panel 2 Panel 3 ``` ### Simge {#example-icon} `` bileşeninde `icon` özniteliğini ayarlayarak sekmeye Material Icons simgesi ekleyebilirsiniz. Ayrıca `icon` slot'u aracılığıyla da simge öğesi ekleyebilirsiniz. Simgeyi ve metni yatay olarak hizalamak için `inline` özniteliğini ekleyin. ```html Sekme 1 Sekme 2 Sekme 3 Panel 1 Panel 2 Panel 3 ``` ### Rozet {#example-badge} `` bileşeninde, `badge` slot'u aracılığıyla rozet ekleyebilirsiniz. ```html Sekme 1 99+ Sekme 2 Sekme 3 Panel 1 Panel 2 Panel 3 ``` ### Özel İçerik {#example-custom} `` bileşeninde `custom` slot'unu kullanarak sekmenin içeriğini tamamen özelleştirebilirsiniz. ```html Sekme 1 Simge Sekme 2 Sekme 3 Panel 1 Panel 2 Panel 3 ``` ## mdui-tab-panel API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
value value true string

Sekme panel öğesinin değeri.
### Slots
Ad Açıklama
Varsayılan

Sekme panel öğesi içeriği.
## mdui-tab API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
value value true string

Sekme gezinme öğesinin değeri.
icon icon true string

Material Icons simge adı. slot="icon" ile de ayarlanabilir.
inline inline true boolean false

Simge ve metnin yatay olarak düzenlenip düzenlenmeyeceği.
autofocus autofocus true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Sekme gezinme öğesinin metin içeriği.
icon

Sekme gezinme öğesindeki simge.
badge

Rozet.
custom

Tüm sekme gezinme öğesindeki içeriği özelleştirir.
### CSS Parts
Ad Açıklama
container

Sekme gezinme öğesi kabı.
icon

Sekme gezinme öğesindeki simge.
label

Sekme gezinme öğesinin metni.
## mdui-tabs API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true 'primary' | 'secondary' 'primary'

Sekme şekli. Olası değerler:

  • primary: Uygulamanın ana sayfaları arasında geçiş yapmak için <mdui-top-app-bar> altında kullanıma uygundur
  • secondary: Bir sayfada, bir grup ilgili içerik arasında geçiş yapmak için kullanıma uygundur
value value true string

Şu anda etkin olan <mdui-tab> değeri.
placement placement true 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'top-start'

Sekme konumu. Varsayılan top-start'tır. Olası değerler:

  • top-start: Üstte, sola hizalı
  • top: Üstte, ortalanmış
  • top-end: Üstte, sağa hizalı
  • bottom-start: Altta, sola hizalı
  • bottom: Altta, ortalanmış
  • bottom-end: Altta, sağa hizalı
  • left-start: Solda, üste hizalı
  • left: Solda, ortalanmış
  • left-end: Solda, alta hizalı
  • right-start: Sağda, üste hizalı
  • right: Sağda, ortalanmış
  • right-end: Sağda, alta hizalı
full-width fullWidth true boolean false

Ana öğenin genişliğini doldurup doldurmayacağı.
### Olaylar
Ad Açıklama
change

Seçili değer değiştiğinde tetiklenir.
### Slots
Ad Açıklama
Varsayılan

<mdui-tab> öğeleri.
panel

<mdui-tab-panel> öğeleri.
### CSS Parts
Ad Açıklama
container

<mdui-tab> öğelerinin kabı.
indicator

Etkin durum göstergesi.
# Metin Alanı Bileşeni Metin alanı bileşeni, kullanıcının sayfaya metin girmesine olanak tanır. Genellikle formlar ve diyaloglar için kullanılır. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/text-field.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` Kullanım örneği: ```html ``` ## Örnekler {#examples} ### Şekil {#example-variant} Metin alanının şeklini `variant` özniteliği aracılığıyla ayarlayın. ```html

``` ### Yardımcı Metin {#example-helper-text} Metin alanının üzerindeki etiket metnini `label` özniteliği aracılığıyla ayarlayın. ```html ``` Bir değer girilmediğinde görünecek yer tutucu metni `placeholder` özniteliği aracılığıyla ayarlayın. ```html ``` Metin alanının altındaki yardım metnini `helper` özniteliği aracılığıyla ayarlayın. Yardım metnini ayarlamak için `helper` slot'unu da kullanabilirsiniz. `helper-on-focus` özniteliğini eklemek, yardım metnini yalnızca metin alanı odaklandığında gösterir. ```html Destekleyici metin ``` ### Temizlenebilir {#example-clearable} `clearable` özniteliğini ekledikten sonra, metin alanında bir değer varken sağ tarafta bir temizleme butonu belirir. ```html ``` ### Metni Sağa Hizalama {#example-end-aligned} `end-aligned` özniteliğini ekleyerek metni sağa hizalayabilirsiniz. ```html ``` ### Ön ve Arka Metin ve Simgeler {#example-prefix-suffix} `icon` ve `end-icon` özniteliklerini ayarlayarak, metin alanının soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz. Ayrıca `icon` ve `end-icon` slot'ları aracılığıyla da metin alanının soluna ve sağına öğeler ekleyebilirsiniz. ```html

``` `prefix` ve `suffix` özniteliklerini ayarlayarak, metin alanının soluna ve sağına metin ekleyebilirsiniz. Ayrıca `prefix` ve `suffix` slot'ları aracılığıyla da metin alanının soluna ve sağına metin öğeleri ekleyebilirsiniz. Bu metinler yalnızca metin alanı odaklandığında veya bir değer girdiğinde görünür. ```html

$ /100 ``` ### Salt Okunur Modu {#example-readonly} `readonly` özniteliğini ekleyerek metin alanını salt okunur moda ayarlayabilirsiniz. ```html ``` ### Devre Dışı Durumu {#example-disabled} `disabled` özniteliğini ekleyerek metin alanını devre dışı bırakabilirsiniz. ```html ``` ### Çok Satırlı Metin Alanı {#example-rows} `rows` özniteliği aracılığıyla çok satırlı metin alanının satır sayısını ayarlayabilirsiniz. ```html ``` Ayrıca `autosize` özniteliğini ekleyerek metin alanının girilen içeriğin uzunluğuna göre otomatik olarak yüksekliğini ayarlamasını sağlayabilirsiniz. Otomatik yükseklik ayarlaması sırasındaki minimum ve maksimum satır sayısını `min-rows` ve `max-rows` öznitelikleri aracılığıyla belirleyebilirsiniz. ```html

``` ### Karakter Sayacı {#example-counter} `maxlength` özniteliği ile maksimum karakter sayısını belirlediğinizde, `counter` özniteliğini ekleyerek metin alanının altında karakter sayacını gösterebilirsiniz. ```html ``` ### Şifre Alanı {#example-password} `type="password"` olduğunda, `toggle-password` özniteliğini ekleyerek metin alanının sağ tarafında şifre görünürlüğünü değiştiren bir buton ekleyebilirsiniz. ```html ``` ## mdui-text-field API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true 'filled' | 'outlined' 'filled'

Metin alanının şekli. Varsayılan filled'dır. Olası değerler:

  • filled: Arka plan renkli metin alanı, görsel etkisi daha güçlü
  • outlined: Kenarlıklı metin alanı, görsel etkisi daha zayıf
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

Metin alanı giriş türü. Varsayılan text'tir. Olası değerler:

  • text: Varsayılan değer. Metin alanı
  • number: Yalnızca sayı girişine izin verir. Dinamik klavyeli cihazlarda sayısal klavye gösterilir
  • password: Parola girişi için kullanılır, değeri maskelenir
  • url: URL girişi için kullanılır, URL biçimini doğrular. Dinamik klavyeyi destekleyen cihazlarda uygun klavye bulunur
  • email: E-posta adresi girişi için kullanılır, e-posta biçimini doğrular. Dinamik klavyeyi destekleyen cihazlarda uygun klavye bulunur
  • search: Arama kutusu için kullanılır. Dinamik klavyeli cihazlardaki enter simgesi arama simgesine dönüşür
  • tel: Telefon numarası girişi için kullanılır. Dinamik klavyeli cihazlarda telefon numarası tuş takımı gösterilir
  • hidden: Bu denetimi gizler, ancak değeri sunucuya gönderilir
  • date: Tarih girişi denetimi (yıl, ay, gün, saat hariç). Desteklenen tarayıcılarda etkinleştirildiğinde tarih seçici veya yıl-ay-gün sayısal tekerleği açılır
  • datetime-local: Saat dilimi hariç tarih ve saat girişi denetimi. Desteklenen tarayıcılarda etkinleştirildiğinde tarih seçici veya yıl-ay-gün sayısal tekerleği açılır
  • month: Yıl ve ay girişi denetimi, saat dilimi yok
  • time: Saat girişi denetimi, saat dilimi yok
  • week: Yıl ve hafta numarasından oluşan tarih girişi denetimi, saat dilimi yok
name name true string ''

Form verileriyle birlikte gönderilen metin alanı adı.
value value false string ''

Form verileriyle birlikte gönderilen metin alanı değeri.
undefined defaultValue false string ''

Varsayılan 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.
label label true string

Etiket metni.
placeholder placeholder true string

Yer tutucu metni.
helper helper true string

Metin alanının altındaki yardım metni. slot="helper" ile de ayarlanabilir.
helper-on-focus helperOnFocus true boolean false

Yardım metninin yalnızca odaklanıldığında gösterilip gösterilmeyeceği.
clearable clearable true boolean false

Metin alanı içeriğinin temizlenebilir olup olmadığı.
clear-icon clearIcon true string

Metin alanı temizlenebilir olduğunda, metin alanının sağ tarafında görüntülenen temizleme butonu için Material Icons simge adı. slot="clear-icon" ile de ayarlanabilir.
end-aligned endAligned true boolean false

Metnin sağa hizalı olup olmadığı.
prefix prefix true string

Metin alanının ön ek metni. Yalnızca metin alanı odaklandığında veya değer olduğunda gösterilir. slot="prefix" ile de ayarlanabilir.
suffix suffix true string

Metin alanının son ek metni. Yalnızca metin alanı odaklandığında veya değer olduğunda gösterilir. slot="suffix" ile de ayarlanabilir.
icon icon true string

Metin alanının ön ek simgesi için Material Icons simge adı. slot="icon" ile de ayarlanabilir.
end-icon endIcon true string

Metin alanının son ek simgesi için Material Icons simge adı. slot="end-icon" ile de ayarlanabilir.
error-icon errorIcon true string

Form alanı doğrulaması başarısız olduğunda, metin alanının sağ tarafında görüntülenen Material Icons simge adı. slot="error-icon" ile de ayarlanabilir.
form form true 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.
readonly readonly true boolean false

Salt okunur modda olup olmadığı.
disabled disabled true boolean false

Giriş kutusunun devre dışı olup olmadığı.
required required true boolean false

Form gönderilirken bu alanın doldurulmasının zorunlu olup olmadığı.
rows rows true number

Metin alanının sabit görüntülenme satır sayısı.
autosize autosize true boolean false

Metin alanı yüksekliğinin giriş içeriğine göre otomatik ayarlanıp ayarlanmayacağı.
min-rows minRows true number

autosize true olduğunda metin alanının minimum satır sayısı.
max-rows maxRows true number

autosize true olduğunda metin alanının maksimum satır sayısı.
minlength minlength true number

İzin verilen minimum karakter sayısı.
maxlength maxlength true number

İzin verilen maksimum karakter sayısı.
counter counter true boolean false

Karakter sayısının gösterilip gösterilmeyeceği, yalnızca maxlength belirtildiğinde geçerlidir.
min min true number

type number olduğunda izin verilen minimum sayısal değer.
max max true number

type number olduğunda izin verilen maksimum sayısal değer.
step step true number

type number olduğunda sayısal artış/azalış adımı.
pattern pattern true string

Form doğrulaması için kullanılan düzenli ifade.
toggle-password togglePassword true boolean false

type password olduğunda, bu özellik ayarlanırsa, düz metin ve gizli metin arasında geçiş yapmak için bir geçiş butonu eklenir.
show-password-icon showPasswordIcon true string

Parola geçiş butonunun Material Icons simgesi, parola düz metin olduğunda gösterilir. slot="show-password-icon" ile de ayarlanabilir.
hide-password-icon hidePasswordIcon true string

Parola geçiş butonunun Material Icons simgesi, parola gizli olduğunda gösterilir. slot="hide-password-icon" ile de ayarlanabilir.
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

iOS'un standart olmayan özelliği, metnin ilk harfinin otomatik olarak büyük harf yapılıp yapılmayacağını kontrol eder. iOS5 ve sonraki sürümlerde geçerlidir. Olası değerler:

  • none: İlk harf büyütmeyi devre dışı bırakır
  • sentences: Cümlelerin ilk harfi büyük yapılır
  • words: Kelimelerin ilk harfi büyük yapılır
  • characters: Tüm harfler büyük yapılır
autocorrect autocorrect true string

input öğesinin autocorrect özelliği.
autocomplete autocomplete true string

input öğesinin autocomplete özelliği.
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

input öğesinin enterkeyhint özelliği, sanal klavyedeki Enter tuşunun görüntülenen metnini veya simgesini özelleştirmek için kullanılır. Görüntülenme etkisi kullanıcının cihazına ve diline bağlıdır. Olası değerler:

  • enter: Yeni satır ekler
  • done: Girişi tamamlar, sanal klavyeyi kapatır
  • go: Giriş metninin hedefine gider
  • next: Sonraki giriş öğesine gider
  • previous: Önceki giriş öğesine gider
  • search: Arama sonuçlarına gider
  • send: Metin bilgisini gönderir
spellcheck spellcheck true boolean false

Yazım denetiminin etkinleştirilip etkinleştirilmeyeceği.
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

input öğesinin inputmode özelliği, sanal klavyenin türünü özelleştirmek için kullanılır. Olası değerler:

  • none: Sanal klavye yok. Kendi klavye giriş denetimini uygularken kullanışlıdır
  • text: Standart metin giriş klavyesi
  • decimal: Ondalık sayı giriş klavyesi, sayıların yanı sıra ondalık nokta . veya binlik ayırıcı virgül , olabilir
  • numeric: 0-9 arası sayıların gösterildiği sayısal klavye
  • tel: Telefon numarası klavyesi, 0-9 arası sayılar, yıldız * veya kare # tuşlarını içerir
  • search: Arama girişi için optimize edilmiş sanal klavye, gönder butonu genellikle search veya "Ara" olarak gösterilir
  • email: E-posta adresi girişi için optimize edilmiş sanal klavye, genellikle @ . gibi tuşlar bulunur
  • url: URL girişi için optimize edilmiş sanal klavye, genellikle . / # gibi tuşlar bulunur
undefined validity false ValidityState

Form doğrulama durumu nesnesi. Ayrıntılar için ValidityState'e bakın.
undefined validationMessage false 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.
undefined valueAsNumber false number

Geçerli değeri alır ve number türüne dönüştürür; veya bir number türünde değer ayarlar. Değer number türüne dönüştürülemezse NaN döndürür.
autofocus autofocus true boolean false

Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
tabindex tabIndex false number

Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
### Yöntemler
Ad Açıklama
select(): void

Metin alanındaki metni seçer.
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

Metin alanında belirli bir aralığı seçer.
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

Metin alanında belirli bir aralıktaki metni yeni metinle değiştirir.
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.
click(): void

Öğeye fare tıklamasını simüle eder.
focus(options?: FocusOptions): 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.
### Olaylar
Ad Açıklama
focus

Odak alındığında tetiklenir.
blur

Odak kaybedildiğinde tetiklenir.
change

Metin alanının değeri değiştiğinde ve odak kaybedildiğinde tetiklenir.
input

Metin alanının değeri değiştiğinde tetiklenir.
invalid

Form alanı doğrulaması başarısız olduğunda tetiklenir.
clear

clearable özelliği tarafından oluşturulan temizleme butonuna tıklandığında tetiklenir. event.preventDefault() çağrılarak metin alanının temizlenmesi engellenebilir.
### Slots
Ad Açıklama
icon

Soldaki simge.
end-icon

Sağdaki simge.
error-icon

Doğrulama başarısız durumundaki sağdaki simge.
prefix

Soldaki metin.
suffix

Sağdaki metin.
clear-button

Temizleme butonu.
clear-icon

Temizleme butonundaki simge.
toggle-password-button

Parola gösterim durumu geçiş butonu.
show-password-icon

Parola göster durumunda, parola gösterim durumu geçiş butonundaki simge.
hide-password-icon

Parola gizle durumunda, parola gösterim durumu geçiş butonundaki simge.
helper

Alttaki yardım metni.
### CSS Parts
Ad Açıklama
container

Metin alanı kabı.
icon

Soldaki simge.
end-icon

Sağdaki simge.
error-icon

Doğrulama başarısız durumundaki sağdaki simge.
prefix

Soldaki metin.
suffix

Sağdaki metin.
label

Üstteki etiket metni.
input

İçteki <input> veya <textarea> öğesi.
clear-button

Temizleme butonu.
clear-icon

Temizleme butonundaki simge.
toggle-password-button

Parola gösterim durumu geçiş butonu.
show-password-icon

Parola göster durumunda, parola gösterim durumu geçiş butonundaki simge.
hide-password-icon

Parola gizle durumunda, parola gösterim durumu geçiş butonundaki simge.
supporting

Alt yardımcı bilgi kabı; helper, error ve counter'ı içerir.
helper

Alttaki yardım metni.
error

Alttaki hata açıklama metni.
counter

Alttaki sağdaki karakter sayısı.
# Tooltip Bileşeni Tooltip, belirli bir öğeye ek metin ipucu veya bağlam bilgisi sağlamak için kullanılır. Bu sayede kullanıcıların öğenin işlevini veya amacını daha iyi anlamasına yardımcı olur. ## Kullanım Şekli {#usage} Bileşeni ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/tooltip.js'; ``` Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Kullanım örneği: ```html buton ``` ## Örnekler {#examples} ### Düz metin tooltip {#example-plain} Varsayılan olarak düz metin tooltip'tir. Tooltip içeriğini `content` özniteliği aracılığıyla ayarlayabilirsiniz. ```html buton ``` Tooltip içeriğini `content` slot'u aracılığıyla da ayarlayabilirsiniz. ```html buton
başlık
içerik
 ``` ### Zengin tooltip {#example-rich} `variant` özniteliğini `rich` olarak ayarlayarak zengin tooltip oluşturabilirsiniz. Tooltip'in başlığını `headline` özniteliği, içeriğini `content` özniteliği aracılığıyla ayarlayabilirsiniz. ```html buton ``` Tooltip'in başlığını ve içeriğini `headline`, `content` slot'ları aracılığıyla da ayarlayabilirsiniz. Tooltip'in işlem butonunu `action` slot'u aracılığıyla ayarlayabilirsiniz. ```html buton
Zengin tooltip
Zengin tooltipler, kullanıcının odağını gerektiren belirli bir özellik öğesine dikkat çeker. Birden fazla satır bilgilendirici metni destekler.
İşlem ``` ### Konum {#example-placement} Tooltip'in konumunu `placement` özniteliği aracılığıyla ayarlayabilirsiniz. ```html
``` ### Tetikleme Şekli {#example-trigger} Tooltip'in tetikleme şeklini `trigger` özniteliği aracılığıyla ayarlayabilirsiniz. ```html buton ``` ### Açma/Kapama Gecikmesi {#example-delay} Tetikleme şekli `hover` olduğunda, tooltip'in açma ve kapama gecikmesini `open-delay` ve `close-delay` öznitelikleri aracılığıyla ayarlayabilirsiniz. Birim milisaniyedir. ```html buton ``` ### Devre Dışı Durumu {#example-disabled} `disabled` özniteliğini ekleyerek tooltip'i devre dışı bırakabilirsiniz. ```html buton ``` ## mdui-tooltip API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true 'plain' | 'rich' 'plain'

Tooltip'in şekli. Varsayılan plain'dir. Olası değerler:

  • plain: Düz metin, basit tek satırlı metinler için uygundur
  • rich: Zengin metin, başlık, gövde ve işlem butonları içerebilir
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Tooltip'in konumu. Varsayılan auto'dur. Olası değerler:

  • auto: Konumu otomatik olarak belirler. variant="plain" olduğunda öncelikle top kullanılır; variant="rich" olduğunda öncelikle bottom-right kullanılır
  • top-left: Sol üstte
  • top-start: Üstte, sola hizalı
  • top: Üstte, ortalanmış
  • top-end: Üstte, sağa hizalı
  • top-right: Sağ üstte
  • bottom-left: Sol altta
  • bottom-start: Altta, sola hizalı
  • bottom: Altta, ortalanmış
  • bottom-end: Altta, sağa hizalı
  • bottom-right: Sağ altta
  • left-start: Solda, üste hizalı
  • left: Solda, ortalanmış
  • left-end: Solda, alta hizalı
  • right-start: Sağda, üste hizalı
  • right: Sağda, ortalanmış
  • right-end: Sağda, alta hizalı
open-delay openDelay true number 150

Fareyle üzerine gelerek gösterim gecikmesi, milisaniye cinsinden.
close-delay closeDelay true number 150

Fareyle üzerine gelerek gizleme gecikmesi, milisaniye cinsinden.
headline headline true string

Tooltip'in başlığı. Yalnızca variant="rich" olduğunda kullanılabilir. slot="headline" ile de ayarlanabilir.
content content true string

Tooltip'in içeriği. slot="content" ile de ayarlanabilir.
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

Tetikleme şekli. Birden fazla değer boşlukla ayrılarak desteklenir. Olası değerler:

  • click: Tıklama ile tetiklenir
  • hover: Fareyle üzerine gelme ile tetiklenir
  • focus: Odaklanma ile tetiklenir
  • manual: Yalnızca programlama yoluyla açılıp kapatılabilir, başka tetikleme şekli belirtilemez
disabled disabled true boolean false

Tooltip'in devre dışı olup olmadığı.
open open true boolean false

Tooltip'in gösterilip gösterilmeyeceği.
### Olaylar
Ad Açıklama
open

Tooltip gösterilmeye başladığında tetiklenir. event.preventDefault() çağrılarak tooltip'in açılması engellenebilir.
opened

Tooltip gösterim animasyonu tamamlandığında tetiklenir.
close

Tooltip gizlenmeye başladığında tetiklenir. event.preventDefault() çağrılarak tooltip'in kapanması engellenebilir.
closed

Tooltip gizleme animasyonu tamamlandığında tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Tooltip'in tetiklediği hedef öğe, yalnızca default slotundaki ilk öğe hedef öğe olarak kullanılır.
headline

Tooltip'in başlığı, yalnızca variant="rich" olduğunda bu slot geçerlidir.
content

Tooltip'in içeriği, HTML içerebilir. Yalnızca düz metin içeriyorsa, bunun yerine content özelliği kullanılabilir.
action

Tooltip'in altındaki buton, yalnızca variant="rich" olduğunda bu slot geçerlidir.
### CSS Parts
Ad Açıklama
popup

Tooltip'in kabı.
headline

Başlık.
content

Gövde.
action

İşlem butonu.
### CSS Custom Property
Ad Açıklama
--shape-corner-plain

variant="plain" olduğunda bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
--shape-corner-rich

variant="rich" olduğunda bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
--z-index

Bileşenin CSS z-index değeri.
# Üst Uygulama Çubuğu Bileşeni Üst uygulama çubuğu, sayfanın üst kısmında temel bilgileri ve ilgili işlemleri görüntülemek için kullanılır. Kullanıcıya net bir gezinme ve işlevlere kolay erişim sağlar. ## Kullanım Şekli {#usage} Bileşenleri ihtiyacınıza göre içe aktarın: ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın: ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` Kullanım örneği: (Örnekteki `style="position: relative"` ifadesi yalnızca gösterim amacıyladır, gerçek kullanımda bu stili kaldırmanız gerekir.) ```html Başlık
``` **Önemli Notlar:** Bu bileşen varsayılan olarak `position: fixed` konumlandırmasını kullanır ve sayfa içeriğinin bu bileşen tarafından engellenmesini önlemek için `body` üzerine otomatik olarak `padding-top` stili ekler. Ancak aşağıdaki iki durumda varsayılan olarak `position: absolute` konumlandırması kullanılacaktır: 1. `scroll-target` özniteliği belirtildiğinde. Bu durumda `padding-top` stili, `scroll-target` öğesine eklenir. 2. [``](/tr/docs/2/components/layout) bileşeninin içinde bulunduğunda. Bu durumda `padding-top` stili eklenmez. ## Örnekler {#examples} ### Belirtilen Konteynır İçinde {#example-scroll-target} Varsayılan olarak, üst uygulama çubuğu geçerli pencereye göre sayfanın üst kısmında görüntülenir. Üst uygulama çubuğunu belirli bir konteynırın içine yerleştirmek istiyorsanız, `` bileşeninde `scroll-target` özniteliğini belirtebilirsiniz. Bu özniteliğin değeri, kaydırılabilir içeriğe sahip konteynırın CSS seçicisi veya DOM öğesi olmalıdır. Bu durumda, üst uygulama çubuğu ana öğeye göre konumlandırılacaktır (ana öğeye `position: relative; overflow: hidden` stillerini kendiniz eklemelisiniz). ```html
Başlık
``` ### Şekil {#example-variant} `` bileşeninde `variant` özniteliğini kullanarak üst uygulama çubuğunun şeklini ayarlayabilirsiniz. ```html
Başlık
ortalanmış küçük orta büyük
``` ### Sayfa Kaydırma Sırasındaki Davranış {#example-scroll-behavior} `` bileşeninde `scroll-behavior` özniteliğini ayarlayarak, sayfa kaydırıldığında üst uygulama çubuğunun davranışını tanımlayabilirsiniz. Birden fazla davranışı boşlukla ayırarak aynı anda ayarlayabilirsiniz. Kaydırma davranışları şunları içerir: - `hide`: Sayfa aşağı kaydırıldığında üst uygulama çubuğunu gizler, yukarı kaydırıldığında gösterir. - `shrink`: Yalnızca `variant` özniteliği `medium` veya `large` olduğunda etkilidir. Sayfa aşağı kaydırıldığında üst uygulama çubuğunu daraltır, yukarı kaydırıldığında genişletir. - `elevate`: Sayfa aşağı kaydırıldığında üst uygulama çubuğuna gölge ekler; sayfa en üste kaydırıldığında gölgeyi kaldırır. Üst uygulama çubuğunun kaydırma davranışlarının kaç piksel kaydırmadan sonra başlayacağını ayarlamak için `scroll-threshold` özniteliğini kullanın. (Not: Anında tepki vermesi için `elevate` kaydırma davranışını kullanırken `scroll-threshold` özniteliğini ayarlamamanız önerilir.) **Örnek: Kaydırma sırasında gizleme** ```html
Başlık
``` **Örnek: Kaydırma sırasında gölge ekleme** ```html
Başlık
``` **Örnek: Kaydırma sırasında daraltma** ```html
Başlık
``` **Örnek: Kaydırma sırasında daraltma ve gölge ekleme** ```html
Başlık
``` ### Genişletilmiş Durum Metni {#label-large} `variant` özniteliği `medium` veya `large` olan ve `scroll-behavior` özniteliği `shrink` olan üst uygulama çubukları için, `` bileşeninde `label-large` slot'unu kullanarak genişletilmiş durumdaki metni ayarlayabilirsiniz. ```html
Daraltılmış durum başlığı Genişletilmiş durum başlığı
``` ## mdui-top-app-bar-title API ### Slots
Ad Açıklama
Varsayılan

Üst uygulama çubuğunun başlık metni.
label-large

Genişletilmiş durumdaki başlık metni.
### CSS Parts
Ad Açıklama
label

Başlık metni.
label-large

Genişletilmiş durumdaki başlık metni.
## mdui-top-app-bar API ### Özellikler
Öznitelik Özellik Reflect Tür Varsayılan Açıklama
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

Üst uygulama çubuğunun şekli. Varsayılan small'dır. Olası değerler:

  • center-aligned: Küçük uygulama çubuğu, başlık ortalanmış
  • small: Küçük uygulama çubuğu
  • medium: Orta boy uygulama çubuğu
  • large: Büyük uygulama çubuğu
hide hide true boolean false

Gizlenip gizlenmeyeceği.
shrink shrink true boolean false

Yalnızca variant="medium" veya variant="large" olduğunda geçerlidir. variant="small" stiline küçültülüp küçültülmeyeceği.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Kaydırma davranışı. Birden fazla değer boşlukla ayrılarak aynı anda kullanılabilir. Olası değerler:

  • hide: Kaydırma sırasında gizlenir
  • shrink: Orta ve büyük uygulama çubuklarında kullanılabilir, kaydırma sırasında küçük uygulama çubuğu stiline küçülür
  • elevate: Kaydırma sırasında gölge eklenir
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Kaydırma olaylarının izleneceği öğe. Değer bir CSS seçici, DOM öğesi veya JQ nesnesi olabilir. Varsayılan olarak window nesnesinin kaydırma olaylarını izler.
scroll-threshold scrollThreshold true number

Kaydırma davranışını tetiklemek için gereken kaydırma mesafesi. Birimi px'dir.
order order true number

Bu bileşenin <mdui-layout> içindeki yerleşim sırası. Küçükten büyüğe doğru sıralanır. Varsayılan değer 0'dır.
### Olaylar
Ad Açıklama
show

Gösterme başladığında tetiklenir. event.preventDefault() çağrılarak gösterim engellenebilir.
shown

Gösterme animasyonu tamamlandığında tetiklenir.
hide

Gizleme başladığında tetiklenir. event.preventDefault() çağrılarak gizleme engellenebilir.
hidden

Gizleme animasyonu tamamlandığında tetiklenir.
### Slots
Ad Açıklama
Varsayılan

Üst uygulama çubuğunun içindeki öğeler.
### CSS Custom Property
Ad Açıklama
--shape-corner

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

Bileşenin CSS z-index değeri.
# jq yardımcı kütüphanesi mdui, hafif bir JavaScript yardımcı kütüphanesi içerir. jQuery benzeri bir API ve zincirleme çağrı yöntemi sunar, ancak boyutu jQuery'nin altıda biridir. Bu yardımcı fonksiyonu ihtiyacınıza göre içe aktarabilirsiniz: ```js import { $ } from 'mdui/jq.js'; ``` ## Temel {#api-core} ### `$()` {#dollar} Bu fonksiyonun çeşitli kullanımları vardır: CSS seçici parametre olarak iletildiğinde, eşleşen öğeleri içeren bir JQ nesnesi döndürür. ```js $('.box'); ``` DOM öğesi, herhangi bir dizi, NodeList veya JQ nesnesi parametre olarak iletildiğinde, belirtilen öğeleri içeren bir JQ nesnesi döndürür. ```js $(document); ``` HTML dizesi parametre olarak iletildiğinde, HTML'ye göre oluşturulmuş DOM'u içeren bir JQ nesnesi döndürür. ```js $(`
`); ``` Bir fonksiyon parametre olarak iletildiğinde, DOM yüklendiğinde bu fonksiyon çağrılır. ```js $(function () { console.log('DOM Yüklendi'); }); ``` ## Genişletme {#api-extend} ### `$.extend()` {#d-extend} Yalnızca bir nesne iletilirse, bu nesnedeki özellikler `$` nesnesine birleştirilir, bu da `$` ad alanına yeni işlevler eklemeye eşdeğerdir. ```js $.extend({ customFunc: function () {}, }); // Daha sonra özel yönteminizi şu şekilde çağırabilirsiniz: $.customFunc(); ``` İki veya daha fazla nesne iletilirse, tüm nesnelerin özellikleri ilk nesneye eklenir ve birleştirilmiş nesne döndürülür. Ancak değeri `undefined` olan özellikler birleştirilmez. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // İlk nesne ve dönüş değeri artık { key1: val1, key2: val2, key3: val3 } şeklindedir ``` ### `$.fn.extend()` {#fn-extend} `$`'ın prototip zinciri üzerinde yöntemler genişletir. ```js $.fn.extend({ customFunc: function () {}, }); // Daha sonra genişletilmiş yöntemi şu şekilde kullanabilirsiniz: $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} Bir diziyi veya nesneyi URL sorgu dizesine dönüştürür. ```js $.param({ width: 1680, height: 1050 }); // width=1680&height=1050 $.param({ foo: { one: 1, two: 2 } }); // foo[one]=1&foo[two]=2 $.param({ ids: [1, 2, 3] }); // ids[]=1&ids[]=2&ids[]=3 ``` İletilen parametre bir dizi ise, bu dizinin formatı [`.serializeArray()`](#serializeArray) tarafından döndürülen formatla aynı olmalıdır. ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## Dizi ve Nesne İşlemleri {#api-array} ### `$.each()` {#d-each} Diziler veya nesneler üzerinde iterasyon yapar. İlk parametreyi, yani üzerinde iterasyon yapılan dizi veya nesneyi döndürür. Geri çağırma fonksiyonunun ilk parametresi dizinin indeksi veya nesnenin anahtarıdır, ikinci parametresi ise dizinin veya nesnenin ilgili konumundaki değerdir. Geri çağırma fonksiyonunda `this`, dizinin veya nesnenin ilgili konumundaki değeri işaret eder. Geri çağırma fonksiyonu `false` döndürürse, iterasyon durdurulur. ```js // Dizi üzerinde iterasyon $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // Sonuç: // 0:a // 1:b // 2:c ``` ```js // Nesne üzerinde iterasyon $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // Sonuç // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} İkinci dizinin elemanlarını birinci diziye ekler ve birleştirilmiş diziyi döndürür. ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} Dizideki tekrar eden elemanları kaldırır. ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} Bir dizi veya nesne üzerinde iterasyon yapar ve geri çağırma fonksiyonunun dönüş değerlerinden oluşan yeni bir dizi döndürür. Geri çağırma fonksiyonunun ilk parametresi dizinin veya nesnenin ilgili konumundaki değerdir, ikinci parametresi ise dizinin indeksi veya nesnenin anahtarıdır. Geri çağırma fonksiyonu herhangi bir değer döndürebilir. Eğer bir dizi döndürürse, bu dizi açılır (flatten edilir). Eğer `null` veya `undefined` döndürürse, bu değer yoksayılır. Geri çağırma fonksiyonu içinde `this`, `window` nesnesini işaret eder. ```js // Dizi üzerinde iterasyon const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // Geri çağırma fonksiyonu dizi döndürdüğünde, dizi açılır const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // Nesne üzerinde iterasyon const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} Bir düğümün başka bir düğümü içerip içermediğini kontrol eder. Ebeveyn düğüm, alt düğümü içeriyorsa `true`, aksi halde `false` döndürür. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## Veri Türü Kontrolü {#api-type} ### `.is()` {#is} Koleksiyondaki en az bir öğenin parametreyle eşleşip eşleşmediğini kontrol eder. Eşleşme varsa `true`, yoksa `false` döndürür. Parametre bir CSS seçici, DOM öğesi, DOM öğeleri dizisi, JQ nesnesi veya geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi indeks, ikinci parametresi geçerli öğedir. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. Fonksiyon `true` döndürürse, geçerli öğenin parametreyle eşleştiği anlamına gelir; `false` döndürürse, eşleşmediği anlamına gelir. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // Geri çağırma fonksiyonunun dönüş değeri ile eşleşme kontrolü $(document).is(function (index, element) { return element === document; }); // true ``` ## Nesne Erişimi {#api-object} ### `.length` {#length} Geçerli koleksiyondaki öğelerin sayısını döndürür. ```js $('body').length; // 1 ``` ### `.each()` {#each} Geçerli koleksiyon üzerinde iterasyon yapar, koleksiyondaki her öğe için bir fonksiyon çalıştırır. Fonksiyon `false` döndürürse, iterasyon durdurulur. Fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise geçerli öğedir. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} Geçerli koleksiyon üzerinde iterasyon yapar, koleksiyondaki her öğe için bir fonksiyon çalıştırır ve fonksiyonun dönüş değerlerinden oluşan yeni bir koleksiyon döndürür. Fonksiyon tek bir veri veya veri dizisi döndürebilir. Dizi döndürülürse, dizideki elemanlar sırayla yeni koleksiyona eklenir. Fonksiyon `null` veya `undefined` döndürürse, bu değer yeni koleksiyona eklenmez. Fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi geçerli öğedir. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result, eşleşen öğelerin değerlerinden oluşan bir JQ nesnesidir ``` ### `.eq()` {#eq} Yalnızca belirtilen indeks konumundaki öğeyi içeren yeni bir koleksiyon döndürür. ```js $('div').eq(0); // Yalnızca ilk öğeyi içeren koleksiyonu döndürür $('div').eq(-1); // Yalnızca son öğeyi içeren koleksiyonu döndürür $('div').eq(-2); // Yalnızca sondan ikinci öğeyi içeren koleksiyonu döndürür ``` ### `.first()` {#first} Yalnızca geçerli koleksiyondaki ilk öğeyi içeren yeni bir koleksiyon döndürür. ```js $('div').first(); // Yalnızca ilk div'i içeren koleksiyonu döndürür ``` ### `.last()` {#last} Yalnızca geçerli koleksiyondaki son öğeyi içeren yeni bir koleksiyon döndürür. ```js $('div').last(); // Yalnızca son div'i içeren koleksiyonu döndürür ``` ### `.get()` {#get} Belirtilen indeks konumundaki öğeyi döndürür. Parametre iletilmezse, koleksiyondaki tüm öğelerden oluşan bir dizi döndürür. ```js $('div').get(); // Tüm div öğelerinden oluşan bir dizi döndürür $('div').get(0); // İlk div öğesini döndürür $('div').get(-1); // Son div öğesini döndürür ``` ### `.index()` {#index} Parametre iletilmezse, geçerli koleksiyondaki ilk öğenin kardeş öğeleri arasındaki indeksini döndürür. Bir CSS seçici iletilirse, geçerli koleksiyondaki ilk öğenin, CSS seçiciyle eşleşen öğeler arasındaki indeksini döndürür. Bir DOM öğesi iletilirse, bu öğenin geçerli koleksiyondaki indeksini döndürür. Bir JQ nesnesi iletilirse, nesnedeki ilk öğenin geçerli koleksiyondaki indeksini döndürür. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} Geçerli koleksiyonun bir alt kümesini döndürür. Alt kümenin başlangıç ve bitiş konumlarını belirtmek için iki parametre iletebilirsiniz (bitiş konumundaki öğe dahil değildir). İkinci parametre iletilmezse, başlangıç konumundan koleksiyonun sonuna kadar olan tüm öğeleri döndürür. ```js // Koleksiyonda üçüncü (üçüncü dahil) öğeden sonraki tüm öğeleri döndürür $('div').slice(3); // Koleksiyonda üçüncü ile beşinci (üçüncü dahil, beşinci hariç) arasındaki öğeleri döndürür $('div').slice(3, 5); ``` ### `.filter()` {#filter} Geçerli koleksiyondan belirtilen ifadeyle eşleşen öğeleri filtreler. Parametre bir CSS seçici, DOM öğesi, DOM öğeleri dizisi veya geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi geçerli öğedir. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. Fonksiyon `true` döndürürse, geçerli öğe korunur; `false` döndürürse, geçerli öğe kaldırılır. ```js // .box sınıfına sahip tüm div öğelerini filtreler $('div').filter('.box'); // Seçili tüm seçenekleri (option) filtreler $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} Geçerli koleksiyondan belirtilen ifadeyle eşleşmeyen öğeleri filtreler. Parametre bir CSS seçici, DOM öğesi, DOM öğeleri dizisi, JQ nesnesi veya `boolean` değer döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi geçerli öğedir. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. Fonksiyon `true` döndürürse, geçerli öğe kaldırılır; `false` döndürürse, geçerli öğe korunur. ```js // .box sınıfına sahip olmayan tüm div öğelerini filtreler $('div').not('.box'); // Seçili olmayan tüm seçenekleri (option) filtreler $('#select option').not(function (index, element) { return element.selected; }); ``` ## CSS Sınıfları {#api-css} ### `.hasClass()` {#hasClass} Koleksiyondaki ilk öğenin belirtilen CSS sınıfına sahip olup olmadığını kontrol eder. ```js // İlk div öğesinin .item sınıfına sahip olup olmadığını kontrol eder $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} Koleksiyondaki her öğeye CSS sınıfı/sınıfları ekler. Birden fazla sınıf adı boşlukla ayrılabilir. Parametre bir dize veya CSS sınıf adları döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğede bulunan mevcut CSS sınıf adlarıdır. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. ```js // Tüm div öğelerine .item sınıfını ekler $('div').addClass('item'); // Tüm div öğelerine .item1 ve .item2 sınıflarını ekler $('div').addClass('item1 item2'); // Tüm div öğelerine geri çağırma fonksiyonunun döndürdüğü CSS sınıfını ekler $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} Koleksiyondaki her öğeden belirtilen CSS sınıf(lar)ını kaldırır. Birden fazla sınıf adı boşlukla ayrılabilir. Parametre bir dize veya CSS sınıf adları döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğede bulunan mevcut CSS sınıf adlarıdır. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. Parametre iletilmezse, bu yöntem doğrudan öğedeki `class` özniteliğini kaldırır. ```js // Tüm div öğelerinden .item sınıfını kaldırır $('div').removeClass('item'); // Tüm div öğelerinden .item1 ve .item2 sınıflarını kaldırır $('div').removeClass('item1 item2'); // Tüm div öğelerinden geri çağırma fonksiyonunun döndürdüğü CSS sınıfını kaldırır $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} Öğede belirtilen CSS sınıfı varsa kaldırır, yoksa ekler. Birden fazla sınıf adı boşlukla ayrılabilir. Parametre bir dize veya CSS sınıf adları döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğede bulunan mevcut CSS sınıf adlarıdır. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. ```js // Tüm div öğelerindeki .item sınıfını açar/kapatır $('div').toggleClass('item'); // Tüm div öğelerindeki .item1 ve .item2 sınıflarını açar/kapatır $('div').toggleClass('item1 item2'); // Tüm div öğelerinde geri çağırma fonksiyonunun döndürdüğü CSS sınıfını açar/kapatır $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## Düğüm Öznitelikleri {#api-attr} ### `.prop()` {#prop} Koleksiyondaki ilk öğenin JavaScript özellik değerini alır. ```js // İlk öğenin checked özellik değerini alır $('input').prop('checked'); ``` İki parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin belirtilen JavaScript özellik değerini ayarlar. Özellik değeri herhangi bir türde bir değer veya bir özellik değeri döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğede bulunan mevcut özellik değeridir. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. Özellik değeri veya geri çağırma fonksiyonunun dönüş değeri `undefined` ise, bu yöntem öğenin mevcut özelliğini değiştirmez. ```js // Tüm seçili öğelerin checked özellik değerini true olarak ayarlar $('input').prop('checked', true); // Geri çağırma fonksiyonunun dönüş değeri ile özellik değerini ayarlar $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` Bir nesne ileterek birden fazla özelliği aynı anda ayarlayabilirsiniz. ```js // Öğelerin birden fazla özellik değerini aynı anda ayarlar $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} Koleksiyondaki tüm öğelerden belirtilen JavaScript özellik değerini siler. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} Koleksiyondaki ilk öğenin HTML öznitelik değerini alır. ```js // İlk öğenin öznitelik değerini alır $('div').attr('username'); ``` İki parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin belirtilen HTML öznitelik değerini ayarlar. Öznitelik değeri bir dize veya sayı olabileceği gibi, bir öznitelik değeri döndüren bir geri çağırma fonksiyonu da olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğede bulunan mevcut öznitelik değeridir. Fonksiyon içinde `this`, geçerli öğeyi işaret eder. Öznitelik değeri veya geri çağırma fonksiyonunun dönüş değeri `null` ise, bu yöntem belirtilen özniteliği siler; `undefined` ise, öğenin mevcut özniteliğini değiştirmez. ```js // Tüm seçili öğelerin öznitelik değerini ayarlar $('div').attr('username', 'mdui'); // Geri çağırma fonksiyonunun dönüş değeri ile öznitelik değerini ayarlar $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` Bir nesne ileterek birden fazla özniteliği aynı anda ayarlayabilirsiniz. ```js // Öğelerin birden fazla öznitelik değerini aynı anda ayarlar $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} Koleksiyondaki tüm öğelerden belirtilen HTML öznitelik(ler)ini kaldırır. Birden fazla öznitelik adı boşlukla ayrılabilir. ```js // Koleksiyondaki tüm öğelerden bir özniteliği kaldırır $('div').removeAttr('username'); // Koleksiyondaki tüm öğelerden birden fazla özniteliği kaldırır $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} Koleksiyondaki ilk öğenin değerini döndürür. Öğe ``, `` veya `