Skip to content

Showkase

akshay-at-yml edited this page Aug 25, 2022 · 11 revisions

Quick Setup

1. Add the dependency to the module which has a number of UI components

implementation "com.airbnb.android:showkase:1.0.0-beta14"
kapt "com.airbnb.android:showkase-processor:1.0.0-beta14"

2. Define the same module as ShowkaseRootModule
Each module can have only one Showkase root annotation.

@ShowkaseRoot
class MyRootModule: ShowkaseRootModule

3. Now provide @Previews for each of the composables you want to view in the Showkase Browser.
Showkase also has @ShowkaseComposable, which also can be used instead of @Preview.
Use group and name parameters of @Preview or @ShowkaseComposable for proper categorization of UI elements in the Showkase Browser
Eg :

@Preview(
    name = "filled",
    group = "card"
)
@Composable
fun CardFilled() {
    HealthCareTheme {
        HCard(
            title = "Here is the title",
            description = "this is description \nSecond line continued... Some text\nThird Line",
            tags = listOf("Blog", "Reports")
        )
    }
}
Clone this wiki locally