MDUIDocs
llms.txt bağlantısını kopyalallms-full.txt bağlantısını kopyalaBu sayfayı Markdown olarak görüntüleBu sayfayı ChatGPT ile tartışBu projenin belgelerini ChatGPT ile tartış
Önceden Tanımlı Renkler
Özel Renk
Duvar Kağıdından Renk Çıkar
Lütfen bir duvar kağıdı seçin
Başlarken
AI Destekli Geliştirme
Stiller
Frameworklerle Entegrasyon
Bileşenler
Avatar AvatarBadge RozetBottomAppBar Alt Uygulama ÇubuğuButton ButonButtonIcon Simge ButonuCard KartCheckbox Onay KutusuChip ChipCircularProgress Dairesel İlerlemeCollapse CollapseDialog DiyalogDivider AyırıcıDropdown Açılır MenüFab Kayan İşlem ButonuIcon SimgeLayout LayoutLinearProgress Doğrusal İlerlemeList ListeMenu MenüNavigationBar Gezinme ÇubuğuNavigationDrawer Gezinme ÇekmecesiNavigationRail Gezinme RayıRadio Radyo ButonuRangeSlider Aralık KaydırıcısıSelect Seçim KutusuSegmentedButton Segmentli ButonSlider KaydırıcıSnackbar SnackbarSwitch AnahtarTabs SekmeTextField Metin AlanıTooltip TooltipTopAppBar Üst Uygulama Çubuğu
Fonksiyonlar
Kütüphaneler

DropdownAçılır Menü

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

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

import 'mdui/components/dropdown.js';

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

import type { Dropdown } from 'mdui/components/dropdown.js';

Kullanım örneği:

açılır menüyü aç Öğe 1 Öğe 2 
<mdui-dropdown>
  <mdui-button slot="trigger">açılır menüyü aç</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Öğe 1</mdui-menu-item>
    <mdui-menu-item>Öğe 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Örnekler

Devre Dışı Durumu

Açılır menü bileşenini devre dışı bırakmak için disabled özniteliğini ekleyin.

Açılma Konumu

Açılır menü bileşeninin açılma konumunu ayarlamak için placement özniteliğini kullanın.

Tetikleme Şekli

Açılır menü bileşeninin tetikleme şeklini ayarlamak için trigger özniteliğini kullanın.

İmleç Konumunda Açma

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.

Menü Açık Kalma Durumu

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.

Açma/Kapama Gecikmesi

trigger="hover" ayarlandığında, open-delay ve close-delay öznitelikleri aracılığıyla açma ve kapama gecikmesini ayarlayabilirsiniz.

API

Özellikler

ÖznitelikÖzellikReflectTürVarsayılan
openopenbooleanfalse

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

disableddisabledbooleanfalse

Açılır menü bileşeninin devre dışı olup olmadığı.

triggertrigger'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
placementplacement'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-clickstayOpenOnClickbooleanfalse

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

open-delayopenDelaynumber150

Fareyle üzerine gelerek açılır menü bileşenini açma gecikmesi, milisaniye cinsinden.

close-delaycloseDelaynumber150

Fareyle üzerine gelerek açılır menü bileşenini kapatma gecikmesi, milisaniye cinsinden.

open-on-pointeropenOnPointerbooleanfalse

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
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
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
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
--z-index

Bileşenin CSS z-index değeri.

Önceki Bölüm
Divider Ayırıcı
Sonraki Bölüm
Fab Kayan İşlem Butonu
Bu Sayfanın İçindekiler