Accordion

İçeriği başlığının altında açılıp kapanan bölümler: uzun bir sayfa böylece parça parça okunur.

import com.pantrixui.components.container.accordion.PantrixAccordion

Üç varyant. variant bölümlerin nasıl ayrıldığını söyler: Plain aralarına bir çizgi koyar, Bordered hepsini tek bir kenarla sarar, Separated her bölümü kendi kartı yapar.
Tek ya da çok bölüm. İstenildiği kadar bölüm aynı anda açık kalır; singleExpanded ile birini açmak açık olanı kapatır.
Başlığın parçaları. Bir AccordionSection'ın başlığında title, altında subtitle, önünde icon, sonunda trailing durur. trailing başlığın düğmesinin parçasıdır ve onunla birlikte okunur: bir sayı, bir rozet; kendi başına bir denetim oraya konmaz.
Anahtarlar. Her bölümün key'i her dilde aynıdır ve bir accordion'da iki bölüm aynı anahtarı taşımaz.
Kapalı bölüm oluşturulmaz. Bir bölümün içeriği yalnızca bölüm açıkken kompoze edilir; rememberSaveable ile tuttuğu şey bölüm yeniden açıldığında yerindedir.
Devre dışı. Accordion'ın enabled'ı bütün başlıkları, bir bölümün kendi enabled'ı yalnızca onu basılamaz yapar; bölüm açık ya da kapalı, olduğu gibi kalır.
Platform. Başlık bir liste satırıdır: Android'de 56dp, iOS'ta ve web'de 44dp, masaüstünde 40dp; platformun dokunma hedefinden alçak olmaz, uzun bir başlıkla ve büyük yazıyla uzar. Köşeler kartınkilerdir.
Renk. AccordionColors dolguyu, yazının rengini ve çizgileri verir. Dolgusu olmayan varyantlar arkasındakinin üstünde durur: bir dolgunun üstünde, o dolgunun içindekilere verdiği renkle yazılır.
Otomasyon. tagKey ile accordion Accordion_<tagKey>, bir başlığı Accordion_<tagKey>.Header_<key>, açtığı içerik Accordion_<tagKey>.Content_<key> olur. Bir basış, bölümün anahtarıyla expand ya da collapse olarak bildirilir.

Örnekler

Sık sorulan sorular: aralarında çizgi

En yalın hâli, soru ve cevaplar. Açık bölümlerin anahtarları ekranın durumudur ve rememberSaveable ile tutulur; accordion onu expanded ile alır, bir başlığa basılınca yeni kümeyi onExpandedChange ile bildirir. İstenildiği kadar bölüm aynı anda açık kalır.

Varyant verilmedi: Plain, bölümlerin arasında bir çizgi ve çevrelerinde hiçbir şey. Satıra sığmayan uzun başlık alt satıra iner ve başlık onunla uzar. Son bölümün enabled'ı false: basılamaz, devre dışı yazının rengiyle yazılır ve kapalı kalır.

var open by rememberSaveable { mutableStateOf(setOf("delivery")) }
PantrixAccordion(
    sections = listOf(
        AccordionSection(key = "delivery", title = "Siparişim ne zaman gelir?") {
            PantrixText(text = "İki iş günü içinde. Öğleden önce verilen siparişler ertesi gün teslim edilir.")
        },
        AccordionSection(key = "returns", title = "Nasıl iade ederim?") {
            PantrixText(text = "Otuz gün içinde, kutusuyla birlikte. Kargo ücreti bizden.")
        },
        AccordionSection(
            key = "gift",
            title = "Hediye paketi yaptırabilir miyim, paketin içine bir not ekletebilir miyim?"
        ) { PantrixText(text = "Evet. Ödeme adımında hediye paketi seçeneğini işaretleyin.") },
        AccordionSection(key = "invoice", title = "Kurumsal fatura", subtitle = "Yakında", enabled = false) {
            PantrixText(text = "Henüz açık değil.")
        }
    ),
    expanded = open,
    onExpandedChange = { open = it },
    tagKey = "faq"
)

Tek kenarın içinde, başlığın sonunda bir sayı

AccordionVariant.Bordered bölümleri tek bir kenarın içine alır; aralarında yine bir çizgi vardır.

Başlığın önündeki icon başlığın rengiyle çizilir ve ekran okuyucu onu atlar. Başlığın sonundaki sayı trailing ile verildi: başlık ile ok arasında durur, başlığın düğmesinin parçasıdır ve ekran okuyucu onu başlıkla birlikte okur. Burada küçük yazıyla yazıldı ve ona renk verilmedi.

var open by rememberSaveable { mutableStateOf(setOf("open")) }
PantrixAccordion(
    sections = listOf(
        AccordionSection(
            key = "open",
            title = "Açık siparişler",
            icon = PantrixIcons.Folder,
            trailing = { PantrixText(text = "2", style = PantrixTheme.typography.footnote) }
        ) {
            PantrixText(text = "SIP-2026-0914 · Yolda")
            PantrixText(text = "SIP-2026-0921 · Hazırlanıyor")
        },
        AccordionSection(
            key = "past",
            title = "Geçmiş siparişler",
            icon = PantrixIcons.Calendar,
            trailing = { PantrixText(text = "14", style = PantrixTheme.typography.footnote) }
        ) { PantrixText(text = "Son sipariş: 12 Eylül") }
    ),
    expanded = open,
    onExpandedChange = { open = it },
    variant = AccordionVariant.Bordered,
    tagKey = "orders"
)

Her bölüm bir kart, aynı anda yalnızca biri açık

AccordionVariant.Separated her bölümü kendi kartı yapar, aralarında bir boşlukla. singleExpanded ile aynı anda yalnızca bir bölüm açık kalır: birini açmak açık olanı kapatır. İki açık bölümün gerisini ekranın dışına ittiği sayfalar içindir.

subtitle başlığın altındaki ikinci satırdır ve bölümün özetini söyler: anahtarları değiştir, "Bildirimler"in alt satırı "Açık" ile "Kapalı" arasında değişir.

var open by rememberSaveable { mutableStateOf(setOf("notifications")) }
var email by rememberSaveable { mutableStateOf(true) }
var push by rememberSaveable { mutableStateOf(false) }
PantrixAccordion(
    sections = listOf(
        AccordionSection(
            key = "notifications",
            title = "Bildirimler",
            subtitle = if (email || push) "Açık" else "Kapalı",
            icon = PantrixIcons.Star
        ) {
            PantrixSwitchButton(
                checked = email,
                onCheckedChange = { email = it },
                label = "E-posta",
                tagKey = "email"
            )
            PantrixSwitchButton(checked = push, onCheckedChange = { push = it }, label = "Anlık", tagKey = "push")
        },
        AccordionSection(
            key = "account",
            title = "Hesap",
            subtitle = "ada@pantrix.io",
            icon = PantrixIcons.Person
        ) { PantrixText(text = "Üyelik: 2024'ten beri") }
    ),
    expanded = open,
    onExpandedChange = { open = it },
    variant = AccordionVariant.Separated,
    singleExpanded = true,
    tagKey = "settings"
)

Kapanan bölüm yazılanı saklar

Kapalı bir bölümün içeriği hiç oluşturulmaz; ama bölüm, geri yüklenmek üzere saklanan her şeyi kapalıyken de tutar. Alan metnini rememberTextFieldState() ile tutar ve bu durum saklanır.

"Teslimat notu" bölümüne bir şey yaz, bölümü kapat ve yeniden aç: bölüm kapanınca alan ekrandan kalkar, yeniden açılınca yazdığın yerindedir.

var open by rememberSaveable { mutableStateOf(setOf("note")) }
PantrixAccordion(
    sections = listOf(
        AccordionSection(key = "note", title = "Teslimat notu") {
            PantrixTextField(
                state = rememberTextFieldState(),
                modifier = Modifier.fillMaxWidth(),
                label = "Kurye notu",
                placeholder = "Zil çalışmıyor, kapıyı çalın",
                tagKey = "accordion_note"
            )
        },
        AccordionSection(key = "address", title = "Teslimat adresi") {
            PantrixText(text = "Pantrix A.Ş., Maslak, İstanbul")
        }
    ),
    expanded = open,
    onExpandedChange = { open = it },
    variant = AccordionVariant.Bordered,
    tagKey = "remembers"
)

Dışarıdan açıp kapamak

Açık bölümler ekranın durumu olduğu için accordion'ın dışından da değişir. Üstteki iki düğme başlıklara basmaz, yalnızca kümeyi değiştirir: biri bütün anahtarları koyar, öteki kümeyi boşaltır. Accordion yeni kümeyi çizer.

var open by rememberSaveable { mutableStateOf(emptySet<String>()) }
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixButton(
        text = "Hepsini aç",
        onClick = { open = setOf("monday", "tuesday", "wednesday") },
        variant = ButtonVariant.Outline,
        size = ButtonSize.Small,
        tagKey = "accordion_open_all"
    )
    PantrixButton(
        text = "Hepsini kapat",
        onClick = { open = emptySet() },
        variant = ButtonVariant.Text,
        size = ButtonSize.Small,
        tagKey = "accordion_close_all"
    )
}
PantrixAccordion(
    sections = listOf(
        AccordionSection(key = "monday", title = "Pazartesi") { PantrixText(text = "09.00 Haftalık plan") },
        AccordionSection(key = "tuesday", title = "Salı") { PantrixText(text = "14.00 Tasarım değerlendirmesi") },
        AccordionSection(key = "wednesday", title = "Çarşamba") { PantrixText(text = "Toplantı yok") }
    ),
    expanded = open,
    onExpandedChange = { open = it },
    variant = AccordionVariant.Bordered,
    tagKey = "week"
)

Tümü devre dışı

enabled = false bütün başlıkları basılamaz yapar ve her bölümü olduğu gibi tutar: açık olan açık, kapalı olan kapalı kalır. Başlıklar devre dışı yazının rengiyle yazılır. Tek bir bölüm için aynısını bölümün kendi enabled'ı yapar.

PantrixAccordion(
    sections = listOf(
        AccordionSection(key = "summary", title = "Sipariş özeti", subtitle = "Onaylandı") {
            PantrixText(text = "Sipariş onaylandı; artık değiştirilemez.")
        },
        AccordionSection(key = "payment", title = "Ödeme") { PantrixText(text = "Kart ile ödendi") }
    ),
    expanded = setOf("summary"),
    onExpandedChange = {},
    variant = AccordionVariant.Bordered,
    enabled = false,
    tagKey = "locked"
)

Kendi renkleriyle

colors accordion'a temanın değil, verilen renkleri verir: burada temada olmayan bir renkte kartlar. Dolgu container ile verilir; başlıklar ve içerik content rengini alır, çizgi ayrıca divider ile verilir. Verilmeyen renk temanınki kalır.

val own = ownColors()
var open by rememberSaveable { mutableStateOf(setOf("plan")) }
PantrixAccordion(
    sections = listOf(
        AccordionSection(key = "plan", title = "Plan", subtitle = "Takım") {
            PantrixText(text = "On kullanıcıya kadar, aylık faturalandırılır.")
        },
        AccordionSection(key = "usage", title = "Kullanım") { PantrixText(text = "Bu ay 48,2 milyon istek") }
    ),
    expanded = open,
    onExpandedChange = { open = it },
    variant = AccordionVariant.Separated,
    colors = AccordionColors(container = own.container, content = own.onContainer, divider = own.color),
    tagKey = "own"
)

Bir dolgunun üstünde

Plain ve Bordered varyantların kendi dolgusu yoktur: arkalarındakinin üstünde dururlar. Burada accordion bir rolün dolgusuyla boyanmış bir yüzeyin içinde ve renk verilmedi: başlıklar, alt satır ve ok o dolgunun içindekilere verdiği renkle yazılır, çizgiler de o rengin bir payıyla çizilir. Temanın çizgisi bu dolguda okunmazdı.

var open by rememberSaveable { mutableStateOf(setOf("shipping")) }
PantrixSurface(modifier = Modifier.fillMaxWidth(), color = PantrixTheme.colors.primary.container) {
    PantrixAccordion(
        sections = listOf(
            AccordionSection(key = "shipping", title = "Kargo", subtitle = "Ücretsiz", icon = PantrixIcons.Inbox) {
                PantrixText(text = "Yarın öğleden önce yola çıkar.")
            },
            AccordionSection(key = "warranty", title = "Garanti") { PantrixText(text = "İki yıl") }
        ),
        expanded = open,
        onExpandedChange = { open = it },
        modifier = Modifier.padding(PantrixTheme.spacing.sm),
        tagKey = "on_a_fill"
    )
}

Kendi stiliyle

style accordion'ın geometrisini değiştirir; yalnızca verilen alanlar değişir, gerisi platformun stilinden gelir. Burada başlığın en az yüksekliği 64dp, kartların arası 16dp verildi; köşeler markanın şekil ölçeğinden bir basamak değil, sabit 20dp: ShapeSpec.Fixed.

var open by rememberSaveable { mutableStateOf(setOf("first")) }
PantrixAccordion(
    sections = listOf(
        AccordionSection(key = "first", title = "Birinci adım") { PantrixText(text = "Hesabını oluştur.") },
        AccordionSection(key = "second", title = "İkinci adım") { PantrixText(text = "E-postanı doğrula.") }
    ),
    expanded = open,
    onExpandedChange = { open = it },
    variant = AccordionVariant.Separated,
    style = AccordionStyle(
        shape = ShapeSpec.Fixed(RoundedCornerShape(20.dp)),
        headerMinHeight = 64.dp,
        sectionGap = 16.dp
    ),
    tagKey = "own_style"
)

API

sections

İçeriği başlığının altında açılıp kapanan bölümler: uzun bir sayfa böylece parça parça okunur.

Parametre	Tür	Varsayılan	Ne olduğu
`sections`	`List<AccordionSection>`		Bölümler, gösterildikleri sırayla. İki bölüm aynı anahtarı taşımaz.
`expanded`	`Set<String>`		Açık bölümlerin anahtarları.
`onExpandedChange`	`(Set<String>) -> Unit`		Bir başlığa basıldığında, bundan sonra açık olması gereken bölümlerin anahtarlarıyla çağrılır. Accordion kendiliğinden hiçbir şeyi değiştirmez.
`modifier`	`Modifier`	`Modifier`	Accordion'ın modifier'ı. Accordion kendisine verilen yer kadar geniştir; yüksekliği başlıkları ile açık bölümlerin içeriği kadardır.
`variant`	`AccordionVariant`	`AccordionVariant.Plain`	Bölümlerin nasıl ayrıldığı: aralarında bir çizgiyle, hepsinin çevresinde tek bir kenarla ya da her biri kendi kartı olarak.
`singleExpanded`	`Boolean`	`false`	Bir bölümü açmanın açık olanı kapatıp kapatmayacağı: iki açık bölümün gerisini ekranın dışına iteceği sayfalar içindir.
`enabled`	`Boolean`	`true`	Başlıklara basılıp basılamayacağı. Değeri false ise her bölüm olduğu gibi kalır; tek bir bölüm aynı şeyi yalnızca kendisi için söyler.
`style`	`AccordionStyle?`	`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`	`AccordionColors?`	`null`	Bu accordion'ın, temadan gelmeyen kendi renkleri: burada verilenler kullanılır, gerisi temanınki kalır.
`tagKey`	`String?`	`null`	Accordion'ın otomasyon anahtarı: accordion `Accordion_<tagKey>`, içindeki bir başlık `Accordion_<tagKey>.Header_<key>`, o başlığın açtığı içerik `Accordion_<tagKey>.Content_<key>` olarak etiketlenir. Bir basış `Accordion` olayı olarak bildirilir: `expand` ya da `collapse`, bölümün anahtarıyla.

AccordionStyle

PantrixAccordion'ın geometrisi: bir bölümün başlığındaki ve başlığın açtığı içeriğin çevresindeki boşluklar, bir de kenar.

Parametre	Tür	Varsayılan	Ne olduğu
`shape`	`ShapeSpec`	`ShapeSpec.Unspecified`	`AccordionVariant.Bordered`'da hepsinin çevresindeki kenarın, `AccordionVariant.Separated`'da her bölümün çevresindeki kenarın köşeleri: markanın şekil ölçeğinden bir basamak ya da sabit bir şekil.
`headerMinHeight`	`Dp`	`Dp.Unspecified`	Bir başlığın en az yüksekliği. İki satır tutan bir başlık metni, bir alt satır ya da daha büyük yazı başlığı uzatır; alt sınırı platformun dokunma hedefidir.
`horizontalPadding`	`Dp`	`Dp.Unspecified`	Bir başlığın yan kenarları ile içindekiler arasındaki boşluk.
`verticalPadding`	`Dp`	`Dp.Unspecified`	Satırları en az yüksekliğe sığmayan bir başlıkta, satırların üstündeki ve altındaki boşluk.
`contentPadding`	`Dp`	`Dp.Unspecified`	Açık bir bölümün içeriğinin yanlarındaki ve altındaki boşluk.
`iconGap`	`Dp`	`Dp.Unspecified`	Bir başlığın ikonu, metni, sonunda duranı ve oku arasındaki aralık.
`iconSize`	`Dp`	`Dp.Unspecified`	Bir başlığın ikonunun ve okunun genişliği ve yüksekliği.
`borderWidth`	`Dp`	`Dp.Unspecified`	Bölümlerin arasındaki çizgilerin ve kenarların kalınlığı. Sıfır verilirse hiçbiri çizilmez.
`sectionGap`	`Dp`	`Dp.Unspecified`	`AccordionVariant.Separated`'da bir bölüm ile sonraki arasındaki boşluk.

AccordionColors

Temanın renklerini almayan bir PantrixAccordion'ın boyandığı renkler: verilen renk kullanılır, verilmeyen temanınki kalır.

Parametre	Tür	Varsayılan	Ne olduğu
`container`	`Color`	`Color.Unspecified`	Bölümlerin arkasındaki dolgu. `AccordionVariant.Plain` ve `AccordionVariant.Bordered`'da yoktur: ikisi de arkalarındakinin üstünde durur. `AccordionVariant.Separated`'ın her bölümünün altında temanın `surface`'ıdır.
`content`	`Color`	`Color.Unspecified`	Bir başlığın metni ve ikonu, bir de bölümün gösterdiklerinden kendi rengini vermeyenler. Temanın `textPrimary`'sidir; accordion kendi dolgusu olmayan bir dolgunun üstündeyse, o dolgunun üstünde duranlara verdiği renktir. Alt satır ve ok, temanın kendi zeminlerinde temanın `textSecondary`'sidir; başka yerde ve bu renk verildiğinde bu renktedir.
`divider`	`Color`	`Color.Unspecified`	Bölümlerin arasındaki çizgiler ve kenarlar. Temanın kendi zeminlerinde temanın `divider`'ıdır. Bir dolgunun üstünde, o çizginin okunmayacağı yerde, `content`'in bir payıdır: Subtle düğmenin kenarı gibi.

Erişilebilirlik

Ekran okuyucu. Başlık bir düğmedir ve bölümünün adını taşıyan bir başlıktır. Ekran okuyucuya basışın ne yapacağı sunulur, bölümü genişletmek ya da daraltmak, ve bölümün açık olup olmadığı söylenir. Ok bunun resmidir, okunmaz.