Biofarma | Bind UI

Popover/Modal

A popover is a container that displays additional information or options related to a specific element on a page. It can provide context-sensitive help, display related content, or provide a short list of options for users to interact quickly with.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Popover Preview

Usage

  import id.co.biofarma.binduiandroid.components.popover.Popover

    Popover(
      id = "popover-bio",
      title = "Lorem Ipsum",
      description = "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      variant = "image",
      borderRadius = ComponentRadius.NONE.value,
      imageUrl = "https://images.pexels.com/photos/2325447/pexels-photo-2325447.jpeg",
      showInfoIcon = true,
      showCloseIcon = true,
      onClose = { showPopover = false },
      child = null
      )

Examples

Variant

Set the variant prop to image or custom.

Popover Variant

    Popover(
        id = "popover-bio",
        title = title,
        variant = variant,
        borderRadius = borderRadius,
        onClose = { showPopover = false },
        child = {
            Column(
                modifier = Modifier.padding(16.dp).fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Row {
                    Avatar(
                        type = "photo",
                        imageUrl = "https://static.wikia.nocookie.net/avatar/images/a/ae/Aang_at_Jasmine_Dragon.png",
                    )
                    Spacer(modifier = Modifier.height(8.dp))
                    Column (
                        modifier = Modifier.weight(1f).padding(horizontal = 8.dp)
                    ) {
                        Text(
                            text = "John Doe",
                            style = Typography.Body.Medium
                        )
                        Text(
                            text = "Software Engineer",
                            style = Typography.Body.XSmall
                        )
                    }
                }
            }
 
        // Divider
        Divider(
            thickness = "thin",
            direction = "horizontal"
        )
 
        // Menu List
        val menuItems = listOf(
            Pair(Icons.Outlined.PersonOutline, "Profile"),
            Pair(Icons.Outlined.Settings, "Settings"),
            Pair(Icons.Outlined.AddCard, "Billing"),
            Pair(Icons.Outlined.Language, "Language"),
            Pair(Icons.Outlined.Groups, "Member"),
        )
        if (isScrollable.toBoolean()) {
          repeat(5) {
              menuItems.forEach {(icon, text) ->
                  Row (
                    modifier = Modifier.fillMaxWidth().clickable(
                        onClick = {
                            Toast.makeText(context, "Go to $text", Toast.LENGTH_SHORT).show()
                            showPopover = false
                        }
                    )
                    .padding(vertical = 8.dp, horizontal = 16.dp),
                    verticalAlignment = Alignment.CenterVertically
                  ) {
                    Icon(
                        imageVector = icon,
                        contentDescription = null,
                        modifier = Modifier.size(24.dp),
                    )
                    Text(
                        text = text,
                        modifier = Modifier.padding(start = 8.dp),
                        style = Typography.Body.Medium
                    )
                  }
              }
          }
        } else {
            menuItems.forEach {(icon, text) ->
                Row (
                    modifier = Modifier.fillMaxWidth().clickable (
                    onClick = {
                        Toast.makeText(context, "Go to $text", Toast.LENGTH_SHORT).show()
                        showPopover = false
                    }
                )
                .padding(vertical = 8.dp, horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(
                        imageVector = icon,
                        contentDescription = null,
                        modifier = Modifier.size(24.dp),
                    )
                    Text(
                        text = text,
                        modifier = Modifier.padding(start = 8.dp),
                        style = Typography.Body.Medium
                    )
                }
 
            }
        }
 
        // Logout Button
        Row(
            modifier = Modifier.fillMaxWidth().clickable(
            onClick = {
                Toast.makeText(context, "Go to Logout", Toast.LENGTH_SHORT).show()
                showPopover = false
            }
        )
        .padding(vertical = 8.dp, horizontal = 16.dp),
        verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                imageVector = Icons.AutoMirrored.Outlined.Logout,
                contentDescription = null,
                modifier = Modifier.size(24.dp),
                tint = PrimitiveColors.Danger_600,
            )
            Text(
                text = "Logout",
                color = PrimitiveColors.Danger_600,
                style = Typography.Body.Medium
            )
        }
    }
)

borderRadius

Set the showCloseIcon prop to none xs sm md lg or full for corner radius variant

Popover showCloseIcon

showCloseIcon

Set the borderRadius prop to true, or false for close icon on top right

Popover showCloseIcon

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the popover.
title	false	-	`string`	Title of the popover.
description	false	-	`string`	Long description for the popover.
variant	false	`image`	`image`, `custom`	Variant of the popover.
borderRadius	false	`md`	`none` `xs` `sm` `md` `lg` `full`	Corner radius size of popover card .
imageUrl	false	-	`string`	Url of image in the popover
showCloseIcon	false	`false`	`boolean`	Show close button on the top right of popover.
showInfoIcon	false	`false`	`boolean`	Show info icon
onClose	false	-	`() -> Unit`	Action when user close the popover
onClickItem	false	-	`() -> Unit`	Action when click the popover
child	false	-	`@Composable`	Child component of the popover
style	false	-	`Modifier`	Modifier for additional styling and layout modifications.

Skeleton Badge