• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2025 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { SymbolGlyphModifier } from '@kit.ArkUI'
17
18export interface MenuAttrOptions {
19  font?: Font,
20  fontColor?: ResourceColor,
21  radius?: Dimension | BorderRadiuses,
22
23  submenuMode?: SubMenuExpandingMode,
24  menuItemDivider?: DividerStyleOptions,
25  menuItemGroupDivider?: DividerStyleOptions,
26
27  border?: BorderOptions,
28}
29//图标资源
30export let startIcon: Resource = $r('app.media.app_icon')
31export let endIcon: Resource = $r('app.media.app_icon')
32export let symbolStartIcon: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.checkmark_square_on_square_fill'))
33  .fontSize('30')
34  .fontColor([Color.Blue, Color.Orange])
35  .fontWeight(300)
36  .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
37  .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
38  .symbolEffect(SymbolEffect.prototype, 2)
39export let symbolEndIcon: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.candle_light'))
40  .fontSize('30')
41  .fontColor([Color.Blue, Color.Orange])
42  .fontWeight(300)
43  .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
44  .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
45  .symbolEffect(SymbolEffect.prototype, 2)
46
47@Preview
48@Component
49export struct SubMenuBuilder {
50  build() {
51    Menu(){
52      MenuItem({ startIcon: startIcon, content: '菜单选项' })
53        .enabled(false)
54      MenuItem({
55        symbolStartIcon: symbolStartIcon,
56        labelInfo: 'label',
57        symbolEndIcon: symbolEndIcon
58      })
59
60      MenuItemGroup({header: '标题', footer: '脚标' }) {
61        MenuItem({
62          content: "菜单选项1",
63          endIcon: endIcon,
64        })
65          .enabled(false)
66        MenuItem({
67          symbolStartIcon: symbolStartIcon,
68          labelInfo: 'label',
69        })
70      }
71
72      MenuItem({
73        content: "菜单选项2",
74        labelInfo: 'label',
75        symbolStartIcon: symbolStartIcon,
76        symbolEndIcon: symbolEndIcon
77      })
78    }
79  }
80}
81
82@Preview
83@Component
84export struct MenuBuilder {
85  @State menuAttrOptions: MenuAttrOptions = {
86    submenuMode: 0,
87    menuItemDivider: undefined,
88    menuItemGroupDivider: undefined
89  }
90
91  @Builder
92  SubMenuBuilder() {
93    SubMenuBuilder()
94  }
95
96  build() {
97    Menu(){
98      MenuItem({startIcon: startIcon, content: '菜单选项'  })
99        .enabled(false)
100      MenuItem({
101        symbolStartIcon: symbolStartIcon,
102        content: "次级选项",
103        builder:this.SubMenuBuilder()
104      })
105
106      MenuItemGroup({header: '标题', footer: '脚标' }) {
107        MenuItem({
108          content: "菜单选项1",
109          endIcon: endIcon,
110        })
111          .enabled(false)
112        MenuItem({
113          content: "次级选项1",
114          symbolEndIcon: symbolEndIcon,
115          builder: this.SubMenuBuilder()
116        })
117      }
118      MenuItem({
119        content: "菜单选项2",
120        labelInfo: 'label',
121        symbolStartIcon: symbolStartIcon,
122        symbolEndIcon: symbolEndIcon
123      })
124    }
125    .font(this.menuAttrOptions.font)
126    .fontColor(this.menuAttrOptions.fontColor)
127    .radius(this.menuAttrOptions.radius)
128
129    .subMenuExpandingMode(this.menuAttrOptions.submenuMode)
130    .menuItemDivider(this.menuAttrOptions.menuItemDivider)
131    .menuItemGroupDivider(this.menuAttrOptions.menuItemGroupDivider)
132  }
133}
134
135@Preview
136@Component
137export struct CustomMenuBuilder {
138  @Builder
139  SubMenuBuilder() {
140    SubMenuBuilder()
141  }
142
143  build() {
144    Column({space: 10}) {
145      Menu() {
146        MenuItem({startIcon: startIcon, content: '菜单选项'  })
147        MenuItem({
148          symbolStartIcon: symbolStartIcon,
149          content: "次级选项-0",
150          builder:this.SubMenuBuilder()
151        })
152      }
153      .width(200)
154      .subMenuExpandingMode(0)
155
156      Menu() {
157        MenuItem({startIcon: startIcon, content: '菜单选项'  })
158        MenuItem({
159          symbolStartIcon: symbolStartIcon,
160          content: "次级选项-1",
161          builder:this.SubMenuBuilder()
162        })
163      }
164      .width(200)
165      .subMenuExpandingMode(1)
166
167      Menu() {
168        MenuItem({startIcon: startIcon, content: '菜单选项'  })
169        MenuItem({
170          symbolStartIcon: symbolStartIcon,
171          content: "次级选项-2",
172          builder:this.SubMenuBuilder()
173        })
174      }
175      .width(200)
176      .subMenuExpandingMode(2)
177    }
178    .padding(10)
179    .borderWidth(1.0)
180    .borderRadius(16)
181    .borderColor(Color.Blue)
182  }
183}