Snippet

Landscape (default)

Day	Night

Square

Day	Night

Portrait

Day	Night

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Snippet with image only

All text fields are optional, which means by default BPKSnippet only has an image. If you don't specify an imageOrientation parameter it will use the Landscape type

                                                
                                                import net.skyscanner.backpack.compose.snippet.BpkSnippet
                                                import net.skyscanner.backpack.compose.snippet.ImageOrientation
                                                
                                                    BpkSnippet {
                                                        Image(
                                                            contentDescription = stringResource(R.string.snippet_image_content_description),
                                                            contentScale = ContentScale.Crop,
                                                            painter = painterResource(R.drawable.snippet_placeholder_1),
                                                        )
                                                    }

Snippet with all text fields

                                                
                                                import net.skyscanner.backpack.compose.snippet.BpkSnippet
                                                import net.skyscanner.backpack.compose.snippet.ImageOrientation
                                                
                                                    BpkSnippet(
                                                        bodyText = bodyText,
                                                        description = description,
                                                        headline = headline,
                                                        imageOrientation = imageOrientation,
                                                    ) {
                                                        Image(
                                                            contentDescription = stringResource(R.string.snippet_image_content_description),
                                                            contentScale = ContentScale.Crop,
                                                            painter = painterResource(R.drawable.snippet_placeholder_1),
                                                        )
                                                    }

Snippet with action to be performed on tap

Optionally, Snippet can also perform an action on tap, passing in the onClick closure argument:

                                                
                                                import net.skyscanner.backpack.compose.snippet.BpkSnippet
                                                import net.skyscanner.backpack.compose.snippet.ImageOrientation
                                                
                                                    BpkSnippet(
                                                        bodyText = bodyText,
                                                        description = description,
                                                        headline = headline,
                                                        imageOrientation = imageOrientation,
                                                        onClick = {}
                                                    ) {
                                                        Image(
                                                            contentDescription = stringResource(R.string.snippet_image_content_description),
                                                            contentScale = ContentScale.Crop,
                                                            painter = painterResource(R.drawable.snippet_placeholder_1),
                                                        )
                                                    }