MenuMenü

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, <mdui-dropdown> bileşeni ile birlikte kullanabilirsiniz.

Kullanım Şekli

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

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:

import type { Menu } from 'mdui/components/menu.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Kullanım örneği:

Öğe 1

Öğe 2

<mdui-menu>
  <mdui-menu-item>Öğe 1</mdui-menu-item>
  <mdui-menu-item>Öğe 2</mdui-menu-item>
</mdui-menu>

<mdui-menu> bileşeninde selects özniteliğini single olarak belirterek tek seçim özelliğini etkinleştirebilirsiniz. Bu durumda, <mdui-menu> bileşeninin value değeri, seçili olan <mdui-menu-item> bileşeninin value değerine eşit olur.

Öğe 1

Öğe 2

<mdui-menu selects="single" value="öğe-2">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-menu>

Kaynak Kodu

Çoklu Seçim Desteği

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

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

Öğe 1

Öğe 2

Öğe 3

<mdui-menu selects="multiple" class="example-multiple">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
  <mdui-menu-item value="öğe-3">Öğe 3</mdui-menu-item>
</mdui-menu>

<script>
  // Varsayılan olarak öğe-1 ve öğe-2'yi seçili olarak ayarla
  const menu = document.querySelector(".example-multiple");
  menu.value = ["öğe-1", "öğe-2"];
</script>

Kaynak Kodu

Simge

<mdui-menu-item> 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.

Öğe 1

Öğe 2

Ctrl+X

Öğe 3

<mdui-menu>
  <mdui-menu-item icon="visibility" end-icon="add_circle" end-text="Ctrl+X">Öğe 1</mdui-menu-item>
  <mdui-menu-item>
    Öğe 2
    <mdui-icon slot="icon" name="visibility"></mdui-icon>
    <mdui-icon slot="end-icon" name="add_circle"></mdui-icon>
    <span slot="end-text">Ctrl+X</span>
  </mdui-menu-item>
  <mdui-menu-item icon="">Öğe 3</mdui-menu-item>
</mdui-menu>

Kaynak Kodu

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.

Öğe 1

Öğe 2

<mdui-menu selects="multiple">
  <mdui-menu-item value="öğe-1" selected-icon="cloud_done">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">
    <mdui-icon slot="selected-icon" name="done_outline"></mdui-icon>
    Öğe 2
  </mdui-menu-item>
</mdui-menu>

Kaynak Kodu

Bağlantı

<mdui-menu-item> 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.

Öğe 1

Öğe 2

<mdui-menu>
  <mdui-menu-item href="https://www.mdui.org" target="_blank">Öğe 1</mdui-menu-item>
  <mdui-menu-item>Öğe 2</mdui-menu-item>
</mdui-menu>

Kaynak Kodu

Alt Menü

<mdui-menu-item> bileşeninde, alt menü öğelerini belirtmek için submenu slot'unu kullanabilirsiniz.

Satır aralığı Tek

1.5

Çift

Özel: 1.2

Paragraf stili

<mdui-menu>
  <mdui-menu-item>
    Satır aralığı
    <mdui-menu-item slot="submenu">Tek</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Çift</mdui-menu-item>
    <mdui-menu-item slot="submenu">Özel: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraf stili</mdui-menu-item>
</mdui-menu>

Kaynak Kodu

<mdui-menu> bileşeninde submenu-trigger özniteliği aracılığıyla alt menünün tetiklenme şeklini ayarlayabilirsiniz.

Satır aralığı Tek

1.5

Çift

Özel: 1.2

Paragraf stili

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Satır aralığı
    <mdui-menu-item slot="submenu">Tek</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Çift</mdui-menu-item>
    <mdui-menu-item slot="submenu">Özel: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraf stili</mdui-menu-item>
</mdui-menu>

Kaynak Kodu

submenu-trigger özniteliği hover olarak ayarlandığında, <mdui-menu> bileşeninde submenu-open-delay ve submenu-close-delay öznitelikleri aracılığıyla alt menünün açılma ve kapanma gecikmesini ayarlayabilirsiniz.

Satır aralığı Tek

1.5

Çift

Özel: 1.2

Paragraf stili

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Satır aralığı
    <mdui-menu-item slot="submenu">Tek</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Çift</mdui-menu-item>
    <mdui-menu-item slot="submenu">Özel: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraf stili</mdui-menu-item>
</mdui-menu>

Kaynak Kodu

Özel İçerik

<mdui-menu-item> bileşeninde custom slot'unu kullanarak menü öğesinin içeriğini tamamen özelleştirebilirsiniz.

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

<style>
  .custom-item {
    padding: 4px 12px;
  }

  .custom-item .secondary {
    display: none;
    color: #888;
    font-size: 13px;
  }

  .custom-item:hover .secondary {
    display: block
  }
</style>

<mdui-menu>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ABS</div>
      <div class="secondary">Sayının mutlak değerini alır</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Sayının radyan cinsinden arkkosinüs değeri</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Sayının hiperbolik arkkosinüs değeri</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Kaynak Kodu

Öznitelik	Özellik	Tür	Varsayılan
`value`	`value`	`string`	-
Menü öğesinin değeri.
`disabled`	`disabled`	`boolean`	`false`
Menü öğesinin devre dışı olup olmadığı.
`icon`	`icon`	`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`	`string`	-
Sağdaki Material Icons simge adı. `slot="end-icon"` ile de ayarlanabilir.
`end-text`	`endText`	`string`	-
Sağdaki metin. `slot="end-text"` ile de ayarlanabilir.
`selected-icon`	`selectedIcon`	`string`	-
Seçili durumdaki Material Icons simge adı. `slot="selected-icon"` ile de ayarlanabilir.
`submenu-open`	`submenuOpen`	`boolean`	`false`
Alt menünün açık olup olmadığı.
`href`	`href`	`string`	-
Bağlantının hedef URL'si. Bu özellik ayarlandığında, bileşen dahili olarak bir `<a>` öğesi olarak işlenir ve bağlantı ile ilgili özellikler kullanılabilir hale gelir.
`download`	`download`	`string`	-
İndirme bağlantısının hedefi. Not: Bu özellik yalnızca `href` özelliği belirtildiğinde geçerlidir.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Bağlantının nasıl açılacağı. Olası değerler: `_blank`: Bağlantıyı yeni bir pencerede açar `_parent`: Bağlantıyı üst çerçevede açar `_self`: Varsayılan. Bağlantıyı aynı çerçevede açar `_top`: Bağlantıyı tam pencerede açar Not: Bu özellik yalnızca `href` özelliği belirtildiğinde geçerlidir.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Mevcut belge ile bağlantı verilen belge arasındaki ilişki. Olası değerler: `alternate`: Mevcut belgenin alternatif sürümü `author`: Mevcut belgenin veya makalenin yazarı `bookmark`: En yakın ata bölüm için kalıcı bağlantı `external`: Başvurulan belge, mevcut belgeyle aynı sitede değil `help`: İlgili yardım belgesine bağlantı `license`: Mevcut belgenin ana içeriği, başvurulan dosyanın telif hakkı lisansı kapsamındadır `me`: Mevcut belge, bağlantı içeriğinin sahibini temsil eder `next`: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir sonraki belgedir `nofollow`: Mevcut belgenin yazarı veya yayıncısı, başvurulan dosyayı onaylamaz `noreferrer`: `Referer` başlığını içermez. `noopener` etkisine benzer `opener`: Köprü, üst düzey bir gezinme bağlamı oluşturuyorsa (yani `target` özellik değeri `_blank` ise), yardımcı bir gezinme bağlamı oluşturur `prev`: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir önceki belgedir `search`: Mevcut dosya ve ilgili sayfalarda arama yapmak için kullanılabilecek bir kaynağa bağlantı sağlar `tag`: Mevcut belge için uygun bir etiket sağlar (belirtilen adres tarafından tanımlanır) Not: Yalnızca `href` özelliği belirtildiğinde kullanılabilir.
`autofocus`	`autofocus`	`boolean`	`false`
Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
`tabindex`	`tabIndex`	`number`	-
Sekme tuşu ile odak geçişi yapılırken öğenin sırası.

Ad	Parametreler	Dönüş Değeri
`click`		`void`
Öğeye fare tıklamasını simüle eder.
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
Odağı geçerli öğeye ayarlar. Parametre olarak bir nesne iletilebilir. Nesnenin özellikleri şunlardır: `preventScroll`: Varsayılan olarak, öğe odaklandıktan sonra sayfa, öğeyi görünüme getirmek için kayar. Sayfanın kaydırılmasını istemiyorsanız, bu özelliği `true` olarak ayarlayabilirsiniz.
`blur`		`void`
Odağı geçerli öğeden kaldırır.

Ad
`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.

Ad
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.

Ad
`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.

Öznitelik	Özellik	Tür	Varsayılan
`selects`	`selects`	`'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`	`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`	`boolean`	`false`
Menü öğelerinin sıkı düzen kullanıp kullanmayacağı.
`submenu-trigger`	`submenuTrigger`	`'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`	`number`	`200`
Fareyle üzerine gelerek alt menüyü açma gecikmesi, milisaniye cinsinden.
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Fareyle üzerine gelerek alt menüyü kapatma gecikmesi, milisaniye cinsinden.

Ad	Parametreler	Dönüş Değeri
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
Odağı geçerli öğeye ayarlar.
`blur`		`void`
Odağı geçerli öğeden kaldırır.

Ad
`change`
Menü öğesi seçim durumu değiştiğinde tetiklenir.

Ad
Varsayılan
Alt menü öğeleri (`<mdui-menu-item>`), ayırıcılar (`<mdui-divider>`) gibi öğeler.

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

Önceki Bölüm

List Liste

Sonraki Bölüm

NavigationBar Gezinme Çubuğu

MenuMenü

Kullanım Şekli

Örnekler

Kompakt Düzen

Devre Dışı Menü Öğesi

Tek Seçim Desteği

Çoklu Seçim Desteği

Simge

Bağlantı

Alt Menü

Özel İçerik

`mdui-menu-item` API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts

`mdui-menu` API

Özellikler

Yöntemler

Olaylar

Slots

CSS Custom Property