UI Component and Design System

Compose Preview Lab は (Compose material 3 などを利用せずに) 独自の UI コンポーネント・デザインシステムが構築されています。 Field の UI 自作など、高度なカスタマイズの際に利用する必要があるかもしれません。このガイドでは Compose Preview Lab のデザインシステムを利用する方法を紹介します。

アーティファクト

Compose Preview Lab の デザインシステムは me.tbsten.compose.preview.lab:ui maven アーティファクトとして公開されています。 プロジェクト内で利用する場合は starter アーティファクトには含まれていないため、利用する必要があります。

Compose Multiplatform

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("me.tbsten.compose.preview.lab:ui:<compose-preview-lab-version>")
        }
    }
}

Android

dependencies {
    implementation("me.tbsten.compose.preview.lab:ui:<compose-preview-lab-version>")
}

Compose Preview Lab の UI コンポーネント一覧を確認する

Compose Preview Lab のコンポーネント・デザインシステムのギャラリーが Compose Preview Lab 自体を利用して公開されています。以下のリンクからアクセスできます。

TODO

コンポーネントごとの詳細な情報は以下のギャラリーや各コンポーネントの KDoc を参照してください。

命名規則

Compose Preview Lab の UI コンポーネントは PreviewLab~ で始まる名前で公開されています。

OptIn

基本的に全ての API が @UiComposePreviewLabApi が付与されており、OptIn が必要です。 これはカスタマイズを必要としないユーザにとってこれらはノイズであり、不用意に呼び出されることを防ぐためです。

コンポーネントレベルで OptIn する

@OptIn(UiComposePreviewLabApi::class)
class MyField(...) : PreviewLabField(...) {
    @Composable
    fun Content() {
        PreviewLabText("MyField")
    }
}

モジュールレベルで OptIn する

build.gradle.kts

kotlin {
    optIn.addAll("me.tbsten.compose.preview.lab.UiComposePreviewLabApi")
}

テーマカスタマイズ

---

Comming soon....