Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jacobras/ComposeActionMenu
An easy-to-use action/overflow menu for Compose UI.
https://github.com/jacobras/ComposeActionMenu
actionbar compose materialdesign
Last synced: 2 months ago
JSON representation
An easy-to-use action/overflow menu for Compose UI.
- Host: GitHub
- URL: https://github.com/jacobras/ComposeActionMenu
- Owner: jacobras
- License: mit
- Created: 2021-12-27T23:46:36.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-15T08:46:40.000Z (8 months ago)
- Last Synced: 2024-08-02T05:10:55.515Z (6 months ago)
- Topics: actionbar, compose, materialdesign
- Language: Kotlin
- Homepage:
- Size: 588 KB
- Stars: 71
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- kmp-awesome - Compose Action Menu - to-use action/overflow menu for Compose UI. (Libraries / 🍎 Compose UI)
README
# Compose Action Menu
This multi-platform library provides an easy-to-use action menu for Compose, since Compose doesn't offer this by default.
[]( https://android-arsenal.com/details/1/8261 )
[](https://androidweekly.net/issues/issue-499/)
## Features
- Icons (optional);
- Selectable/checkable items;
- Nested sub menus;
- Automatic overflow for items that don't fit the specified maximum;
- Kotlin Multiplatform (KMP) since version 2, supporting Android, iOS, JVM (desktop) and JS/WASM (since version 3);
- Material 2 & 3 support (since version 3).
A web demo is available at https://jacobras.github.io/ComposeActionMenu/.
# Installation
```kotlin
dependencies {
implementation("nl.jacobras:compose-action-menu:3.0.0")
}
```
Version 3 and newer are built upon Material 3, whereas previous versions use Material 2. Expand this for
migration instructions.
### Migrating from v2 to v3
Compose Action Menu version 3 is built upon Material 3. The custom colour names have been changed.
2.x:
```kotlin
ActionMenu(
items = listOf(/* items */),
colors = DefaultActionMenuColors(
dropdownIconTint = myContentColor,
dropdownBackgroundColor = myOverflowContainerColor
)
)
```
3.x:
```kotlin
ActionMenu(
items = listOf(/* items */),
colors = ActionMenuDefaults.colors(
contentColor = myContentColor,
overflowContainerColor = myOverflowContainerColor,
overflowContentColor = myContentColor
)
)
```
Version 2 and newer are available from Maven Central, whereas previous versions were distributed through JitPack. Expand
this for migration instructions.
### Migrating from v1 to v2
Compose Action Menu version 2 is built using KMP. Android-specific resource support is replaced with broader string + Painter support.
1.x:
```kotlin
RegularActionItem(
titleResId = R.string.search,
iconDrawable = R.drawable.search
)
```
2.x:
```kotlin
RegularActionItem(
title = stringResource(R.string.search),
icon = painterResource(R.drawable.search)
)
```
## Compose version
Each version depends on specific Compose dependencies.
Compose Multiplatform 1.6.11
Material 3
Compose Multiplatform 1.5.1
Material 2
Compose 1.4.3
Material 2
Compose 1.3.3
Material 2
Compose 1.1.0-rc01
Material 2
# Usage
```kotlin
val toolbarActions = listOf(
RegularActionItem(
key = "search",
title = stringResource(R.string.search),
iconVector = Icons.Filled.Search,
onClick = { /* TODO: Open search screen */ }
)
)
TopAppBar(
actions = { ActionMenu(items = toolbarActions) }
)
```
## Supported item types
Several different type of actions can be used. These are all sub classes of `ActionItem`.
- Regular item: `RegularActionItem`;
- Checkable item: `CheckableActionItem`;
- Radio-toggleable item: `RadioActionItem`;
- Groups: `GroupActionItem`.
### Creating a group
Is as simple as:
```kotlin
val subOption1 = RegularActionItem(key = "subOption1", /* ... */)
val subOption2 = RegularActionItem(key = "subOption2", /* ... */)
val subOption3 = RegularActionItem(key = "subOption3", /* ... */)
val group = GroupActionItem(
key = "myGroup",
title = stringResource(R.string.group_title),
childOptions = listOf(subOption1, subOption2, subOption3)
)
```
## Customisation
`ActionMenu` takes some parameters:
- `maxNumberOfIcons` Number of icons to show, including overflow menu icon (if needed);
- `colors` Optional color configuration. Usage: `colors = ActionMenuDefaults.colors(...)`.
`ActionItem`s can be customised too:
- Use `iconVector` or `iconDrawable` to show an icon next to the item's title;
- Set `showAsAction` to change if an item will be shown as an icon or in the overflow menu.
# Testing
Every menu item has a test tag attached to it which is a combination of a `"ActionMenu"` prefix and the item's `key`. Example test usage:
```kotlin
// Menu configuration:
val item = RegularActionItem(key = "myKey", /* ... */)
// Test:
composeTestRule.onNodeWithTag("ActionMenu#myKey").performClick()
```
There's a reserved key for the overflow icon: `"ActionMenu#overflow"`.
# Sample apps
The repository contains two sample apps.
* Run Android: `gradlew sample-app:installDebug`
* Run Desktop: `gradlew sample-desktop:run`
# Production example
My note taking app uses ComposeActionMenu:
