OudsLargeTopAppBar
Top app bars display information and actions at the top of a screen.
This LargeTopAppBar has slots for a title, navigation icon, and actions. In its default expanded state, the title is displayed in a second row under the navigation and actions.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.0.0 |
Parameters
The title to be displayed in the top app bar. This title will be used in the app bar's expanded and collapsed states, although in its collapsed state it will be composed with a smaller sized TextStyle.
The Modifier to be applied to this top app bar.
The navigation icon displayed at the start of the top app bar.
The actions displayed at the end of the top app bar. These can be instances of OudsTopAppBarAction.Icon or OudsTopAppBarAction.Avatar. The default layout here is a Row, so actions will be placed horizontally. The maximum recommended number of actions is three. Please use a dropdown menu if you need more than three actions.
This app bar height when collapsed by a provided scrollBehavior. This value must be specified and finite, otherwise it will be ignored and replaced with TopAppBarDefaults.LargeAppBarCollapsedHeight.
This app bar's maximum height. When a specified scrollBehavior causes the app bar to collapse or expand, this value will represent the maximum height that the app-bar will be allowed to expand. The expanded height is expected to be greater or equal to the collapsedHeight, and the function will throw an IllegalArgumentException otherwise. Also, this value must be specified and finite, otherwise it will be ignored and replaced with TopAppBarDefaults.LargeAppBarExpandedHeight.
A window insets that app bar will respect.
a TopAppBarScrollBehavior which holds various offset values that will be applied by this top app bar to set up its height and colors. A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls. See TopAppBarScrollBehavior.nestedScrollConnection.
Throws
if the provided expandedHeight is smaller than the collapsedHeight
Samples
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsCenterAlignedTopAppBar
import com.orange.ouds.core.component.OudsLargeTopAppBar
import com.orange.ouds.core.component.OudsMediumTopAppBar
import com.orange.ouds.core.component.OudsTopAppBar
import com.orange.ouds.core.component.OudsTopAppBarAction
import com.orange.ouds.core.component.OudsTopAppBarNavigationIcon
import com.orange.ouds.core.utilities.OudsPreview
fun main() {
//sampleStart
OudsLargeTopAppBar(
title = "Title",
navigationIcon = OudsTopAppBarNavigationIcon.Back {},
actions = listOf(
OudsTopAppBarAction.Icon(Icons.Outlined.FavoriteBorder, "") {},
OudsTopAppBarAction.Avatar(monogram = "A", color = Color.White, backgroundColor = Color(0xff0073b2), "") {}
)
)
//sampleEnd
}