时励UI组件

# Menu

导航菜单栏, 字体颜色默认父元素，结合Menu.Item 使用， 包含 Menu.Group 最多支持 10 级。

案例 
import { defineComponent } from "vue";
import { Typography, Icon, Menu } from "sl-vue2-template";

const { P } = Typography;

export default defineComponent({
  render() {
    return (
      <div>
        <P>Menu 默认1</P>
        <Menu style={{ width: "256px" }}>
          <Menu.Item mark="1">
            <Icon name="Add Bold" size="20" />
            Navigation 1
          </Menu.Item>
          <Menu.Item mark="2" disabled>
            Navigation 2
          </Menu.Item>
          <Menu.Item mark="3">Navigation 3</Menu.Item>
          <Menu.Item mark="4">Navigation 4</Menu.Item>
        </Menu>
        <P>Menu 默认 Number</P>
        <Menu active={2} style={{ width: "256px" }}>
          <Menu.Item mark={1}>
            <Icon name="Add Bold" size="20" />
            Navigation 1
          </Menu.Item>
          <Menu.Item mark={2} disabled>
            Navigation 2
          </Menu.Item>
          <Menu.Item mark={3}>Navigation 3</Menu.Item>
          <Menu.Item mark={4}>Navigation 4</Menu.Item>
        </Menu>
        <P>Menu 变色</P>
        <Menu active="1" color="blue" style={{ width: "256px" }}>
          <Menu.Item mark="1">
            <Icon name="Add Bold" size="20" />
            Navigation 1
          </Menu.Item>
          <Menu.Item mark="2" disabled>
            Navigation 2
          </Menu.Item>
          <Menu.Item mark="3">Navigation 3</Menu.Item>
          <Menu.Item mark="4">Navigation 4</Menu.Item>
        </Menu>
        <P>Menu 有背景， 变色</P>
        <div style={{ background: "#c00000", color: "white", width: "256px" }}>
          <Menu active="1" color="white" hiddenBorder>
            <Menu.Item mark="1">
              <Icon name="Add Bold" size="20" />
              Navigation 1
            </Menu.Item>
            <Menu.Item mark="2" disabled>
              Navigation 2
            </Menu.Item>
            <Menu.Item mark="3">Navigation 3</Menu.Item>
            <Menu.Item mark="4">Navigation 4</Menu.Item>
          </Menu>
        </div>
        <P>Menu Group 默认</P>
        <Menu active="1">
          <Menu.Group mark="1">
            <Menu.Group.Header>Navigation 1 Header</Menu.Group.Header>
            <Menu.Group.Content>
              <Menu.Item mark="1-1" disabled>
                Navigation 1-1
              </Menu.Item>
              <Menu.Item mark="1-2">Navigation 1-2</Menu.Item>
              <Menu.Item mark="1-3">Navigation 1-3</Menu.Item>
            </Menu.Group.Content>
          </Menu.Group>
          <Menu.Group mark="2">
            <Menu.Group.Header>
              <Icon name="Add Bold" size="20" />
              Navigation 2 Header
            </Menu.Group.Header>
            <Menu.Group.Content>
              <Menu.Item mark="2-1">Navigation 2-1</Menu.Item>
              <Menu.Item mark="2-2">Navigation 2-2</Menu.Item>
              <Menu.Group mark="2-3">
                <Menu.Group.Header>
                  <Icon name="Add Bold" size="20" />
                  Navigation 2-3 Header
                </Menu.Group.Header>
                <Menu.Group.Content>
                  <Menu.Item mark="2-3-1">Navigation 2-3-1</Menu.Item>
                  <Menu.Item mark="2-3-2">Navigation 2-3-2</Menu.Item>
                  <Menu.Item mark="2-3-3">Navigation 2-3-3</Menu.Item>
                </Menu.Group.Content>
              </Menu.Group>
            </Menu.Group.Content>
          </Menu.Group>
        </Menu>
        <P>Menu Group 变色</P>
        <div style={{ background: "#c00000", color: "white", width: "256px" }}>
          <Menu active="1" color="white" hiddenBorder>
            <Menu.Item mark="1-0">Navigation 0</Menu.Item>
            <Menu.Group mark="1">
              <Menu.Group.Header>Navigation 1 Header</Menu.Group.Header>
              <Menu.Group.Content>
                <Menu.Item mark="1-1">Navigation 1-1</Menu.Item>
                <Menu.Item mark="1-2">Navigation 1-2</Menu.Item>
                <Menu.Item mark="1-3">Navigation 1-3</Menu.Item>
              </Menu.Group.Content>
            </Menu.Group>
            <Menu.Group mark="2">
              <Menu.Group.Header>
                <Icon name="Add Bold" size="20" />
                Navigation 2 Header
              </Menu.Group.Header>
              <Menu.Group.Content>
                <Menu.Item mark="2-1">Navigation 2-1</Menu.Item>
                <Menu.Item mark="2-2">Navigation 2-2</Menu.Item>
                <Menu.Group mark="2-3" disabled>
                  <Menu.Group.Header>
                    <Icon name="Add Bold" size="20" />
                    Navigation 2-3 Header
                  </Menu.Group.Header>
                  <Menu.Group.Content>
                    <Menu.Item mark="2-3-1">Navigation 2-3-1</Menu.Item>
                    <Menu.Item mark="2-3-2">Navigation 2-3-2</Menu.Item>
                    <Menu.Item mark="2-3-3">Navigation 2-3-3</Menu.Item>
                  </Menu.Group.Content>
                </Menu.Group>
              </Menu.Group.Content>
            </Menu.Group>
          </Menu>
        </div>{" "}
        <P>Menu Group Number 默认</P>
        <Menu active={11}>
          <Menu.Group mark={1} show>
            <Menu.Group.Header>Navigation 1 Header</Menu.Group.Header>
            <Menu.Group.Content>
              <Menu.Item mark={11} disabled>
                Navigation 1-1
              </Menu.Item>
              <Menu.Item mark={12}>Navigation 1-2</Menu.Item>
              <Menu.Item mark={14}>Navigation 1-3</Menu.Item>
            </Menu.Group.Content>
          </Menu.Group>
          <Menu.Group mark={2}>
            <Menu.Group.Header>
              <Icon name="Add Bold" size="20" />
              Navigation 2 Header
            </Menu.Group.Header>
            <Menu.Group.Content>
              <Menu.Item mark={21}>Navigation 2-1</Menu.Item>
              <Menu.Item mark={22}>Navigation 2-2</Menu.Item>
              <Menu.Group mark={23}>
                <Menu.Group.Header>
                  <Icon name="Add Bold" size="20" />
                  Navigation 2-3 Header
                </Menu.Group.Header>
                <Menu.Group.Content>
                  <Menu.Item mark={24}>Navigation 2-3-1</Menu.Item>
                  <Menu.Item mark={25}>Navigation 2-3-2</Menu.Item>
                  <Menu.Item mark={26}>Navigation 2-3-3</Menu.Item>
                </Menu.Group.Content>
              </Menu.Group>
            </Menu.Group.Content>
          </Menu.Group>
        </Menu>
        <P>Menu 关闭动画效果</P>
        <Menu animation={false} style={{ width: "256px" }}>
          <Menu.Item mark="1">
            <Icon name="Add Bold" size="20" />
            Navigation 1
          </Menu.Item>
          <Menu.Item mark="2" disabled>
            Navigation 2
          </Menu.Item>
          <Menu.Item mark="3">Navigation 3</Menu.Item>
          <Menu.Item mark="4">Navigation 4</Menu.Item>
        </Menu>
        <P>Menu Group Number 关闭动画效果</P>
        <Menu animation={false} active={11}>
          <Menu.Group mark={1} show>
            <Menu.Group.Header>Navigation 1 Header</Menu.Group.Header>
            <Menu.Group.Content>
              <Menu.Item mark={11} disabled>
                Navigation 1-1
              </Menu.Item>
              <Menu.Item mark={12}>Navigation 1-2</Menu.Item>
              <Menu.Item mark={14}>Navigation 1-3</Menu.Item>
            </Menu.Group.Content>
          </Menu.Group>
          <Menu.Group mark={2}>
            <Menu.Group.Header>
              <Icon name="Add Bold" size="20" />
              Navigation 2 Header
            </Menu.Group.Header>
            <Menu.Group.Content>
              <Menu.Item mark={21}>Navigation 2-1</Menu.Item>
              <Menu.Item mark={22}>Navigation 2-2</Menu.Item>
              <Menu.Group mark={23}>
                <Menu.Group.Header>
                  <Icon name="Add Bold" size="20" />
                  Navigation 2-3 Header
                </Menu.Group.Header>
                <Menu.Group.Content>
                  <Menu.Item mark={24}>Navigation 2-3-1</Menu.Item>
                  <Menu.Item mark={25}>Navigation 2-3-2</Menu.Item>
                  <Menu.Item mark={26}>Navigation 2-3-3</Menu.Item>
                </Menu.Group.Content>
              </Menu.Group>
            </Menu.Group.Content>
          </Menu.Group>
        </Menu>
      </div>
    );
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212

# 属性

成员 说明 类型 必须 默认值 版本
active 被选中的折叠面板的标记（mark） String, Number 否 -- --
color 鼠标移动上去的文本颜色，被选中的字体颜色与背景、边框颜色 支持的颜色 否 'primary-color' --
hiddenBorder 隐藏边框 Boolean 否 --
animation 动画效果 Boolean 否 true --
className 自定义 class 名 String 否 -- --

Menu 下的菜单栏群组 结合 Menu.Group.Header 与 Menu.Group.Content，Menu.Item使用

# 属性

成员 说明 类型 必须 默认值 版本
mark 标记 String, Number 否 -- --
show 是否默认展开 Boolean 否 false --
disabled 禁用 Boolean 否 false --
className 自定义 class 名 String 否 -- --

菜单栏子元素

# 属性

成员 说明 类型 必须 默认值 版本
mark 标记 String, Number 否 -- --
disabled 禁用 Boolean 否 false --
className 自定义 class 名 String 否 -- --

# 事件

事件名称 说明 回调参数 必须 版本
handlerClick 点击的回调 () => void 否 --
上次更新: 3/31/2023, 12:46:17 PM

← Input 输入框 →