菜单

菜单
菜单显示分组的导航操作

下载

类型

菜单

菜单

2.0 开始,菜单现在使用 flexbox。这允许每个菜单项自动拉伸到最大项目的大小。

以下许多示例都与 下拉菜单 结合使用,以在 ui menu 中显示下拉菜单。请查阅下拉菜单文档以获取此组件的正确 javascript 初始化。

二级菜单

菜单可以调整外观以淡化其内容

指向

菜单可以指向以显示它与附近内容的关系

表格

菜单可以格式化为显示信息标签

请务必访问 标签文档,以了解如何设置动态标签
这是一个拉伸的网格列。此段落将始终与标签高度匹配
这是一个拉伸的网格列。此段落将始终与标签高度匹配

文本

菜单可以格式化为文本内容

垂直菜单

垂直菜单垂直显示元素。

垂直菜单的宽度默认情况下为任意大小。要使其更精确地适合你的内容,请使用 fluid 变体并结合 ui 网格

分页

分页菜单专门格式化以呈现指向内容页面的链接

内容

标题

菜单项可以包含标题,也可以本身就是标题

输入

菜单项可以在其内部包含 输入框

按钮

菜单项可以在其内部包含 按钮

链接项

菜单可以包含链接项,或格式化为链接的项。

下拉菜单项

项可以在 下拉菜单 中包含嵌套菜单。

要让下拉菜单在没有 Javascript 的情况下打开,请使用 简单 变体

搜索

菜单可以包含 搜索 输入框

菜单

菜单可以包含另一个菜单组,该组与菜单项位于同一级别。

子菜单

菜单项可以包含嵌套在其中的另一个菜单,充当分组的子菜单。

状态

悬停

菜单项可以被悬停

菜单项只有在它们是 a 链接或被赋予类名 link 时才能被悬停

活动

菜单项可以处于活动状态

变体

固定

菜单可以固定到其上下文的一侧

这些示例使用 iframe,以防止内容粘贴到浏览器视窗。
对于更高级的行为,请考虑使用 粘性菜单可见性 API

可堆叠

菜单可以在移动分辨率下堆叠

可堆叠菜单旨在仅与简单的菜单内容一起使用。堆叠菜单不会复制垂直菜单的所有其他样式,例如调整下拉菜单位置。

反转

菜单的颜色可以反转,以显示更高的对比度

图标

菜单可能只有图标



带标签的图标

菜单可能包含带标签的图标



流式

垂直菜单可以占据其容器的大小。(水平菜单默认情况下就是这样)

紧凑

菜单可以仅占用适应其内容所需的空间

平均分配

菜单可以平均分配其项目

垂直菜单可以指向与其相邻的内容,以显示所有权

附加

菜单可以附加到其他内容段

有许多 Lorem Ipsum 段落的变体可用,但大多数在某种程度上都受到了修改,添加了幽默或随机的单词,这些单词看起来一点也不可信。如果您要使用一段 Lorem Ipsum,您需要确保文本中间没有令人尴尬的内容。互联网上的所有 Lorem Ipsum 生成器都倾向于根据需要重复预定义的块,这使得它成为互联网上第一个真正的生成器。它使用一个包含 200 多个拉丁词的词典,结合少量模型句子结构,生成看起来合理的 Lorem Ipsum。因此,生成的 Lorem Ipsum 始终没有重复、注入的幽默或非典型词语等。
有许多 Lorem Ipsum 段落的变体可用,但大多数在某种程度上都受到了修改,添加了幽默或随机的单词,这些单词看起来一点也不可信。如果您要使用一段 Lorem Ipsum,您需要确保文本中间没有令人尴尬的内容。互联网上的所有 Lorem Ipsum 生成器都倾向于根据需要重复预定义的块,这使得它成为互联网上第一个真正的生成器。它使用一个包含 200 多个拉丁词的词典,结合少量模型句子结构,生成看起来合理的 Lorem Ipsum。因此,生成的 Lorem Ipsum 始终没有重复、注入的幽默或非典型词语等。

尺寸

菜单的大小可以变化

垂直菜单的大小也可以变化

项目

拟合

菜单项或菜单可以删除元素填充,垂直或水平

无边框

菜单项或菜单可以没有边框

调光器消息
调光器子标题