メインコンテンツまでスキップ

PreviewLabGallery

PreviewLabGallery Composable​

PreviewLabGallery Composable は、プロジェクト内のすべての Preview を 一覧表示 し、選択した Preview を表示するための エントリーポイントとなるコンポーネントです。通常、一つのプロジェクトに1つあれば十分です。

PreviewLabGallery には Preview 情報のリストを渡す必要がある他、オプションで細かな設定を設定することができます。

val appPreviews by collectAllModulePreviews()

PreviewLabGallery(
    previewList = appPreviews,
)
  • previewList 引数には collectModulePreviews() / collectAllModulePreviews() で収集したプレビューリスト、または手動で設定した PreviewLabPreview のインスタンスを指定してください。

ただしいくつかのプラットフォームでは PreviewLabGallery をラップし、次セクション で説明するプラットフォームでは通常そちらを利用することが推奨されます。

プラットフォームに最適化された PreviewLabGallery​

PreviewLabGalleryWindows (Desktop)​

PreviewLabGallery をラップして Desktop 向けに最適化して表示します。

現在は 1つの Window を表示するだけですが、将来的に複数の Window が表示されるようになる可能性が高いため、Dekstop においては こちらを利用することが強く推奨 されます。

val appPreviews by collectAllModulePreviews()

fun main() {
    application {
        PreviewLabGalleryWindows(
            previewList = appPreviews,
        )
    }
}

EmbeddedPreviewOrGallery (JS, WasmJs)​

PreviewLabGallery をラップして Web 向けに最適化して表示します。

val appPreviews by collectAllModulePreviews()

fun main() {
    ComposeViewport(document.body!!) {
        EmbeddedPreviewOrGallery(
            previewList = appPreviews.toList(),
        )
    }
}

PreviewLabGallery のオプション​

PreviewLabGallery (PreviewLabGalleryWindows 等も含む) に設定できるオプションは以下の通りです。

@Composable
fun PreviewLabGallery(
    previewList: List<PreviewLabPreview>,
    modifier: Modifier = Modifier,
    state: PreviewLabGalleryState = remember { PreviewLabGalleryState() },
    openFileHandler: OpenFileHandler<out Any?>? = null,
    featuredFileList: Map<String, List<String>> = emptyMap(),
) = ...

PreviewLabGallery の KDoc もご覧ください。

previewList​

collectModulePreviews() / collectAllModulePreviews() で収集したプレビューリストを渡してください。ここに渡されたプレビューが一覧表示されます。または 自分で PreviewLabPreview のインスタンスを作成して渡すこともできます。Preview の収集については Collect Preview を参照してください。

基本例
PreviewLabGallery(
    previewList = appPreviews,
)
辞書順に並べ替える
PreviewLabGallery(
    previewList = appPreviews
        .sortedBy { it.displayName },
)
手動で構築したリストと結合する
val customizedPreviewList = listOf(
    PreviewLabPreview(
        id = "my-composable",
        displayName = "My Composable",
    ) { // @Composable () -> Unit
        PreviewLab {
            MyComposable()
        }
    },
    // ...
)
PreviewLabGallery(
    previewList = appPreviews + customizedPreviewList,
)

PreviewLabPreview については PreviewLabPreview の KDoc を参照してください。

state (option)​

PreviewLabGallery の状態は PreviewLabGalleryState に格納されています。 この state を手動で管理したい場合、 state 引数に PreviewLabGalleryState のインスタンスをします。

PreviewLabGalleryState の詳しい機能については PreviewLabGalleryState の KDoc を参照してください。

openFileHandler (option)​

OpenFileHandler を参照してください。

featuredFileList (option)​

Featured Files を参照してください。

mcpServerConfig (option, JVM only)​

MCP Server を参照してください。