Places preview card customization
You can customize the places preview by providing your own UI written in Jetpack Compose.
Customization Process
The DashNavigationFragment provides the setPlacesPreview function, allowing you to define custom content for the places list preview. This function accepts a PlacesListUiComposer, which is a composable function with two parameters: modifier and state. The modifier is an instance of Modifier, used for layout configurations. The state is an instance of PlacesListUiState, containing all the necessary information to render the places list preview.
PlacesListUiState
The PlacesListUiState class provides the UI state for rendering a list of places. It includes the following parameters:
- title: The title of the places list, wrapped in
DataState<String>. - items: The list of items, wrapped in
DataState<List<DashSearchResult>>. - itemSelected: A callback triggered when an item is selected, passing the index of the selected item.
- backCloseButtonState: The state of the back or close button, which controls its visibility and functionality.
Example Usage
To set a custom places preview:
fragment.setPlacesPreview { state, modifier ->
CustomPlacesPreview(state, modifier)
}
The CustomPlacesPreview composable handles rendering the list of places based on the provided PlacesListUiState.
You can restore the default places preview implementation at any point during runtime:
fragment.setPlacesPreview { state, modifier ->
DefaultPlacesPreview(state, modifier)
}
For real-world examples of customizing the places preview, visit our GitHub repository.