Biofarma | Bind UI

Drawer

A drawer is a component that slides in from the side of the screen. It is typically used to display additional content, such as a detail view or a list of options.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Drawer Preview

Usage

id.co.biofarma.binduiandroid.components.drawer.Drawer;

val items = listOf(
    DrawerItem(id = "1", label = "Dashboard", icon = Icons.Default.Home),
    DrawerItem(id = "2", label = "Profile", icon = Icons.Default.Person),
    DrawerItem(id = "3", label = "Settings", icon = Icons.Default.Settings)
)
Drawer(
    items = items,
    isShowFooter = true,
    drawerPosition = DrawerPosition.LEFT,
    drawerHeaderStyle = DrawerHeaderStyle(
        title = "Drawer Title",
        subtitle = "Subtitle",
    ),
    onCloseClick = {
        scope.launch {
            drawerState.close()
        }
    },
    primaryButton = DrawerButton(
        text = "Info",
    ),
    secondaryButton = DrawerButton(
        text = "Close",
    ),
    drawerState = drawerState,
)

Examples

Position (optional)

Use position right or left to display the footer as appropriate.

Drawer Example Position

No Footer (optional)

Can remove footer if you don’t want to use footer in drawer.

Drawer Example Position

Props

Props	Required	Default	Type	description
selectedItem	false	-	`DrawerItem`	The currently selected item in the drawer.
drawerState	false	-	`DrawerState`	The status of the drawer (open or closed).
drawerHeaderStyle	false	-	`DrawerHeaderStyle`	Custom style for drawer headers.
items	false	-	`List<DrawerItem>`	List of items to be displayed in the drawer.
isDarkMode	false	`light`	`light` , `dark`	The mode of the drawer (`light` , `dark`).
onCloseClick	false	-	`(DrawerItem?) -> Unit = {}`	A callback function that is called when the drawer is closed or the close button is clicked.
isShowFooter	false	`true`	`boolean`	If false, the footer in the drawer will not be displayed.
itemSpacer	false	-	`Dp = 8.dp`	The distance between items in the drawer.
selectedColor	false	-	`Color`	The color used to mark the selected item drawer.
itemGroupSpacer	false	-	`Dp = 11.dp`	The distance between groups of items in the drawer.
primaryButton	false	-	`DrawerButton? = null`	A main button that can be added in the drawer section.
secondaryButton	false	-	`DrawerButton? = null`	Secondary buttons that can be added in the drawer section.
itemContent	false	-	`(@Composable (item: DrawerItem, selectedItem: DrawerItem?, isSelected: Boolean, onClick: (DrawerItem?) -> Unit) -> Unit)? = null`	Custom content that can be displayed for each item in the drawer.
itemGroup	false	-	`(@Composable ( item: DrawerItem) -> Unit)? = null`	Custom item groups that can be used to group items in a drawer.
drawerPosition	false	`left`	`left` , `right`	The position of the drawer (`left` , `right`).
content	false	-	`@Composable () -> Unit`	Custom content that can be displayed inside the drawer, such as headers or footers.

Carousel File Upload