Snippet

Landscape (default)

Square

Portrait

Installation

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

Usage

• AccessibilityHeaderTagEnabled: Used to disable Heading() accessibility tag - Optional, true by default.

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(
                                                        headline = headline,
                                                        subHeading = subHeading,
                                                        bodyText = bodyText,
                                                        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(
                                                        description = description,
                                                        subHeading = subHeading,
                                                        bodyText = bodyText,
                                                        imageOrientation = imageOrientation,
                                                        onClick = {}
                                                    ) {
                                                        Image(
                                                            contentDescription = stringResource(R.string.snippet_image_content_description),
                                                            contentScale = ContentScale.Crop,
                                                            painter = painterResource(R.drawable.snippet_placeholder_1),
                                                        )
                                                    }