Satırlar. PantrixMenuItem bir etiket, önünde bir simge (icon), sonunda bir kısayol (shortcut) ve altında ikinci, daha küçük bir satır (supportingText, yazısı supportingTextStyle) alır. Grupların arasına bir PantrixDivider konur.
Silen ve seçilemeyen satır. destructive etiketi ve simgeyi menünün silme renginde çizer: verilmezse temanın danger rengi. enabled = false satırı soluk çizer: basılmaz ve odak almaz.
Yön ve hiza. side panelin çapanın hangi yanında açılacağını, alignment o yan boyunca nasıl hizalanacağını söyler: söylenmezse altta, çapanın başından sarkar. İstenen yanda yer yoksa karşı yana geçer.
Pencerenin içinde. Panel pencerenin kenarlarına, sistem çubuklarına ve klavyeye stilin margin'inden fazla yaklaşmaz: kenardaki bir çapada içeri kayar.
Genişlik ve yükseklik. Panel en uzun satırı kadar geniştir, stilin en dar ve en geniş genişliği arasında; daha uzun bir etiket tek satırda kesilir. En çok yüksekliğe sığmayan satırlar panelin içinde kayar.
Dokunma ve fare. Dokunarak ya da tıklayarak açılınca hiçbir satır odak göstermez; ilk ok tuşu, Home ya da End klavyeyi devreye sokar. Farenin üstünde durduğu satır hafifçe dolar.
Renkler ve stil. colors (MenuColors) panelin ve satırların rengini, style (MenuStyle) köşeleri, genişlikleri, en çok yüksekliği ve satırın ölçülerini verir. Yalnızca verilen alanlar değişir, gerisi temanın kalır.
Platformlar. Menü her platformda aynı görünür; fark stildedir. Stilin satır yüksekliği Android'de 48, iOS'ta 44, masaüstünde ve web'de 32 dp'dir; satır platformun dokunma hedefinden kısa olmaz.
Seçili satır. Her biri tek bir şey seçen satırlar arasında, bir dil ya da bir sıra, geçerli olan selected'dır: sonunda etiketin renginde bir işaret durur ve ekran okuyucuya seçili olduğu söylenir.
Dar pencerede sheet. presentation varsayılanı OverlayPresentation.Adaptive: dar (Compact) bir pencerede menü alttan bir sheet'tir, daha geniş pencerede çapanın yanında bir panel. Sheet'te satırlar sheet kadar geniş ve dokunma alanı kadar yüksektir, başlık yoktur, aşağı sürüklemek kapatır; dokunmayla kullanılan bir platformda kısayollar yazılmaz. Popover ve Sheet her pencerede birini seçer. Menü açılırken seçilir, kapanana kadar değişmez.

Örnekler

Satır eylemleri

En yalın hâli: bir dosyanın "daha fazla" düğmesi menüyü açar. Menünün açık olup olmadığı ekranın durumudur (visible). Menü kendini kapatmaz: kapanmak istediğinde onDismissRequest'i çağırır, visible'ı false yapan bu koddur. Silen satır bir PantrixDivider'ın altındadır ve destructive ile temanın danger rengindedir.

Bir satırı seç: menüden önce kapanması istenir, sonra satırın onClick'i çağrılır; kartın "Son olay" satırı en son olanı söyler. Dışına basmak, geri tuşu ve Escape yalnızca kapatır. Klavyeyle açılınca odak ilk satırdadır; kapanınca düğmeye döner.

tagKey verilen menünün satırları otomasyon için onun içinde adlandırılır: buradaki "Sil" satırının test etiketi Menu_row_actions.MenuItem_delete'tir ve başka bir menünün "Sil" satırıyla karışmaz.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
Row(verticalAlignment = Alignment.CenterVertically) {
    PantrixText(text = "Rapor.pdf")
    PantrixMenu(
        visible = open,
        onDismissRequest = {
            open = false
            report("Dosya eylemleri kapatıldı")
        },
        anchor = {
            PantrixIconButton(
                imageVector = PantrixIcons.MoreHorizontal,
                contentDescription = "Rapor.pdf için eylemler",
                onClick = { open = true },
                tagKey = "open_row_actions"
            )
        },
        tagKey = "row_actions"
    ) {
        PantrixMenuItem(
            text = "Yeniden adlandır",
            onClick = { report("Yeniden adlandır seçildi") },
            tagKey = "rename"
        )
        PantrixMenuItem(text = "Çoğalt", onClick = { report("Çoğalt seçildi") }, tagKey = "duplicate")
        PantrixDivider()
        PantrixMenuItem(text = "Sil", onClick = { report("Sil seçildi") }, destructive = true, tagKey = "delete")
    }
}

Simge ve kısayol

icon etiketin önünde bir simge çizer: etiketin renginde ve stilin simge boyutunda. Simge etiketin söylediğinin resmidir; ekran okuyucu yalnızca etiketi okur. shortcut aynı işi yapan tuşları satırın sonunda gösterir. Kısayol yalnızca gösterilir ve okunur: tuşları bağlamak uygulamanın işidir.

enabled = false satırı soluk çizer: "Klasöre taşı" basılmaz ve klavyede atlanır. destructive etiketi de simgeyi de silme renginde çizer.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
PantrixMenu(
    visible = open,
    onDismissRequest = {
        open = false
        report("Dosya menüsü kapatıldı")
    },
    anchor = {
        PantrixButton(
            text = "Dosya",
            onClick = { open = true },
            variant = ButtonVariant.Outline,
            tagKey = "open_file"
        )
    },
    tagKey = "file"
) {
    PantrixMenuItem(
        text = "Ara",
        onClick = { report("Ara seçildi") },
        icon = PantrixIcons.Search,
        shortcut = "Ctrl+F",
        tagKey = "search"
    )
    PantrixMenuItem(
        text = "Yenile",
        onClick = { report("Yenile seçildi") },
        icon = PantrixIcons.Refresh,
        shortcut = "F5",
        tagKey = "refresh"
    )
    PantrixMenuItem(
        text = "Klasöre taşı",
        onClick = { report("Klasöre taşı seçildi") },
        icon = PantrixIcons.Folder,
        enabled = false,
        tagKey = "move"
    )
    PantrixDivider()
    PantrixMenuItem(
        text = "Sil",
        onClick = { report("Sil seçildi") },
        icon = PantrixIcons.Close,
        shortcut = "Del",
        destructive = true,
        tagKey = "delete"
    )
}

Seçili satır

Her satırı tek bir şey seçen bir menü: listenin sırası. Geçerli olan selected'dır: sonunda etiketin renginde bir işaret durur, ekran okuyucuya seçili olduğu söylenir. Başka bir sıra seç: işaret onun satırına geçer, düğme de yeni sırayı yazar.

var open by rememberSaveable { mutableStateOf(false) }
var order by rememberSaveable { mutableStateOf("newest") }
val orders = listOf("newest" to "En yeni önce", "oldest" to "En eski önce", "name" to "Ada göre")
PantrixMenu(
    visible = open,
    onDismissRequest = { open = false },
    anchor = {
        PantrixButton(
            text = "Sırala: ${orders.first { it.first == order }.second}",
            onClick = { open = true },
            variant = ButtonVariant.Outline,
            tagKey = "open_order"
        )
    },
    tagKey = "order"
) {
    orders.forEach { (key, label) ->
        PantrixMenuItem(text = label, onClick = { order = key }, tagKey = key, selected = order == key)
    }
}

İkinci satır

supportingText etiketin altına ikinci, daha küçük bir satır koyar: seçimin neye götürdüğü. Burada her dilin altında sitenin o dildeki adresi, kod yazısıyla (supportingTextStyle); rengi satırınkidir. Satır onu taşıyacak kadar uzar; ekran okuyucu ikinci satırı etiketten sonra duyar. İkinci satır en çok iki satırdır, ötesi kesilir.

var open by rememberSaveable { mutableStateOf(false) }
var chosen by rememberSaveable { mutableIntStateOf(0) }
PantrixMenu(
    visible = open,
    onDismissRequest = { open = false },
    anchor = {
        PantrixButton(
            text = "Dil: ${LANGUAGES[chosen].first}",
            onClick = { open = true },
            variant = ButtonVariant.Outline,
            tagKey = "open_language"
        )
    },
    tagKey = "language"
) {
    LANGUAGES.forEachIndexed { index, (name, address) ->
        PantrixMenuItem(
            text = name,
            onClick = { chosen = index },
            selected = index == chosen,
            tagKey = "language_$index",
            supportingText = address,
            supportingTextStyle = PantrixTheme.typography.code
        )
    }
}

private val LANGUAGES = listOf(
    "Türkçe" to "pantrixui.com/tr",
    "English" to "pantrixui.com/en",
    "العربية" to "pantrixui.com/ar"
)

Yön ve hiza

side panelin çapanın hangi yanında açılacağını, alignment o yan boyunca nasıl hizalanacağını söyler. Söylenmezse menü altta, çapanın başından sarkar: PopoverSide.Bottom ve PopoverAlignment.Start. İki enum Popover'ındır; menü onları paylaşır.

Baş ve Son yazı yönüne göre değişir: soldan sağa bir düzende Baş soldur. Panel çapanın yanındayken (Baş ya da Son) hiza dikeydir: Baş üst kenarları, Son alt kenarları buluşturur.

İstenen yanda yer yoksa menü karşı yana geçer: Üst'ü seç ve düğme pencerenin üst kenarına yakınken aç. İki yanda da yer yoksa menü istenen yanda kalır ve pencerenin içine, çapanın üstüne kayar.

presentation = OverlayPresentation.Popover: menü dar bir pencerede de bir paneldir, sheet değil; yönü ve hizası telefonda da görünür.

var open by rememberSaveable { mutableStateOf(false) }
var side by rememberSaveable { mutableStateOf(PopoverSide.Bottom) }
var alignment by rememberSaveable { mutableStateOf(PopoverAlignment.Start) }
val report = LocalExampleEvents.current
PantrixSegmentButton(options = SIDES, selected = side, onSelect = { side = it }, tagKey = "menu_side")
PantrixSegmentButton(
    options = ALIGNMENTS,
    selected = alignment,
    onSelect = { alignment = it },
    tagKey = "menu_alignment"
)
Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
    PantrixMenu(
        visible = open,
        onDismissRequest = {
            open = false
            report("Menü kapatıldı")
        },
        anchor = {
            PantrixButton(
                text = "Aç",
                onClick = { open = true },
                variant = ButtonVariant.Outline,
                tagKey = "open_placed_menu"
            )
        },
        side = side,
        alignment = alignment,
        tagKey = "placed_menu",
        presentation = OverlayPresentation.Popover
    ) {
        PantrixMenuItem(text = "side = ${side.name}", onClick = { report("Yön satırı seçildi") }, tagKey = "side")
        PantrixMenuItem(
            text = "alignment = ${alignment.name}",
            onClick = { report("Hiza satırı seçildi") },
            tagKey = "alignment"
        )
    }
}

private val SIDES = listOf(
    SegmentOption(value = PopoverSide.Top, label = "Üst", tagKey = "top"),
    SegmentOption(value = PopoverSide.Bottom, label = "Alt", tagKey = "bottom"),
    SegmentOption(value = PopoverSide.Start, label = "Baş", tagKey = "start"),
    SegmentOption(value = PopoverSide.End, label = "Son", tagKey = "end")
)

private val ALIGNMENTS = listOf(
    SegmentOption(value = PopoverAlignment.Start, label = "Baş", tagKey = "start"),
    SegmentOption(value = PopoverAlignment.Center, label = "Orta", tagKey = "center"),
    SegmentOption(value = PopoverAlignment.End, label = "Son", tagKey = "end")
)

Kenarda

Pencerenin bitiş kenarına yakın bir "daha fazla" düğmesi. Menü çapasının başından sarkar; düğme kenara yakınken panel pencereden taşardı. Taşmaz: kenardan stilin margin'i kadar içeride kalacak şekilde kayar. Dar bir pencerede menü bir sheet olurdu; presentation = OverlayPresentation.Popover onu her pencerede panel tutar.

Dar bir pencerede dene: daraltılacak olan, uygulamanın kendi penceresidir. Menü yerini gerçek pencereye göre seçer, bir kartın pencere seçicisinin örneğine verdiği pencereye göre değil; bu kartta o seçici bu yüzden yoktur. Yeterince geniş bir pencerede kartın yanında panele yer kalır; orada panel kaymaz, düğmenin başından sarkar.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.CenterEnd) {
    PantrixMenu(
        visible = open,
        onDismissRequest = {
            open = false
            report("Kenardaki menü kapatıldı")
        },
        anchor = {
            PantrixIconButton(
                imageVector = PantrixIcons.MoreHorizontal,
                contentDescription = "Klasör eylemleri",
                onClick = { open = true },
                tagKey = "open_edge"
            )
        },
        tagKey = "edge",
        presentation = OverlayPresentation.Popover
    ) {
        PantrixMenuItem(
            text = "Klasörü paylaş",
            onClick = { report("Klasörü paylaş seçildi") },
            icon = PantrixIcons.Person,
            tagKey = "share"
        )
        PantrixMenuItem(
            text = "Sık kullanılanlara ekle",
            onClick = { report("Sık kullanılanlara ekle seçildi") },
            icon = PantrixIcons.Star,
            tagKey = "favourite"
        )
    }
}

Uzun liste

Otuz satır stilin en çok yüksekliğine (MenuStyle.maxHeight) sığmaz: panel o yükseklikte kalır, satırlar içinde kayar. Klavyede End son satıra, Home ilk satıra gider; odaklanan satır görünen yere gelir.

presentation = OverlayPresentation.Popover: dar bir pencerede de panel. Bir sheet'te satırlar sheet'in içinde kayar, sheet en çok pencere kadar yüksektir.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
PantrixMenu(
    visible = open,
    onDismissRequest = {
        open = false
        report("Sürüm menüsü kapatıldı")
    },
    anchor = {
        PantrixButton(
            text = "Sürüm seç",
            onClick = { open = true },
            variant = ButtonVariant.Outline,
            tagKey = "open_versions"
        )
    },
    tagKey = "versions",
    presentation = OverlayPresentation.Popover
) {
    (30 downTo 1).forEach { number ->
        PantrixMenuItem(
            text = "Sürüm $number.0",
            onClick = { report("Sürüm $number.0 seçildi") },
            tagKey = "version_$number"
        )
    }
}

Genişlik

Panel en uzun satırı kadar geniştir, stilin en dar ve en geniş genişliği arasında (MenuStyle.minWidth ve maxWidth). "Kısa" menüsünün etiketleri en dar genişlikten kısadır: panel o genişlikte kalır. "Uzun" menüsünün ilk etiketi en geniş panele sığmaz: tek satırda kesilir.

presentation = OverlayPresentation.Popover: bir sheet pencere kadar geniştir; panelin genişliği dar bir pencerede de görünsün diye iki menü de paneldir.

var narrow by rememberSaveable { mutableStateOf(false) }
var wide by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixMenu(
        visible = narrow,
        onDismissRequest = {
            narrow = false
            report("Kısa menüsü kapatıldı")
        },
        anchor = {
            PantrixButton(
                text = "Kısa",
                onClick = { narrow = true },
                variant = ButtonVariant.Outline,
                tagKey = "open_narrow"
            )
        },
        tagKey = "narrow",
        presentation = OverlayPresentation.Popover
    ) {
        PantrixMenuItem(text = "Aç", onClick = { report("Aç seçildi") }, tagKey = "open")
        PantrixMenuItem(text = "Sil", onClick = { report("Sil seçildi") }, tagKey = "delete")
    }
    PantrixMenu(
        visible = wide,
        onDismissRequest = {
            wide = false
            report("Uzun menüsü kapatıldı")
        },
        anchor = {
            PantrixButton(
                text = "Uzun",
                onClick = { wide = true },
                variant = ButtonVariant.Outline,
                tagKey = "open_wide"
            )
        },
        tagKey = "wide",
        presentation = OverlayPresentation.Popover
    ) {
        PantrixMenuItem(
            text = "Rapor.pdf dosyasını paylaşılan klasördeki herkesle birlikte düzenlemeye aç",
            onClick = { report("Uzun satır seçildi") },
            tagKey = "long"
        )
        PantrixMenuItem(text = "Kopyala", onClick = { report("Kopyala seçildi") }, tagKey = "copy")
    }
}

Kendi stili

style yalnızca bu menünün geometrisini değiştirir: MenuStyle'ın verilen alanları değişir, gerisi temanın ve platformun stilinden gelir. Burada panelin köşeleri temanın büyük köşesidir (ShapeRole.Large), panel en az 240dp genişliğindedir, satırları 56dp yüksekliğinde ve simgeleri 28dp'dir.

Menüye verilen stil satırlarını da çizer; PantrixMenuItem ayrıca stil almaz. Verilen genişlik ve yükseklik temanın yoğunluğuyla ölçeklenir; köşeler ve simgenin boyutu ölçeklenmez.

presentation = OverlayPresentation.Popover: bir sheet'in köşeleri ve genişliği sheet'indir, panelin stili orada yalnızca satırları çizer; stil dar bir pencerede de görünsün diye menü paneldir.

var open by rememberSaveable { mutableStateOf(false) }
PantrixMenu(
    visible = open,
    onDismissRequest = { open = false },
    anchor = {
        PantrixButton(
            text = "Hesap",
            onClick = { open = true },
            variant = ButtonVariant.Outline,
            tagKey = "open_account"
        )
    },
    style = MenuStyle(shape = ShapeRole.Large, minWidth = 240.dp, itemHeight = 56.dp, iconSize = 28.dp),
    tagKey = "account",
    presentation = OverlayPresentation.Popover
) {
    PantrixMenuItem(text = "Profil", onClick = {}, icon = PantrixIcons.Person, tagKey = "profile")
    PantrixMenuItem(text = "Gelen kutusu", onClick = {}, icon = PantrixIcons.Inbox, tagKey = "inbox")
    PantrixMenuItem(text = "Sık kullanılanlar", onClick = {}, icon = PantrixIcons.Star, tagKey = "favourites")
}

Kendi renkleri

colors menüye temanın değil, verilen renkleri verir: burada temanın hiçbir rolünde olmayan, uygulamanın kendi moru. MenuColors'ın yalnızca verilen alanları değişir, gerisi temanın kalır: silen satır yine temanın danger rengindedir.

Temanın ikinci ve soluk yazı renkleri yalnızca temanın kendi zeminleri içindir. Bu dolguda kısayol satırın renginde, seçilemeyen satır o rengin bir payında çizilir. Grupların arasındaki çizgiye renk verilmez: dolgunun üstünde o da satırın renginin bir payıdır.

Rolü olmayan bir dolguda content de verilir: o dolgunun üstünde neyin okunduğunu tema bilmez. Dolgu temanın bir rolünün rengiyse, PantrixTheme.colors.primary.container gibi, satırlar kendiliğinden o rolün eş rengini alır.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
val own = ownColors()
PantrixMenu(
    visible = open,
    onDismissRequest = {
        open = false
        report("Pro menüsü kapatıldı")
    },
    anchor = {
        PantrixButton(
            text = "Pro",
            onClick = { open = true },
            variant = ButtonVariant.Outline,
            tagKey = "open_pro_menu"
        )
    },
    colors = MenuColors(container = own.container, content = own.onContainer, border = own.color),
    tagKey = "pro_menu"
) {
    PantrixMenuItem(
        text = "Planı yükselt",
        onClick = { report("Planı yükselt seçildi") },
        icon = PantrixIcons.Star,
        shortcut = "Ctrl+U",
        tagKey = "upgrade"
    )
    PantrixMenuItem(
        text = "Faturalar",
        onClick = { report("Faturalar seçildi") },
        icon = PantrixIcons.Folder,
        enabled = false,
        tagKey = "invoices"
    )
    PantrixDivider()
    PantrixMenuItem(
        text = "Aboneliği bitir",
        onClick = { report("Aboneliği bitir seçildi") },
        icon = PantrixIcons.Close,
        destructive = true,
        tagKey = "cancel_plan"
    )
}

Başka temadaki bir bölümde

Sayfanın tersi renkte bir bölüm ve içinden açılan bir menü. Bölüm ikinci bir temadır (PantrixTheme(darkTheme = …)): açık sayfada koyu, koyu sayfada açık. Menü o temanın içinde çağrıldığı için onun renklerindedir: paneli pencerenin kökündeki kendi katmanında kurulsa da çağrıldığı yerin temasını taşır.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
val pageIsDark = PantrixTheme.colors.background.luminance() < 0.5f
PantrixTheme(darkTheme = !pageIsDark) {
    PantrixSurface(modifier = Modifier.fillMaxWidth()) {
        Column(modifier = Modifier.padding(PantrixTheme.spacing.md)) {
            PantrixMenu(
                visible = open,
                onDismissRequest = {
                    open = false
                    report("Bölümün menüsü kapatıldı")
                },
                anchor = {
                    PantrixButton(
                        text = "Bu bölümden aç",
                        onClick = { open = true },
                        tagKey = "open_menu_in_part"
                    )
                },
                tagKey = "menu_in_part"
            ) {
                PantrixMenuItem(
                    text = "Bölümü yenile",
                    onClick = { report("Bölümü yenile seçildi") },
                    icon = PantrixIcons.Refresh,
                    tagKey = "refresh_part"
                )
                PantrixMenuItem(
                    text = "Bölümü kaldır",
                    onClick = { report("Bölümü kaldır seçildi") },
                    icon = PantrixIcons.Close,
                    destructive = true,
                    tagKey = "remove_part"
                )
            }
        }
    }
}

Dialog içinde

Bir dialog'un içinden açılan menü. Menü dialog'un üstünde, kendi katmanındadır: Escape ve geri tuşu önce menüyü kapatır, dialog'u bir sonraki kapatır. Menünün dışına, dialog'un içine basmak da yalnızca menüyü kapatır.

var dialog by rememberSaveable { mutableStateOf(false) }
var menu by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
PantrixButton(
    text = "Dosya ayrıntıları…",
    onClick = { dialog = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_file_dialog"
)
PantrixDialog(
    visible = dialog,
    onDismissRequest = {
        dialog = false
        report("Dosya ayrıntıları kapatıldı")
    },
    title = "Rapor.pdf",
    message = "2,4 MB. Dün değiştirildi.",
    actions = {
        PantrixButton(
            text = "Kapat",
            onClick = {
                dialog = false
                report("Dosya ayrıntıları kapatıldı")
            },
            variant = ButtonVariant.Text,
            tagKey = "close_file_dialog"
        )
    },
    tagKey = "file_dialog"
) {
    PantrixMenu(
        visible = menu,
        onDismissRequest = {
            menu = false
            report("Paylaş menüsü kapatıldı")
        },
        anchor = {
            PantrixButton(
                text = "Paylaş",
                onClick = { menu = true },
                variant = ButtonVariant.Outline,
                tagKey = "open_share"
            )
        },
        tagKey = "share"
    ) {
        PantrixMenuItem(
            text = "Bağlantıyı kopyala",
            onClick = { report("Bağlantıyı kopyala seçildi") },
            tagKey = "copy_link"
        )
        PantrixMenuItem(
            text = "E-postayla gönder",
            onClick = { report("E-postayla gönder seçildi") },
            tagKey = "send_mail"
        )
    }
}

Dar pencerede sheet

Aynı menü pencerenin genişliğine göre: karttaki pencere seçicisinden "Dar"ı seç, menü alttan bir sheet olarak açılır; "Geniş"te düğmenin yanında bir paneldir. Sheet'te satırlar sheet kadar geniştir, aşağı sürüklemek ya da scrim'e basmak kapatır, "Sil" kırmızı kalır. Kısayollar Android'de ve iOS'ta sheet'te yazılmaz: basılacak tuşları yoktur.

Menü açılırken seçilir: açıkken pencere değişse de sheet sheet, panel panel kalır; sonraki açılış yeni pencereye göredir. Varsayılan budur; presentation = OverlayPresentation.Adaptive yalnızca görünsün diye yazılı.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
// Kartın penceresi örnek kadar uzundur: dar bir pencerede açılan sheet'e yer kalsın diye örnek uzun tutulur.
Column(Modifier.fillMaxWidth().height(280.dp)) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        PantrixText(text = "Sunum.key")
        PantrixMenu(
            visible = open,
            onDismissRequest = { open = false },
            anchor = {
                PantrixIconButton(
                    imageVector = PantrixIcons.MoreHorizontal,
                    contentDescription = "Sunum.key için eylemler",
                    onClick = { open = true },
                    tagKey = "open_adaptive_menu"
                )
            },
            tagKey = "adaptive_menu",
            presentation = OverlayPresentation.Adaptive
        ) {
            PantrixMenuItem(
                text = "Paylaş",
                onClick = { report("Paylaş seçildi") },
                icon = PantrixIcons.Upload,
                shortcut = "Ctrl+Shift+S",
                tagKey = "share"
            )
            PantrixMenuItem(
                text = "Kopyala",
                onClick = { report("Kopyala seçildi") },
                icon = PantrixIcons.Copy,
                shortcut = "Ctrl+C",
                tagKey = "copy"
            )
            PantrixDivider()
            PantrixMenuItem(
                text = "Sil",
                onClick = { report("Sil seçildi") },
                destructive = true,
                tagKey = "delete"
            )
        }
    }
}

API

visible

Bir öğenin eylemlerini o öğenin yanındaki bir panelde listeler: bir "daha fazla" düğmesinin açtığı liste ya da bir satırın eylemleri.

Parametre	Tür	Varsayılan	Ne olduğu
`visible`	`Boolean`		Menünün görünüp görünmediği. Temanın hareketiyle girer ve çıkar.
`onDismissRequest`	`() -> Unit`		Dışına basılınca, Escape'e ya da geri tuşuna basılınca ve bir satır seçilince çağrılır. Menü, `visible` false olana kadar kalır.
`anchor`	`@Composable () -> Unit`		Menünün ait olduğu kontrol, çoğunlukla onu açan düğme. Menünün çağrıldığı yerde ve o yerin istediği gibi yerleşir.
`modifier`	`Modifier`	`Modifier`	Panele, kendi katmanının içinde uygulanır. Çapaya uygulanmaz.
`side`	`PopoverSide`	`PopoverSide.Bottom`	Panelin çapanın hangi yanını tercih ettiği. `PopoverSide.Start` ve `PopoverSide.End` yazı yönünü izler.
`alignment`	`PopoverAlignment`	`PopoverAlignment.Start`	Panelin o yan boyunca çapayla nasıl hizalanacağı: başka türlü söylenmezse çapanın başlangıç kenarından, bir menünün kendisini açandan sarktığı gibi.
`style`	`MenuStyle?`	`null`	Bu çağrının kendi stili, satırları da onunla çizilir: çevresindeki her stili ezer, yoğunluk ona da uygulanır. Yalnızca verdiği alanlar değişir, her platformda.
`colors`	`MenuColors?`	`null`	Bu çağrının kendi renkleri, satırlarınınkiler de içinde. Yalnızca verdikleri değişir, gerisi temanın kalır.
`tagKey`	`String?`	`null`	otomasyon için yerele bağlı olmayan bir anahtar: panelin etiketi `Menu_<tagKey>`'dir ve satırları onun içinde adlandırılır, `Menu_<tagKey>.MenuItem_<satırın anahtarı>`. Sheet olarak gösterilen bir menünün etiketleri aynıdır, sheet'in üstünde.
`presentation`	`OverlayPresentation`	`OverlayPresentation.Adaptive`	menünün nasıl gösterildiği: varsayılan dar bir pencerede bir sheet, daha geniş pencerede çapanının yanında bir panel; her zaman panel ya da her zaman sheet. Menü açılırken seçilir, kapanana kadar kalır.
`content`	`@Composable ColumnScope.() -> Unit`		Satırlar: `PantrixMenuItem`'lar ve grupların arasında birer `PantrixDivider`. Renk verilmezse bu çizgi bir dolgunun üstünde satırların renginden çıkar, panelin çevresindeki ince çizgi gibi.

MenuStyle

PantrixMenu'nün geometrisi: çizdiği panel, bu panelin çapasından ve pencerenin kenarlarından ne kadar uzakta durduğu ve içindeki satırlar.

Parametre	Tür	Varsayılan	Ne olduğu
`shape`	`ShapeSpec`	`ShapeSpec.Unspecified`	Panelin köşeleri: Android'de ve iOS'ta temanın orta, masaüstünde ve web'de küçük köşesidir.
`minWidth`	`Dp`	`Dp.Unspecified`	Panelin en az genişliği: etiketleri ne kadar kısa olursa olsun bundan dar olmaz.
`maxWidth`	`Dp`	`Dp.Unspecified`	Panelin en çok genişliği: daha uzun bir etiket kesilir.
`maxHeight`	`Dp`	`Dp.Unspecified`	Panelin en çok yüksekliği: sığmayan satırlar kayar.
`elevation`	`Dp`	`Dp.Unspecified`	Panelin uygulamanın üstünde ne kadar yüksekte durduğu, yani gölgesinin ne kadar büyük olduğu.
`gap`	`Dp`	`Dp.Unspecified`	Çapa ile panelin arası.
`margin`	`Dp`	`Dp.Unspecified`	Panel ile pencerenin kenarları arasında, bir de pencereyi orada örten şeylerle arasında boş bırakılan yer: bir sistem çubuğu, bir ekran çentiği, klavye.
`verticalPadding`	`Dp`	`Dp.Unspecified`	İlk satırın üstündeki ve son satırın altındaki boşluk.
`itemHeight`	`Dp`	`Dp.Unspecified`	Platformun dokunma hedefi daha yüksek değilse bir satırın en az yüksekliği.
`itemHorizontalPadding`	`Dp`	`Dp.Unspecified`	Bir satırın içinde, simgesinden önceki ve kısayolundan sonraki boşluk.
`iconSize`	`Dp`	`Dp.Unspecified`	Bir satırın simgesi.
`iconGap`	`Dp`	`Dp.Unspecified`	Bir satırın simgesi ile etiketinin arası ve etiketi ile kısayolunun arası.

MenuColors

Temanın renklerini almayan bir çağrı için PantrixMenu'nün boyandığı renkler: verilen renk kullanılır, verilmeyen temanın kalır.

Parametre	Tür	Varsayılan	Ne olduğu
`container`	`Color`	`Color.Unspecified`	Panelin dolgusu. Temanın `surface`'ı.
`content`	`Color`	`Color.Unspecified`	Bir satırın etiketi ve simgesi. Temanın `textPrimary`'si. Bir satırın kısayolu temanın kendi dolgusunda temanın `textSecondary`'sidir, çağıranın verdiği bir dolguda ise bu renktedir.
`destructive`	`Color`	`Color.Unspecified`	Silen ya da geri alınamayan bir satırın etiketi ve simgesi. Temanın `danger` rengi.
`border`	`Color`	`Color.Unspecified`	Panelin çevresindeki ince çizgi: paneli, altında duran kendi rengindeki bir yüzeyden ayırır, gölgenin az göründüğü koyu temada olduğu gibi. Temanın kendi zeminlerinde temanın `divider`'ıdır. Bir dolgunun üstünde, o çizginin okunmayacağı yerde, `content`'in bir payıdır: Subtle bir düğmenin kenarı gibi. Saydam bir renk verilirse çizgi çizilmez.

Erişilebilirlik

Klavye. Klavyeyle açılınca odak ilk satırdadır. Ok tuşları satırlar arasında gezer ve sondan başa döner, Home ve End ilk ve son satıra gider, Tab da satırları gezer; Enter ve boşluk satırı seçer, Escape kapatır. Kapanınca odak menüyü açan kontrole döner. Menü açıkken altındaki sayfa odak göstermez.
Ekran okuyucu. Simge okunmaz, satırı etiketi söyler. Kısayol gösterilir ve okunur, ama bağlanmaz: tuşları bağlamak uygulamanın işidir.