Skip to main content
Version: 12.10.0

topnavigation

OCTopNavigation - A Custom Composable UI Component

Overview

The OCTopNavigation composable allows you to easily create various types of top app bars with different styles, such as center-aligned, large, medium, and small. It provides options to include a back button, customize colors, and add actions.

Top Navigation Type:

  • Small
  • Medium
  • Large
  • CenterAligned

Features

  • Center-aligned, large, medium, and small top app bars.
  • Optional back button with accessibility support.
  • Customizable colors based on provided configurations.
  • Support for different scroll behaviors.

How to use OCTopNavigation

  1. Add the necessary imports:

    import your.package.name.OCTopNavigation

  2. Use the OCTopNavigation within your Composable:

 val config = OCTopNavigationConfig(
actions = {
IconButton(onClick = {}) {
Icon(
painter = painterResource(id = R.drawable.infocard_placeholder),
contentDescription = null,
tint = OCColors.topNavigationIcon
)
}

IconButton(onClick = {}) {
Icon(
painter = painterResource(id = R.drawable.infocard_placeholder),
contentDescription = null,
tint = OCColors.topNavigationIcon
)
}

IconButton(onClick = {}) {
Icon(
painter = painterResource(id = R.drawable.infocard_placeholder),
contentDescription = null,
tint = OCColors.topNavigationIcon
)
}
},
showBackButton = true,
scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState()),
isBackgroundGreen = false
)
OCTopNavigation(
topBarType = CenterAligned, // Choose the type of top app bar
title = "Your Title",
topNavigationConfig = config,
onBackButtonClick = { /* Handle back button click */ }
)

Parameters:

  • topBarType : The type of top app bar you want to create. Choose from CenterAligned, Large, Medium, or Small.
  • title : The title to display in the top app bar.
  • topNavigationConfig : An optional configuration object that allows you to customize the top app bar's appearance and behavior. You can set properties like showBackButton to indicate whether the back button should be shown, actions to define additional actions, scrollBehavior to customize scroll behavior, and isBackgroundGreen to choose the background color scheme.
  • onBackButtonClick : A lambda function to be executed when the back button is clicked.
  • modifier : To add any further modification. (Optional)