Sheet

O anki ekrana ait kısa bir iş için uygulamanın üstüne açılan panel: nasıl sıralanacağını, nerede paylaşılacağını seçmek, bir iki alan, içinden seçilecek bir liste, basılan şeyin ayrıntıları.

import com.pantrixui.components.overlay.sheet.PantrixSheet

Alt kenarda. Varsayılan kenar SheetEdge.Bottom'dır: sheet pencere kadar geniştir, stilin maxWidth'ine kadar, ve içeriği kadar yüksektir. Sürüklenir: aşağı sürüklemek kapatır.
Yan sheet. edge = SheetEdge.End ile sheet son kenarda durur, sağdan sola yazılan dilde solda: pencere boyunca uzanır, stilin sideWidth'i kadar geniştir ve bir kapatma düğmesi vardır. Kenara doğru sürüklemek kapatır. SheetEdge.Start aynı sheet'i baş kenardan açar: dar bir pencerede uygulamanın menüsü.
Kenardan kenara içerik. İçerik sheet'in genişliğine yayılır: bir listenin satırları kenarlara uzanır, bir form kendi yan boşluğunu verir. Sheet'e sığmayan içerik başlığın altında kayar.
Yarım açık. halfOpen ile içeriği pencerenin yarısından uzun olan sheet önce yarım açılır, üstü pencerenin ortasında. Yukarı sürüklemek ya da odağın içine girmesi tam açar; yarım açıkken aşağı sürüklemek kapatır.
Tam ekran. fullScreen ile tam açık sheet, içeriği kısa da olsa pencerenin durum çubuğunun altında kalan yeri kadar yüksektir. coverStatusBar onu durum çubuğunun altına da uzatır.
Kendi kayan liste. Uzun bir liste LazyColumn'da, scrollContent = false ile durur. overscrollMovesSheet = false listenin yalnızca kaymasını sağlar: başına gelen liste sheet'i aşağı çekmez, tutamak ve başlık yine sürükler.
Kapatılamayan sheet. dismissible = false ile sürüklemek, scrim, geri tuşu ve Escape bir şey yapmaz; yan sheet'in kapatma düğmesi, yarım açılmayan sheet'in tutamağı da yoktur. Çıkış içerikteki bir kontroldür.
Kapanırken ağaçta kalır. Kapalı bir sheet hiçbir şey kurmaz: ağaçta visible = false ile durur ve temanın hareketiyle çıkar. Açıkken kompozisyondan çıkarılan sheet hareketsiz, bir anda gider.
Renk ve stil. colors zemini, başlığı, tutamağı, kapatma ikonunu ve scrim'i değiştirir; style uygulamaya bakan köşeleri, genişlikleri, scrim'e bırakılan payı, gölgeyi ve tutamağı. Köşeler Android'de ve iOS'ta büyük, masaüstünde ve web'de orta yuvarlaktır; iOS'ta gölge yoktur.

Örnekler

Sıralama

En yalın hâli: bir başlık ve içerik. Bir seçim işin tamamıdır: seçilince sheet kapanır, ayrıca bir "Tamam" düğmesi aranmaz.

Sheet kendini kapatmaz: aşağı sürüklemek, scrim'e basmak, geri tuşu ve Escape onDismissRequest'i çağırır; hepsinde kapatan open = false satırıdır. Kartın "Son olay" satırı en son ne olduğunu söyler.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
var sort by rememberSaveable { mutableStateOf("name") }
PantrixButton(
    text = "Sırala: ${SORTS.first { it.value == sort }.label}",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_sort"
)
PantrixSheet(
    visible = open,
    onDismissRequest = {
        open = false
        report("Sıralama sheet'i kapatıldı")
    },
    title = "Sırala",
    tagKey = "sort_by"
) {
    PantrixRadioGroup(
        options = SORTS,
        selected = sort,
        onSelect = {
            sort = it
            open = false
            report("Sıralama: ${SORTS.first { option -> option.value == it }.label}")
        },
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.lg),
        tagKey = "sort"
    )
}

private val SORTS = listOf(
    RadioOption(value = "name", label = "Ad", tagKey = "name"),
    RadioOption(value = "date", label = "Değiştirilme tarihi", tagKey = "date"),
    RadioOption(value = "size", label = "Boyut", tagKey = "size")
)

Form

Bir alan ve bir düğme. İçerik sheet'in kenarlarına kadar uzandığı için formun yan boşluğu kendisindendir: Modifier.padding(horizontal = …). "Kaydet" not boşken kapalıdır.

Dokunarak açılınca odak alana geçmez. Alana basınca sheet klavyenin üstünde kalır.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
val note = rememberTextFieldState()
PantrixButton(
    text = "Not ekle…",
    onClick = {
        note.clearText()
        open = true
    },
    variant = ButtonVariant.Outline,
    tagKey = "open_note"
)
PantrixSheet(
    visible = open,
    onDismissRequest = {
        open = false
        report("Not sheet'i kapatıldı")
    },
    title = "Not ekle",
    tagKey = "note"
) {
    Column(
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.lg),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)
    ) {
        PantrixTextField(state = note, modifier = Modifier.fillMaxWidth(), label = "Not", tagKey = "note")
        PantrixButton(
            text = "Kaydet",
            onClick = {
                open = false
                report("Not: ${note.text}")
            },
            modifier = Modifier.fillMaxWidth(),
            enabled = note.text.isNotBlank(),
            tagKey = "save_note"
        )
    }
}

Klavye açıkken

Sayfadaki bir alanda yazarken açılan sheet. Sayfada odak neredeyse orada kalır ve sheet kapanınca yine oradadır; neresi olduğu platforma göre değişir. Android'de ve iOS'ta düğmeye dokunmak odağı almaz: odak yazılan alanda kalır. Masaüstünde ve web'de düğmeye basmak odağı düğmeye taşır: sheet kapanınca odak düğmededir.

Sheet açıkken klavyeden yazılan sheet'e gider, alttaki alana değil; alan da o sürede durgun çizilir, imleci yoktur. Android'de ve iOS'ta ekran klavyesi sheet açılınca kapanır; sheet kapanınca imleç ve klavye alana döner.

Önce alana yaz, sonra düğmeye bas: alana yazılan her platformda yerinde durur.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
val search = rememberTextFieldState()
PantrixTextField(
    state = search,
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    label = "Ara",
    tagKey = "page_search"
)
PantrixButton(
    text = "Süzgeçler…",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_filters"
)
PantrixSheet(
    visible = open,
    onDismissRequest = {
        open = false
        report("Süzgeç sheet'i kapatıldı")
    },
    title = "Süzgeçler",
    tagKey = "filters"
) {
    FILTERS.forEachIndexed { index, filter ->
        SheetRow(
            text = filter,
            tag = "Row_filter_$index",
            onClick = {
                open = false
                report("Süzgeç: $filter")
            }
        )
    }
}

@Composable
private fun SheetRow(
    text: String,
    tag: String,
    onClick: () -> Unit
) {
    val spacing = PantrixTheme.spacing
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .testTag(tag)
            .clickable(onClick = onClick)
            .padding(horizontal = spacing.lg, vertical = spacing.md)
    ) {
        PantrixText(text = text)
    }
}

private val FILTERS = listOf("Yalnız paylaşılanlar", "Son 7 gün", "PDF dosyaları")

Yarım açık liste

Yarım açık başlayan uzun bir liste: başı çoğu zaman yeter. halfOpen ile sheet pencerenin ortasına kadar açılır; yukarı sürükleyince, ya da odak içine girince, tam açılır. fullScreen tam açık hâlini pencerenin durum çubuğunun altında kalan yeri kadar yüksek yapar.

Liste kendi kayar: bir LazyColumn'dadır ve scrollContent = false sheet'in kendi kaydırma alanını kapatır. Listeye Modifier.fillMaxWidth() verilir: yoksa satırlarının yanından sürüklemek onu kaydırmaz. overscrollMovesSheet = false ile başına gelen liste sheet'i aşağı çekmez; tutamak ve başlık yine sürükler.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
PantrixButton(
    text = "Ülke seç…",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_countries"
)
PantrixSheet(
    visible = open,
    onDismissRequest = {
        open = false
        report("Ülke sheet'i kapatıldı")
    },
    title = "Ülke",
    halfOpen = true,
    fullScreen = true,
    overscrollMovesSheet = false,
    scrollContent = false,
    tagKey = "country"
) {
    LazyColumn(
        modifier = Modifier.fillMaxWidth().testTag("List_countries"),
        contentPadding = PaddingValues(bottom = PantrixTheme.spacing.lg)
    ) {
        itemsIndexed(COUNTRIES) { index, country ->
            SheetRow(
                text = country,
                tag = "Row_country_$index",
                onClick = {
                    open = false
                    report("Ülke: $country")
                }
            )
        }
    }
}

@Composable
private fun SheetRow(
    text: String,
    tag: String,
    onClick: () -> Unit
) {
    val spacing = PantrixTheme.spacing
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .testTag(tag)
            .clickable(onClick = onClick)
            .padding(horizontal = spacing.lg, vertical = spacing.md)
    ) {
        PantrixText(text = text)
    }
}

private val COUNTRIES = (
    "Almanya, Arjantin, Avustralya, Avusturya, Belçika, Brezilya, Bulgaristan, Çekya, Çin, Danimarka, Endonezya, " +
        "Estonya, Fas, Finlandiya, Fransa, Güney Afrika, Güney Kore, Hindistan, Hollanda, İngiltere, İrlanda, " +
        "İspanya, İsveç, İsviçre, İtalya, İzlanda, Japonya, Kanada, Kenya, Kolombiya, Letonya, Litvanya, " +
        "Macaristan, Malezya, Meksika, Mısır, Norveç, Peru, Polonya, Portekiz, Romanya, Şili, Singapur, Slovakya, " +
        "Tayland, Tunus, Türkiye, Ukrayna, Vietnam, Yeni Zelanda, Yunanistan"
).split(", ")

Tam ekran

Kendi başına bir ekran gibi: fullScreen ile tam açık sheet, içeriği kısa da olsa pencerenin durum çubuğunun altında kalan yeri kadar yüksektir. coverStatusBar ile durum çubuğunun altına da girer ve pencerenin tamamı kadar yüksek olur: üst köşeleri orada düzleşir, tutamağı ve başlığı çubuğun altında kalır.

Alana yazdıkça dosyalar süzülür; liste kısalsa da sheet'in yüksekliği değişmez. Arama her açılışta boş başlar.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
val query = rememberTextFieldState()
PantrixButton(
    text = "Dosyalarda ara…",
    onClick = {
        query.clearText()
        open = true
    },
    variant = ButtonVariant.Outline,
    tagKey = "open_search"
)
PantrixSheet(
    visible = open,
    onDismissRequest = {
        open = false
        report("Arama sheet'i kapatıldı")
    },
    title = "Dosyalarda ara",
    fullScreen = true,
    coverStatusBar = true,
    tagKey = "search"
) {
    PantrixTextField(
        state = query,
        modifier = Modifier.fillMaxWidth().padding(horizontal = PantrixTheme.spacing.lg),
        label = "Ara",
        tagKey = "query"
    )
    FILES.forEachIndexed { index, file ->
        if (query.text.isBlank() || file.contains(query.text, ignoreCase = true)) {
            SheetRow(
                text = file,
                tag = "Row_file_$index",
                onClick = {
                    open = false
                    report("Açılan dosya: $file")
                }
            )
        }
    }
}

@Composable
private fun SheetRow(
    text: String,
    tag: String,
    onClick: () -> Unit
) {
    val spacing = PantrixTheme.spacing
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .testTag(tag)
            .clickable(onClick = onClick)
            .padding(horizontal = spacing.lg, vertical = spacing.md)
    ) {
        PantrixText(text = text)
    }
}

private val FILES = listOf("Rapor.pdf", "Bütçe.xlsx", "Sunum.key", "Notlar.txt", "Sözleşme.pdf", "Logo.svg")

Seçmek zorunlu

dismissible = false: tutamak çizilmez; sürüklemek, scrim, geri tuşu ve Escape bir şey yapmaz, onDismissRequest çağrılmaz. Çıkış içindeki düğmelerdir; bu yüzden her çıkış için bir düğme bulunur. Yalnızca sheet'i içeriğindeki bir kontrolün kapatması gereken yerde kullanılır.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
PantrixButton(
    text = "Bildirim izni",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_permission"
)
PantrixSheet(
    visible = open,
    onDismissRequest = { report("Bu çağrılmaz: sheet kapatılamaz") },
    title = "Bildirimlere izin ver",
    dismissible = false,
    tagKey = "permission"
) {
    Column(
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.lg),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
    ) {
        PantrixText(text = "Paylaşılan dosyalar değişince haber verelim mi?")
        PantrixButton(
            text = "İzin ver",
            onClick = {
                open = false
                report("Bildirimlere izin verildi")
            },
            modifier = Modifier.fillMaxWidth(),
            tagKey = "allow"
        )
        PantrixButton(
            text = "Şimdi değil",
            onClick = {
                open = false
                report("Bildirim izni ertelendi")
            },
            modifier = Modifier.fillMaxWidth(),
            variant = ButtonVariant.Text,
            tagKey = "not_now"
        )
    }
}

Yan sheet

edge = SheetEdge.End: sheet pencerenin son kenarından gelir, soldan sağa yazılan dilde sağdan, ve pencere boyunca uzanır. Basılan şeyin ayrıntıları içindir: liste yerinde kalır, ayrıntı yandan gelir.

Kapatma düğmesi, scrim, geri tuşu, Escape ve kenara doğru sürüklemek kapatır. Yan sheet yarım açılmaz ve tam ekran olmaz: o parametreler yalnızca alt kenardaki sheet içindir.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
PantrixButton(
    text = "Rapor.pdf ayrıntıları",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_details"
)
PantrixSheet(
    visible = open,
    onDismissRequest = {
        open = false
        report("Ayrıntı sheet'i kapatıldı")
    },
    title = "Rapor.pdf",
    edge = SheetEdge.End,
    tagKey = "details"
) {
    Column(
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.lg),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
    ) {
        DETAILS.forEach { (name, value) ->
            Column {
                PantrixText(
                    text = name,
                    style = PantrixTheme.typography.footnote,
                    color = PantrixTheme.colors.textSecondary
                )
                PantrixText(text = value)
            }
        }
    }
}

private val DETAILS = listOf(
    "Tür" to "PDF belgesi",
    "Boyut" to "2,4 MB",
    "Değiştirilme" to "3 Ekim 2026",
    "Sahibi" to "Ada Yılmaz",
    "Konum" to "Belgeler / Raporlar"
)

Yan sheet'te form

Geniş pencerede bir formun yeri: sayfa arkada görünür kalır. Klavyeyle açılınca odak ilk alandadır; Tab sheet'in içinde döner. "Kaydet" ad boşken kapalıdır.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
val name = rememberTextFieldState(initialText = "Ada Yılmaz")
val title = rememberTextFieldState(initialText = "Tasarımcı")
PantrixButton(
    text = "Profili düzenle…",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_profile"
)
PantrixSheet(
    visible = open,
    onDismissRequest = {
        open = false
        report("Profil sheet'i kapatıldı")
    },
    title = "Profili düzenle",
    edge = SheetEdge.End,
    tagKey = "profile"
) {
    Column(
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.lg),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)
    ) {
        PantrixTextField(state = name, modifier = Modifier.fillMaxWidth(), label = "Ad", tagKey = "name")
        PantrixTextField(state = title, modifier = Modifier.fillMaxWidth(), label = "Unvan", tagKey = "title")
        PantrixButton(
            text = "Kaydet",
            onClick = {
                open = false
                report("Profil: ${name.text}, ${title.text}")
            },
            enabled = name.text.isNotBlank(),
            tagKey = "save_profile"
        )
    }
}

Baş kenardan menü

edge = SheetEdge.Start: sheet pencerenin baş kenarından gelir, soldan sağa yazılan dilde soldan. Dar bir penceredeki uygulamanın menüsüdür: geniş pencerede yanda duran gezinme, telefonda bir düğmeyle açılır ve bir hedef seçilince kapanır.

Yan sheet'in ters yönüdür: pencere boyunca uzanır, kapatma düğmesi vardır, baş kenara doğru sürüklemek kapatır.

var open by rememberSaveable { mutableStateOf(false) }
var where by rememberSaveable { mutableStateOf(SECTIONS.first()) }
PantrixButton(
    text = "Menü",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_menu"
)
PantrixText(text = "Açık bölüm: $where", color = PantrixTheme.colors.textSecondary)
PantrixSheet(
    visible = open,
    onDismissRequest = { open = false },
    title = "Belgeler",
    edge = SheetEdge.Start,
    tagKey = "menu"
) {
    Column {
        SECTIONS.forEachIndexed { index, section ->
            SheetRow(text = section, tag = "menu_$index") {
                where = section
                open = false
            }
        }
    }
}

@Composable
private fun SheetRow(
    text: String,
    tag: String,
    onClick: () -> Unit
) {
    val spacing = PantrixTheme.spacing
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .testTag(tag)
            .clickable(onClick = onClick)
            .padding(horizontal = spacing.lg, vertical = spacing.md)
    ) {
        PantrixText(text = text)
    }
}

private val SECTIONS = listOf("Kurulum", "Tema", "Formlar", "Test etmek")

Kendi renkleri

colors ile verilen renkler değişir, verilmeyen temanın kalır: burada zemin, başlık ve tutamak uygulamanın kendi morunda, scrim temanın.

Bu mor temanın hiçbir rolünde yok; bu yüzden üstünde okunan rengi de çağıran verir: başlığınki colors ile, içerikteki yazınınki kendi color'ı ile. Zemin temanın bir rol rengi olsaydı başlık, tutamak ve kapatma ikonu o rolle eşlenen rengi kendiliğinden alırdı.

var open by rememberSaveable { mutableStateOf(false) }
val report = LocalExampleEvents.current
val own = ownColors()
PantrixButton(
    text = "Pro'nun getirdikleri",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_pro"
)
PantrixSheet(
    visible = open,
    onDismissRequest = {
        open = false
        report("Pro sheet'i kapatıldı")
    },
    title = "Pro'ya geç",
    colors = SheetColors(container = own.container, title = own.onContainer, handle = own.color),
    tagKey = "pro"
) {
    Column(
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.lg),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
    ) {
        PantrixText(
            text = "Sınırsız proje, paylaşılan klasörler ve öncelikli destek.",
            color = own.onContainer
        )
        PantrixButton(
            text = "Yükselt",
            onClick = {
                open = false
                report("Plan yükseltildi")
            },
            tagKey = "upgrade_plan"
        )
    }
}

Kendi stili

style yalnızca bu çağrının geometrisini değiştirir: uygulamaya bakan köşeler temanın en küçük yuvarlaklığında (ShapeRole.ExtraSmall), sheet en fazla 420dp genişliğinde, tutamak 56dp'ye 6dp. Pencere 420dp'den genişse sheet alt kenarın ortasında durur. Verilmeyen alanlar platformun stilinden gelir.

var open by rememberSaveable { mutableStateOf(false) }
PantrixButton(
    text = "Dışa aktar…",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "open_export"
)
PantrixSheet(
    visible = open,
    onDismissRequest = { open = false },
    title = "Dışa aktar",
    style = SheetStyle(
        shape = ShapeRole.ExtraSmall,
        maxWidth = 420.dp,
        handleWidth = 56.dp,
        handleHeight = 6.dp
    ),
    tagKey = "export"
) {
    EXPORT_FORMATS.forEachIndexed { index, format ->
        SheetRow(text = format, tag = "Row_export_$index", onClick = { open = false })
    }
}

@Composable
private fun SheetRow(
    text: String,
    tag: String,
    onClick: () -> Unit
) {
    val spacing = PantrixTheme.spacing
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .testTag(tag)
            .clickable(onClick = onClick)
            .padding(horizontal = spacing.lg, vertical = spacing.md)
    ) {
        PantrixText(text = text)
    }
}

private val EXPORT_FORMATS = listOf("PDF belgesi", "Word belgesi", "Düz metin")

Başka temadaki bir bölümde

Sayfanın tersi renkte bir bölüm ve içinden açılan bir sheet. Bölüm ikinci bir temadır (PantrixTheme(darkTheme = …)); sheet de o temanın içinde çağrıldığı için onun renklerindedir: bölüm koyuysa o da koyudur.

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)) {
            PantrixButton(text = "Bu bölümden aç", onClick = { open = true }, tagKey = "open_sheet_in_part")
        }
    }
    PantrixSheet(
        visible = open,
        onDismissRequest = {
            open = false
            report("Bölümün sheet'i kapatıldı")
        },
        title = "Paylaş",
        tagKey = "share"
    ) {
        SHARE_TARGETS.forEachIndexed { index, target ->
            SheetRow(
                text = target,
                tag = "Row_share_$index",
                onClick = {
                    open = false
                    report("Paylaşıldı: $target")
                }
            )
        }
    }
}

@Composable
private fun SheetRow(
    text: String,
    tag: String,
    onClick: () -> Unit
) {
    val spacing = PantrixTheme.spacing
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .testTag(tag)
            .clickable(onClick = onClick)
            .padding(horizontal = spacing.lg, vertical = spacing.md)
    ) {
        PantrixText(text = text)
    }
}

private val SHARE_TARGETS = listOf("Bağlantıyı kopyala", "E-postayla gönder", "Ekibe aç")

Pencereye göre kenar

edge = SheetEdge.Adaptive: dar bir pencerede alttan tam ekran bir sheet, daha genişte yan sheet. Bir formun ya da basılanın ayrıntısının yeri: telefonda ekranı doldurur, tablette ve masaüstünde içeriğin yanında durur. "Dar" ile "Geniş" arasında geç; açıkken pencere değişirse sheet kenarını korur.

var open by rememberSaveable { mutableStateOf(false) }
// 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)) {
    PantrixButton(text = "Sipariş 1042", onClick = { open = true }, tagKey = "open_adaptive_sheet")
    PantrixSheet(
        visible = open,
        onDismissRequest = { open = false },
        title = "Sipariş 1042",
        edge = SheetEdge.Adaptive,
        tagKey = "adaptive_sheet"
    ) {
        Column(
            modifier = Modifier.padding(horizontal = PantrixTheme.spacing.lg),
            verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
        ) {
            PantrixText("Üç ürün, salı günü teslim edilecek.")
            PantrixText("Kargo ücreti alınmadı; fatura e-postayla geldi.")
            PantrixButton(text = "Kapat", onClick = { open = false }, tagKey = "adaptive_sheet_close")
        }
    }
}

API

visible

Parametre	Tür	Varsayılan	Ne olduğu
`visible`	`Boolean`		Sheet'in gösterilip gösterilmediği. Temanın hareketiyle girer ve çıkar.
`onDismissRequest`	`() -> Unit`		`dismissible` true iken geri tuşu, Escape, scrim'e basmak, kenara doğru sürüklemek ve yan sheet'in kapatma düğmesi için çağrılır. Sheet, `visible` false olana kadar kalır.
`title`	`String?`	`null`	Sheet'in ne için olduğu, kısa bir etiket olarak: "Sırala". Sheet açılınca duyurulur ve onun başlığıdır. Olmayacaksa null ya da boş: ona satır ayrılmaz, içerik tutamağın altından başlar ve sheet açılınca ekran okuyucu bir ad duyurmaz. Yan sheet'in kapatma düğmesi yine üstünde durur.
`modifier`	`Modifier`	`Modifier`	Sheet'in kendisine uygulanır. Yanında açık bırakılan scrim şeridi sheet'in parçası değildir.
`edge`	`SheetEdge`	`SheetEdge.Bottom`	sheet'in pencerenin hangi kenarı boyunca durduğu: alt, son, baş ya da pencerenin genişliğine göre (`SheetEdge.Adaptive`), dar bir pencerede alttan tam ekran. `halfOpen`, `fullScreen`, `coverStatusBar` ve `overscrollMovesSheet` uyarlanır bir sheet'te alttan geldiğinde sayılır.
`dismissible`	`Boolean`	`true`	Geri tuşunun, Escape'in, scrim'e basmanın, kenara doğru sürüklemenin, yan sheet'in kapatma düğmesinin ve ekran okuyucunun kapatma eyleminin kapanmayı isteyip istemediği. Yalnızca sheet'i `content` içindeki bir kontrolün kapatması gerektiğinde false yapılır.
`halfOpen`	`Boolean`	`false`	İçeriği pencerenin yarısından uzun olan sheet'in önce yarım açılıp açılmadığı; yarım açıkken üstü pencerenin ortasındadır. Yukarı sürüklemek de odağın içine girmesi de onu tam açar, yarım açıkken aşağı sürüklemek ise kapatır. Yalnızca alt kenarda.
`fullScreen`	`Boolean`	`false`	Tam açık sheet'in, içeriği ne kadar kısa olursa olsun, üstünde scrim kalmadan pencerenin durum çubuğunun altında kalan yeri kadar yüksek olup olmadığı. Alt kenardaki her sheet gibi pencerenin alt kenarına, sistemin gezinme çubuğunun altına kadar iner ve içindekileri o çubuğun üstünde tutar. Yalnızca alt kenarda.
`coverStatusBar`	`Boolean`	`false`	`fullScreen` olan bir sheet'in durum çubuğunun altına da uzanıp uzanmadığı: o zaman tam açıkken pencerenin tamamı kadar yüksektir. Çubuğun altına girerken üst köşeleri düzleşir, tutamağı ve başlığı çubuğun altında kalır. Android'de, sheet'in pencere kadar geniş olduğu yerde çubuğun ikonları sheet'in üstünde okunacak renge döner. Yalnızca alt kenarda ve `fullScreen` ile.
`overscrollMovesSheet`	`Boolean`	`true`	Zaten başında olan içeriği aşağı sürüklemenin, devam edip sheet'i de aşağı indirip indirmediği: önce yarım açık hâle, sonra kapalı hâle. Yalnızca kayması gereken bir liste için false yapılır; tutamak ve başlık sheet'i yine sürükler, içeriği yukarı sürüklemek de yarım açık sheet'i yine açar. Yalnızca alt kenarda.
`scrollContent`	`Boolean`	`true`	Sheet'in `content`'i başlığın altında bir kaydırma alanına koyup koymadığı. Kendi kayan içerik için, örneğin bir kaydırma alanının içinde duramayan bir `LazyColumn` için false yapılır. O zaman `content` başlığın altında kalan yüksekliği alır; kayması yarım açık sheet'i yine açar, başına geldikten sonra da sheet'i aşağı indirir. Bir `LazyColumn`'a `Modifier.fillMaxWidth()` verilir: liste yalnızca ekrandaki satırları kadar geniştir ve satırların yanından sürüklemek onu kaydırmazdı.
`style`	`SheetStyle?`	`null`	Bu çağrının kendi stili: çevresindeki her stili ezer, yoğunluk ona da uygulanır. Yalnızca verdiği alanlar değişir ve her platformda değişir.
`colors`	`SheetColors?`	`null`	Bu çağrının kendi renkleri. Yalnızca verdikleri değişir, gerisi temanınki kalır.
`tagKey`	`String?`	`null`	Otomasyon için dilden bağımsız bir anahtar: sheet'in etiketi `Sheet_<tagKey>`'dir ve çizildiği hâliyle sheet'in üstünde durur, yan sheet'in kapatma düğmesininki `SheetClose_<tagKey>`'dir.
`content`	`@Composable ColumnScope.() -> Unit`		Sheet'in, başlığın altındaki içeriği.

SheetStyle

PantrixSheet'in geometrisi.

Parametre	Tür	Varsayılan	Ne olduğu
`shape`	`ShapeSpec`	`ShapeSpec.Unspecified`	Uygulamaya bakan köşeler: alt kenardaki bir sheet'in üstteki iki köşesi, son kenardaki bir sheet'in baştaki iki köşesi. Pencerenin kenarındaki köşeler düzdür. Android'de ve iOS'ta büyük, masaüstünde ve web'de orta.
`maxWidth`	`Dp`	`Dp.Unspecified`	Alt kenardaki bir sheet'in en çok genişliği; daha geniş bir pencerede sheet kenarın ortasında durur.
`sideWidth`	`Dp`	`Dp.Unspecified`	Son kenardaki bir sheet'in genişliği, pencere ona o kadar yer bırakıyorsa.
`margin`	`Dp`	`Dp.Unspecified`	Sheet ile pencerenin karşı kenarı arasında açık bırakılan pay: böylece scrim orada görünmeye devam eder ve ona dokunmak sheet'i kapatır. Alt kenardaki yüksek bir sheet'in üstünde, dar bir pencerede son kenardaki bir sheet'in yanında kalır. Dokunulacak bir hedef olduğu için her platformun en küçük dokunma hedefi kadardır.
`elevation`	`Dp`	`Dp.Unspecified`	Sheet'in, scrim'in üstünde ne kadar yüksekte durduğu, yani gölgesinin ne kadar büyük olduğu. iOS'ta yoktur.
`handleWidth`	`Dp`	`Dp.Unspecified`	Alt kenardaki bir sheet'in, sürüklenebildiği sürece çizdiği tutamak.
`handleHeight`	`Dp`	`Dp.Unspecified`	Sürükleme tutamacının ne kadar kalın olduğu: ne kadar uzun olduğu `handleWidth`'tir.
`handlePadding`	`Dp`	`Dp.Unspecified`	Tutamağın üstündeki ve altındaki boşluk.

SheetColors

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

Parametre	Tür	Varsayılan	Ne olduğu
`container`	`Color`	`Color.Unspecified`	Sheet'in zemini. Temanın `surface` rengi.
`title`	`Color`	`Color.Unspecified`	Başlık. Temanın `textPrimary`'si.
`handle`	`Color`	`Color.Unspecified`	Alt kenardaki bir sheet'in tutamağı: çizildiği hâliyle, kendi alfasıyla birlikte. Temanın `textSecondary` renginin %40'ı: soluktur ve her yüzeyde görünür.
`closeIcon`	`Color`	`Color.Unspecified`	Son kenardaki bir sheet'in kapatma düğmesinin ikonu. Temanın `onSurface` rengi.
`scrim`	`Color`	`Color.Unspecified`	Sheet'in arkasında uygulamanın üstüne serilen scrim, kendi alfasıyla birlikte. Temanın `scrim` rengi.

Erişilebilirlik

Klavye ve ekran okuyucu. Klavyeyle açılınca odak ilk kontrolde başlar; dokunarak açılınca yerinde kalır. title sheet açılınca duyurulur ve içindekilerin başlığıdır. Sürükleyemeyen ekran okuyucuya, yarım açık sheet'i tam açan ve geri getiren eylemler sunulur.