Biofarma | Bind UI

Appbar

AppBars are navigational UI elements providing easy access to various functions, menus, or tools within an application.

Type	Resource
Design	Figma
Mobile	Web Storybook
Code	Gitlab

Appbar Preview

Usage

import id.co.biofarma.binduiandroid.components.appbars.Appbars

AppBars(
  alignment = AppBarAlignment.LEFT.value,
  variant = AppBarVariant.PRIMARY.value,
  onNavigationClick = {},
  title = "App Title",
  subtitle = "App Sub Title",
  leading = {
    Avatar(
      imageUrl = "https://reqres.in/img/faces/2-image.jpg",
      type = AvatarType.PHOTO.value,
      )
    },
    actions = listOf({
      Icon(
          imageVector = BindIcons.Edit.Lined.More-one,
          contentDescription = "More",
          modifier = Modifier.clickable {}
      )
    }
  )
)

Examples

Variant (optional)

Use variant to determine the background color of App Bar.

App Bar Example Variant

Alignement (optional)

Use alignment to adjust the position of the title.

App-bar Example Type

Title and Sub Title

A title for the App bar component is required. As for the sub title, it is optional.

App Bar Example Title

Mode (optional)

Use mode to use dark or light

App Bar Example Mode

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the avatar.
variant	true	`primary`	`primary`, `neutral`	Unique identifier for avatar with a specific color.
alignment	true	`left`	`left`, `center`,	Alignment for the title 7 sub title
mode	false	`light`	`light` `dark`	The theme mode of the avatar (`light` or `dark`).
title	true	”title”	`string`	Custom styles for the avatar component.
subtitle	false	”sub title”	`string`	A unique identifier to change the initials of the name on the avatar.
leading	false	-	`@Composable (() -> Unit)? = null`	A leading
action	false	-	`@Composable (() -> Unit)? = null`	Actions displayed at appbar end using IconButtons.

Accordion Avatar