MaterialMenu

Introduction

MaterialMenu is a customizable Material Design menu icon component, supporting smooth transitions between different icon states (Burger, Arrow, X, Checkmark).

• Smooth Animations: Seamless transition animations between different icon states

• Highly Customizable: Adjustable size, color, stroke width, and animation duration

• Multiple States: Supports Burger, Arrow, X, and Checkmark icon states

• Layout Adaptive: Adapts to different layout types (Row, Column, Stack)

  

• RTL Support: Supports right-to-left layout

• Animation Listener: Set animation listener to monitor animation state

  

• Transformation Offset: Supports manual control of animation progress

  

How to Install

ohpm install @ohos/material-menu

For details about the OpenHarmony ohpm environment configuration, see OpenHarmony HAR.

How to Use

Import and use

import { IconState, MaterialMenuView } from '@ohos/material-menu';

@Component
struct MyComponent {
  @State menuState: IconState = IconState.BURGER;

  build() {
    MaterialMenuView({
      menuSize: 48,
      color: Color.Black,
      strokeWidth: 3,
      iconState: this.menuState,
      onStateChange: (state) => this.menuState = state
    })
  }
}

Available APIs

1. MaterialMenuView Component

1.1 Properties

Property Name	Type	Default Value	Description
menuSize	number	48	Menu size
strokeWidth	number	3	Stroke width
color	ResourceColor	Color.Black	Icon color
animationDuration	number	500	Animation duration (ms)
iconState	IconState	IconState.BURGER	Initial icon state
rtlEnabled	boolean	false	Enable right-to-left layout
visible	boolean	true	Component visibility
clickAnimationEnabled	boolean	true	Enable click animation
controller	MaterialMenuViewController	null	Component controller for programmatic control

1.2 Event Callbacks

Event Name	Type	Description
onMenuClick	() => void	Menu click event
onStateChange	(state: IconState) => void	State change event
onDrawableReady	(drawable: MaterialMenuDrawable) => void	Drawable ready event

1.3 Public Methods (via Controller)

Method Name	Method Signature	Parameter Description	Return Type	Remarks
setDrawable	setDrawable(drawable: MaterialMenuDrawable): void	drawable: MaterialMenuDrawable instance	void	Set MaterialMenuDrawable instance
getIconState	getIconState(): IconState	None	IconState	Get current icon state
animateIconState	animateIconState(state: IconState): void	state: Target icon state	void	Animate to specified icon state
setAnimationListener	setAnimationListener(listener: AnimationListener): void	listener: Animation listener	void	Set animation state change listener
setInterpolator	setInterpolator(interpolator: AnimatorResult | null): void	interpolator: Animation interpolator	void	Set animation interpolator
setTransformationOffset	setTransformationOffset(state: AnimationState, value: number): IconState	state: Animation state, value: Offset (0-2)	IconState	Manually set animation transformation offset
cancelAnimation	cancelAnimation(): void	None	void	Cancel current animation

Constraints

This project has been verified in the following versions:

• DevEco Studio: 6.0.0 Release（6.0.0.868）, SDK: API12 (5.0.0.71)

Directory Structure

|---- ohos_material-menu
|     |---- entry          # Demo application module
|     |---- library        # MaterialMenu component library module
|     |     |---- src
|     |     |     └─ main
|     |     |          └─ ets
|     |     |               ├─ components/
|     |     |               │    │---- MaterialMenuView.ets     # Main view component
|     |     |               │    └─── MaterialMenuDrawable.ets # Animation drawing logic
|     |     |               └─ enums/
|     |     |                    │---- AnimationState.ets  # Animation state enum
|     |     |                    │---- IconState.ets       # Icon state enum
|     |     |                    └─ Stroke.ets             # Stroke width enum
|     |     └─ Index.ets   # External interface entry
|     |---- README.md      # Installation and usage instructions
|     |---- README.zh.md   # Installation and usage instructions

How to Contribute

If you find any problem when using the project, submit an issue or a PR.

License

This project is licensed under Apache License 2.0.