Showcase Scaffold

Uygulamanın kabuğunun dışında duran bir ekran: giriş, kayıt, şifre sıfırlama, bir davet, bir karşılama, bulunamayan bir sayfa. Bir yanda vitrin durur, bir resim, bir söz ya da slaytlar; öbür yanda form. Dar bir yerde yalnızca form kalır.

import com.pantrixui.components.container.showcase.PantrixShowcaseScaffold

• Vitrin. showcase scaffold showcaseFrom kadar genişleyince formun yanında durur, varsayılanı Expanded; showcaseSide hangi yanda duracağını söyler. Daha dar bir yerde hiç kurulmaz: slaytları dönmez, resimleri yüklenmez. Scaffold pencereye değil kendi genişliğine bakar.
• Vitrinin zemini. showcaseBackground vitrini kenarlarına kadar doldurur, bir resim ya da bir renk geçişi, sistem çubuklarının altına kadar; showcase'in tuttukları onlardan kaçınır. scrim zemini, üstündeki yazı okunsun diye koyulaştırır. Vitrin kendi renkleriyle çizilir (ShowcaseScaffoldColors).
• Form. content formdur, tarafının ortasında ve stilin form genişliğinden geniş değil. header üstünde durur, bir başlık; footer altında, bir kayıt yolu. formLayout üçünü tarafın yüksekliğinin ortasında bir arada ya da ayrı tutar: başlık yukarıda, alt kısım dipte.
• Bar'lar. topBar form tarafının üstünde boydan boya bir satırdır, başında logo, sonunda dil; bottomBar dibinde bir satır, bir telif satırı. Form aralarında kaydıkça yerlerinde kalırlar. Vitrin gösterilmediğinde her bar'ı formdan bir çizgi ayırır; içi boş bir bar yer kaplamaz. Hepsi vitrinin gösterilip gösterilmediğini bilir (showcaseShown): vitrinin geniş pencerede taşıdığı logo dar pencerede üst bar'ın başına geçer.
• Çerçeve. ShowcaseFrame.Adaptive ile Large'dan itibaren scaffold, backdrop'un ortasında bir karttır; vitrinsiz bir kart formun genişliğinde ve tuttukları kadar uzundur. Daha dar pencerede ve ShowcaseFrame.Edge ile her genişlikte pencerenin kenarlarına uzanır.
• Katlanabilir. Dikey bir katlanma yerinde vitrin bir yarıda, form öbür yarıdadır; ikisi katlanma yerinde buluşur. Yatay bir katlanma yerinde yalnızca form kalır.
• Hatırladıkları. Form da vitrin de düzen ne olursa olsun tek bir yerde kurulur: bir alana yazılan, bir slaytın yeri, telefon yan çevrilince ya da pencere karta dönecek kadar genişleyince yerinde kalır. Pencere seçicide bir alana yaz ve "Dar"dan "Geniş"e geç.

Örnekler

Bir yönetim panelinin girişi

Bir yönetim panelinin giriş ekranı. Vitrin lacivert ve kenardan kenaradır (frame = ShowcaseFrame.Edge): üstte logo, ortada bir müşterinin sözü, altta sayılar ve telif satırı. Form tarafının üst bar'ının sonunda dil menüsü durur (topBar); seçili dilin yanında bir işaret vardır (PantrixMenuItem'ın selected'ı). Pencere seçicide "Kısa"ya ya da "Geniş"e geç: vitrin formun yanına gelir. "Dar"da vitrin gider; logo üst bar'ın başına, telif satırı alt bar'a (bottomBar) geçer, ikisi de vitrinin gösterilip gösterilmediğine bakar (showcaseShown), ve her bar'ı formdan bir çizgi ayırır. "Giriş yap" iki alan da dolunca açılır.

ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        showcase = { AdminShowcase() },
        title = "Giriş",
        topBar = {
            if (!showcaseShown) Logo()
            Spacer(Modifier.weight(1f))
            LanguageMenu()
        },
        footer = { SignUpInstead() },
        bottomBar = { if (!showcaseShown) Copyright(inABar = true) },
        frame = ShowcaseFrame.Edge,
        // Örnek bir pencere değil, sayfanın içinde bir kutudur: sistem çubuklarının payı uygulamanındır.
        windowInsets = WindowInsets(0),
        colors = ShowcaseScaffoldColors(showcase = NAVY, showcaseContent = Color.White),
        tagKey = "admin_sign_in"
    ) {
        SignInForm()
    }
}

@Composable
private fun AdminShowcase() {
    Column(modifier = Modifier.fillMaxSize()) {
        Logo()
        Spacer(Modifier.weight(1f))
        PantrixText(
            text = "“Pantrix, mobil kullanıcılarımızı anlama biçimimizi değiştirdi. Edindiğimiz içgörüler, üç ayda " +
                "elde tutmayı yüzde 40 artırmamızı sağladı.”",
            style = PantrixTheme.typography.title.copy(fontStyle = FontStyle.Italic)
        )
        PantrixText(text = "— Ürün müdürü, bir oyun stüdyosu", modifier = Modifier.padding(top = 12.dp))
        Spacer(Modifier.weight(1f))
        Row(horizontalArrangement = Arrangement.spacedBy(32.dp)) {
            Figure(value = "10M+", label = "İzlenen olay")
            Figure(value = "500+", label = "Etkin proje")
            // Bir yüzdenin yazılışı dile göre değişir; içinde harf olmadığı için çeviri dosyası onu bilmez.
            Figure(value = said(tr = "%99,9", en = "99.9%"), label = "Çalışma süresi")
        }
        Copyright(modifier = Modifier.padding(top = 24.dp))
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun Copyright(
    modifier: Modifier = Modifier,
    inABar: Boolean = false
) {
    PantrixText(
        text = "© 2026 Pantrix. Tüm hakları saklıdır. by @developersancho.",
        modifier = modifier,
        style = PantrixTheme.typography.footnote,
        color = if (inABar) PantrixTheme.colors.textSecondary else Color.Unspecified,
        textAlign = if (inABar) TextAlign.Center else null
    )
}

@Composable
private fun LanguageMenu() {
    var open by remember { mutableStateOf(false) }
    var language by rememberSaveable { mutableStateOf("tr") }
    PantrixMenu(
        visible = open,
        onDismissRequest = { open = false },
        anchor = {
            PantrixIconButton(
                imageVector = DemoIcons.Globe,
                contentDescription = "Dil",
                onClick = { open = true },
                tagKey = "language"
            )
        },
        alignment = PopoverAlignment.End,
        tagKey = "language"
    ) {
        PantrixMenuItem(text = "Türkçe", onClick = { language = "tr" }, tagKey = "tr", selected = language == "tr")
        PantrixMenuItem(text = "English", onClick = { language = "en" }, tagKey = "en", selected = language == "en")
    }
}

@Composable
private fun ColumnScope.SignInForm() {
    val report = LocalExampleEvents.current
    val email = rememberTextFieldState()
    val password = rememberTextFieldState()
    var keep by rememberSaveable { mutableStateOf(false) }
    Heading(title = "Tekrar hoş geldin", line = "Devam etmek için hesabına giriş yap")
    Spacer(Modifier.height(24.dp))
    PantrixTextField(
        state = email,
        modifier = Modifier.fillMaxWidth(),
        label = "E-posta",
        placeholder = "ad@ornek.com",
        leadingIcon = { PantrixIcon(DemoIcons.Mail, contentDescription = null) },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
        tagKey = "email"
    )
    Spacer(Modifier.height(16.dp))
    PantrixSecureTextField(
        state = password,
        modifier = Modifier.fillMaxWidth(),
        label = "Şifre",
        leadingIcon = { PantrixIcon(DemoIcons.Lock, contentDescription = null) },
        tagKey = "password"
    )
    PantrixLink(
        text = "Şifreni mi unuttun?",
        onClick = { report("Şifre sıfırlama istendi") },
        modifier = Modifier.align(Alignment.End).padding(vertical = 12.dp),
        tagKey = "forgot"
    )
    PantrixCheckbox(checked = keep, onCheckedChange = { keep = it }, label = "Beni hatırla", tagKey = "remember")
    Spacer(Modifier.height(16.dp))
    PantrixButton(
        text = "Giriş yap",
        onClick = { report("Giriş yapıldı: ${email.text}") },
        enabled = email.text.isNotEmpty() && password.text.isNotEmpty(),
        fullWidth = true,
        shape = PantrixTheme.shapes.full,
        tagKey = "sign_in"
    )
}

@Composable
private fun SignUpInstead() {
    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        PantrixHorizontalDivider(label = "HESABIN YOK MU?")
        PantrixButton(
            text = "Kaydol",
            onClick = {},
            variant = ButtonVariant.Outline,
            fullWidth = true,
            shape = PantrixTheme.shapes.full,
            tagKey = "sign_up"
        )
    }
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

private val NAVY = Color(0xFF131F4B)

@Composable
private fun Figure(
    value: String,
    label: String
) {
    Column {
        PantrixText(text = value, style = PantrixTheme.typography.headline)
        PantrixText(text = label, style = PantrixTheme.typography.footnote)
    }
}

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

Slaytlı bir giriş

Vitrinde dönen slaytlar (PantrixCarousel): her biri bir başlık ve bir cümle. showcaseFrom = WindowWidthClass.Medium ile vitrin 600 dp'den itibaren görünür, "Orta"da da. "Kitap"ta vitrin bir yarıda, form öbür yarıdadır ve katlanma yerinde buluşurlar; "Masa"da yalnızca form kalır. "Dar"da vitrin hiç kurulmaz: slaytları dönmez.

ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        showcase = { Highlights() },
        title = "Giriş",
        header = { Logo() },
        showcaseFrom = WindowWidthClass.Medium,
        windowInsets = WindowInsets(0),
        tagKey = "slides_sign_in"
    ) {
        ShortSignIn()
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun Highlights() {
    var page by rememberSaveable { mutableIntStateOf(0) }
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        PantrixCarousel(
            pageCount = HIGHLIGHTS.size,
            currentPage = page,
            onPageChange = { page = it },
            loop = true,
            autoAdvanceMillis = 5000,
            contentDescription = "Öne çıkanlar",
            tagKey = "highlights"
        ) { index ->
            val (title, line) = HIGHLIGHTS[index]
            Column(modifier = Modifier.fillMaxWidth().padding(24.dp)) {
                PantrixText(text = title, style = PantrixTheme.typography.headline)
                PantrixText(text = line, modifier = Modifier.padding(top = 8.dp))
            }
        }
    }
}

@Composable
private fun ColumnScope.ShortSignIn() {
    val email = rememberTextFieldState()
    val password = rememberTextFieldState()
    Heading(title = "Giriş yap", line = "Ekibin seni bekliyor")
    Spacer(Modifier.height(24.dp))
    PantrixTextField(state = email, modifier = Modifier.fillMaxWidth(), label = "E-posta", tagKey = "email")
    Spacer(Modifier.height(16.dp))
    PantrixSecureTextField(state = password, modifier = Modifier.fillMaxWidth(), label = "Şifre", tagKey = "password")
    Spacer(Modifier.height(24.dp))
    PantrixButton(text = "Giriş yap", onClick = {}, fullWidth = true, tagKey = "sign_in")
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

private val HIGHLIGHTS = listOf(
    "Her platformda bir tasarım" to "Android, iOS, masaüstü ve web aynı bileşenlerle çizilir.",
    "Pencereye göre düzen" to "Ekranlar dar pencerede sadeleşir, genişledikçe açılır.",
    "Erişilebilir, baştan" to "Ekran okuyucu, klavye ve kontrast her bileşenin içinde."
)

Bir resmin üstünde kayıt

Bir resmin üstünde kayıt. Resmin yerinde bir renk geçişi durur: vitrinin zemini (showcaseBackground) ve kartın arkası (backdrop). Vitrin sondadır (showcaseSide = ShowcaseSide.End); scrim = ShowcaseScrim.Bottom altındaki yazı okunsun diye zemini aşağıya doğru koyulaştırır. Vitrin kartın içinde kendi köşeleriyle durur (showcaseInset). "Geniş"te düzen bir karttır, ShowcaseFrame.Adaptive onu Large'dan itibaren öyle çizer; "Kısa"da kenardan kenaradır.

val picture = remember { Brush.linearGradient(SUNSET) }
ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        showcase = { PictureCaption() },
        showcaseBackground = { Box(Modifier.fillMaxSize().background(picture)) },
        title = "Kaydol",
        header = { Logo() },
        footer = { SignInInstead() },
        backdrop = { Box(Modifier.fillMaxSize().background(picture)) },
        showcaseSide = ShowcaseSide.End,
        scrim = ShowcaseScrim.Bottom,
        windowInsets = WindowInsets(0),
        colors = ShowcaseScaffoldColors(showcaseContent = Color.White),
        style = ShowcaseScaffoldStyle(showcaseInset = 12.dp),
        tagKey = "sign_up"
    ) {
        SignUpForm()
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun ColumnScope.SignInInstead() {
    PantrixLink(
        text = "Hesabın var mı? Giriş yap",
        onClick = {},
        modifier = Modifier.align(Alignment.CenterHorizontally),
        tagKey = "sign_in_instead"
    )
}

@Composable
private fun PictureCaption() {
    Column(modifier = Modifier.fillMaxSize()) {
        Spacer(Modifier.weight(1f))
        PantrixText(text = "Ekibini bir araya getir", style = PantrixTheme.typography.headline)
        PantrixText(text = "Ürünün, verin ve ekibin tek bir yerde.", modifier = Modifier.padding(top = 8.dp))
    }
}

@Composable
private fun ColumnScope.SignUpForm() {
    val name = rememberTextFieldState()
    val email = rememberTextFieldState()
    val password = rememberTextFieldState()
    Heading(title = "Hesap oluştur", line = "Birkaç adımda başla")
    Spacer(Modifier.height(24.dp))
    PantrixTextField(state = name, modifier = Modifier.fillMaxWidth(), label = "Ad", tagKey = "name")
    Spacer(Modifier.height(16.dp))
    PantrixTextField(state = email, modifier = Modifier.fillMaxWidth(), label = "E-posta", tagKey = "email")
    Spacer(Modifier.height(16.dp))
    PantrixSecureTextField(state = password, modifier = Modifier.fillMaxWidth(), label = "Şifre", tagKey = "password")
    Spacer(Modifier.height(24.dp))
    PantrixButton(text = "Kaydol", onClick = {}, fullWidth = true, tagKey = "sign_up")
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

private val SUNSET = listOf(Color(0xFFF59E0B), Color(0xFFDB2777), Color(0xFF4C1D95))

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

Şifre sıfırlama

Vitrinsiz bir ekran: yalnızca form. "Geniş"te form kendi genişliğinde bir karttır, zeminin ortasında; daha dar pencerede kenardan kenaradır. footer girişe dönmenin yoludur.

ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        title = "Şifre sıfırlama",
        header = { Logo() },
        footer = {
            PantrixLink(
                text = "Girişe dön",
                onClick = {},
                modifier = Modifier.align(Alignment.CenterHorizontally),
                tagKey = "back_to_sign_in"
            )
        },
        windowInsets = WindowInsets(0),
        tagKey = "reset"
    ) {
        ResetForm()
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun ColumnScope.ResetForm() {
    val email = rememberTextFieldState()
    var sent by rememberSaveable { mutableStateOf(false) }
    Heading(title = "Şifreni sıfırla", line = "E-posta adresine bir bağlantı gönderelim")
    Spacer(Modifier.height(24.dp))
    PantrixTextField(state = email, modifier = Modifier.fillMaxWidth(), label = "E-posta", tagKey = "email")
    Spacer(Modifier.height(24.dp))
    PantrixButton(
        text = if (sent) "Bağlantı gönderildi" else "Bağlantıyı gönder",
        onClick = { sent = true },
        enabled = email.text.isNotEmpty() && !sent,
        fullWidth = true,
        tagKey = "send"
    )
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

Bulunamayan bir sayfa

Bulunamayan bir sayfa, formLayout = ShowcaseFormLayout.Spread ile: logo yukarıda, söz tarafın ortasında, yardım bağlantısı altında ve telif satırı alt bar'da (bottomBar). Vitrin temanın nötr renginde büyük bir "404"tür: verilen renk temanınsa, üstündeki yazının rengi de onunla gelir.

ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        showcase = {
            PantrixText(
                text = "404",
                modifier = Modifier.align(Alignment.Center),
                style = PantrixTheme.typography.display
            )
        },
        title = "Sayfa bulunamadı",
        header = { Logo() },
        footer = { PantrixLink(text = "Yardım merkezi", onClick = {}, tagKey = "help") },
        bottomBar = { Copyright(inABar = true) },
        formLayout = ShowcaseFormLayout.Spread,
        windowInsets = WindowInsets(0),
        colors = ShowcaseScaffoldColors(showcase = PantrixTheme.colors.neutral.container),
        tagKey = "not_found"
    ) {
        PantrixText(
            text = "Aradığın sayfa yok",
            style = PantrixTheme.typography.headline,
            role = TextRole.Heading(level = 1)
        )
        PantrixText(
            text = "Adres yanlış yazılmış ya da sayfa taşınmış olabilir.",
            color = PantrixTheme.colors.textSecondary
        )
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun Copyright(
    modifier: Modifier = Modifier,
    inABar: Boolean = false
) {
    PantrixText(
        text = "© 2026 Pantrix. Tüm hakları saklıdır. by @developersancho.",
        modifier = modifier,
        style = PantrixTheme.typography.footnote,
        color = if (inABar) PantrixTheme.colors.textSecondary else Color.Unspecified,
        textAlign = if (inABar) TextAlign.Center else null
    )
}

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

API

modifier

Uygulamanın kabuğunun dışında duran bir ekran: giriş, kayıt, şifre sıfırlama, bir davet, bir karşılama, bulunamayan bir sayfa. Bir yanda vitrin durur, bir resim, bir söz ya da slaytlar; öbür yanda form. Dar bir yerde yalnızca form kalır.

ShowcaseScaffoldStyle

PantrixShowcaseScaffold'un geometrisi: yerin vitrinle form arasında nasıl paylaşıldığı, formun ne kadar geniş olduğu, her tarafın içindeki boşluklar ve geniş pencerede durduğu kart.

ShowcaseScaffoldColors

PantrixShowcaseScaffold'un boyandığı renkler: verilen bir renk kullanılır, verilmeyen temanınkidir.

Erişilebilirlik

• Paylar ve klavye. Scaffold kabuğun dışında durduğu için sistem çubuklarından ve ekranın kesiğinden kendisi kaçınır (windowInsets). Yalnızca form tarafı kayar; klavyenin üstünde biter, odak alan alan görünür kalır.
• Pencerenin başlığı, ekran okuyucu, olay ve etiketler. title çizilmez: pencerenin ve sekmenin adıdır, ekran okuyucuya ekranın adıdır. Form, vitrin nerede durursa dursun önce okunur ve odak önce ona gelir. tagKey verilen ekran her açılışında bir show olayı bildirir; içine konanlar TestScope(tagKey) içindedir.