Search Modal

AppSearchModal

Maven Central Class reference Source code

Content

Day Night
AppSearchModal component in Content state AppSearchModal component in Content state - dark mode

Loading

Day Night
AppSearchModal component in Loading state AppSearchModal component in Loading state - dark mode

Error

Day Night
AppSearchModal component in Error state AppSearchModal component in Error state - dark mode

Installation

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

Usage

Example of a AppSearchModal in Content state:


                                                
                                                import net.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModal
                                                import net.skyscanner.backpack.compose.textfield.BpkClearAction
                                                
                                                val destination = remember { mutableStateOf(inputText) }
                                                BpkAppSearchModal(
                                                    title = stringResource(id = R.string.destination),
                                                    inputText = destination.value,
                                                    inputHint = stringResource(id = R.string.text_field_hint),
                                                    results = BpkAppSearchModalResult.Content(
                                                        sections = listOf(BpkSection(...)),
                                                        shortcuts = listOf(BpkShortcut(...)),
                                                    ),
                                                    closeAccessibilityLabel = stringResource(id = R.string.navigation_close),
                                                    onClose = {/* close modal*/ },
                                                    onInputChanged = {/* update input*/ },
                                                    clearAction = BpkClearAction("Clear"){ destination.value = "" },
                                                )

Example of a AppSearchModal in Loading state:


                                                
                                                import net.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModal
                                                import net.skyscanner.backpack.compose.textfield.BpkClearAction
                                                
                                                val destination = remember { mutableStateOf(inputText) }
                                                BpkAppSearchModal(
                                                    title = stringResource(id = R.string.destination),
                                                    inputText = destination.value,
                                                    inputHint = stringResource(id = R.string.text_field_hint),
                                                    results = BpkAppSearchModalResult.Loading(accessibilityLabel = stringResource(id = R.string.content_is_loading)),
                                                    closeAccessibilityLabel = stringResource(id = R.string.navigation_close),
                                                    onClose = {/* close modal*/ },
                                                    onInputChanged = {/* update input*/ },
                                                    clearAction = BpkClearAction("Clear"){ destination.value = "" },
                                                )

Example of a AppSearchModal in Error state:


                                                
                                                import net.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModal
                                                import net.skyscanner.backpack.compose.textfield.BpkClearAction
                                                
                                                val destination = remember { mutableStateOf(inputText) }
                                                BpkAppSearchModal(
                                                    title = stringResource(id = R.string.destination),
                                                    inputText = destination.value,
                                                    inputHint = stringResource(id = R.string.text_field_hint),
                                                    results = BpkAppSearchModalResult.Error(...),
                                                    closeAccessibilityLabel = stringResource(id = R.string.navigation_close),
                                                    onClose = {/* close modal*/ },
                                                    onInputChanged = {/* update input*/ },
                                                    clearAction = BpkClearAction("Clear"){ destination.value = "" },
                                                )