Skip to main content
Version: 12.10.0

contextmenu

README.md​

Context Menu Component​

Context Menu presents a context specific actions or options to the user by a pop up UI next to a control the user tapped. Option that are provided in pop up are related to current context or task and often they are "Share", "Edit" or "Delete". Context menu provide a concise and user friendly way to access actions without cluttering main screen. DropdownMenu will be placed in a Box with a sibling that will be used as the 'anchor'

Features:​

  • Context menu provides list of action options related to current context or task.
  • It contains list of actions with label and icon
  • OnClick of any menu options the context menu will be closed.
  • OnDismiss the context menu will be closed.

How to use Context Menu Component​

  1. Add the necessary imports:

    import your.package.name.OCContextMenu

  2. Use the required List Item in your Composable:

       val items = listOf(
            OCContextMenuItem("Label"),
            OCContextMenuItem("Label"),
            OCContextMenuItem("Label"),
            OCContextMenuItem("Label"),
            OCContextMenuItem("Label"),
            OCContextMenuItem("Label"),
            OCContextMenuItem("Label"),
            OCContextMenuItem("Label",
                itemColor = MenuItemsColors.contextMenuItemRed,
                image = {
                    Icon(
                        painter = painterResource(id = R.drawable.context_menu_delete),
                        contentDescription = null,
                        tint = OCTheme.colors.contextMenuItemRed,
                        modifier = Modifier
                            .size(Size.twentyFourDPSpacing),
                    )
                }),
        )
        val itemHeight by remember {
            mutableStateOf(0.dp)
        }
        val pressOffset by remember {
            mutableStateOf(DpOffset.Zero)
        }
        val isContextMenuVisible = rememberSaveable {
            mutableStateOf(false)
        }
        Box(
            modifier = Modifier
                .fillMaxSize()
                .wrapContentSize(Alignment.Center)
        ) {
            OCButton(
                onClick = { isContextMenuVisible.value = true },
                title = "Click"
            )
            OCContextMenu(
                dropdownItems = items,
                isVisible = isContextMenuVisible,
                pressOffset = pressOffset,
                itemHeight = itemHeight,
                onDismissRequest = {
                    isContextMenuVisible.value = false
                },
                onItemClick = {
                    isContextMenuVisible.value = false
                },
            )
        }

Parameters:

dropdownItems: List<OCContextMenuItem> -> The list of context menu Items. isVisible: Boolean -> Boolean Value that indicate whether to show or hide the context menu. Default the state is hidden, on click of action or control the context menu is visible. pressOffset: DpOffset -> It takes and remembers DpOffset of where the user has pressed. itemHeight:Dp -> It accepts the height of the component that you have tapped. It is used to calculate the actual the position where the context menu needs to be displayed. code onDismissRequest = { isContextMenuVisible.value = false } -> This callback is triggered when the Context Menu is dismissed. code onItemClick = { isContextMenuVisible.value = false } -> This callback is called when the the user taps on one of the context menu.