DockedSearchBar

Functions summary

Unit
@ExperimentalMaterial3Api
@Composable
DockedSearchBar(
    inputField: @Composable () -> Unit,
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    modifier: Modifier,
    shape: Shape,
    colors: SearchBarColors,
    tonalElevation: Dp,
    shadowElevation: Dp,
    content: @Composable ColumnScope.() -> Unit
)

Material Design search
Cmn
Unit
@ExperimentalMaterial3Api
@Composable
DockedSearchBar(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    active: Boolean,
    onActiveChange: (Boolean) -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    placeholder: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: Shape,
    colors: SearchBarColors,
    tonalElevation: Dp,
    shadowElevation: Dp,
    interactionSource: MutableInteractionSource?,
    content: @Composable ColumnScope.() -> Unit
)

This function is deprecated. Use overload which takes inputField as a parameter
Cmn

Functions

DockedSearchBar

Cmn 
@ExperimentalMaterial3Api
@Composable
fun DockedSearchBar(
    inputField: @Composable () -> Unit,
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = SearchBarDefaults.dockedShape,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
    content: @Composable ColumnScope.() -> Unit
): Unit

Material Design search

A search bar represents a floating search field that allows users to enter a keyword or phrase and get relevant information. It can be used as a way to navigate through an app via search queries.

An search bar expands into a search "view" and can be used to display dynamic suggestions or search results.

Search bar image

A DockedSearchBar displays search results in a bounded table below the input field. It is an alternative to SearchBar when expanding to full-screen size is undesirable on large screens such as tablets.

Parameters
inputField: @Composable () -> Unit

the input field of this search bar that allows entering a query, typically a SearchBarDefaults.InputField.
expanded: Boolean

whether this search bar is expanded and showing search results.
onExpandedChange: (Boolean) -> Unit

the callback to be invoked when this search bar's expanded state is changed.
modifier: Modifier = Modifier

the Modifier to be applied to this search bar.
shape: Shape = SearchBarDefaults.dockedShape

the shape of this search bar.
colors: SearchBarColors = SearchBarDefaults.colors()

SearchBarColors that will be used to resolve the colors used for this search bar in different states. See SearchBarDefaults.colors.
tonalElevation: Dp = SearchBarDefaults.TonalElevation

when SearchBarColors.containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.
shadowElevation: Dp = SearchBarDefaults.ShadowElevation

the elevation for the shadow below the search bar.
content: @Composable ColumnScope.() -> Unit

the content of this search bar to display search results below the inputField.

DockedSearchBar

Cmn 
@ExperimentalMaterial3Api
@Composable
fun DockedSearchBar(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    active: Boolean,
    onActiveChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    placeholder: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = SearchBarDefaults.dockedShape,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit