在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

jgthms/bulma

菜单

UI 组件

相关源文件

本文档全面概述了 Bulma 的交互式 UI 组件，这些组件构成了用户在 Web 界面中进行交互的核心。这些组件设计为响应式、可定制且易于访问。有关容器和部分等布局组件，请参阅 布局组件。有关特定于表单的元素，请参阅 表单元素。

UI 组件概述

Bulma 提供了一系列多功能 UI 组件，可以组合使用以创建复杂的交互式界面。这些组件遵循一致的设计模式，同时允许通过修饰符进行自定义。

来源

导航栏是一个响应式的水平导航条，作为主要的导航组件。它支持品牌标识、链接、下拉菜单以及适用于移动设备的响应式汉堡包菜单。

主要功能

  • 采用移动优先方法设计的响应式布局
  • 始终可见的品牌区域
  • 带汉堡包开关的移动端可折叠菜单
  • 支持下拉菜单、按钮和其他元素
  • 固定定位（顶部/底部），并自动添加主体内边距
  • 多种颜色变体

基本导航栏示例结构

navbar
├── navbar-brand
│   ├── navbar-item (logo)
│   └── navbar-burger (mobile menu toggle)
└── navbar-menu
    ├── navbar-start (left-aligned items)
    │   ├── navbar-item
    │   └── navbar-item has-dropdown
    │       ├── navbar-link
    │       └── navbar-dropdown
    │           ├── navbar-item
    │           ├── navbar-divider
    │           └── navbar-item
    └── navbar-end (right-aligned items)
        └── navbar-item

来源

Tabs 组件

选项卡提供了一个简单的水平导航系统，用于在内容区域之间切换。

主要功能

  • 多种对齐选项：左对齐（默认）、居中、右对齐
  • 图标支持
  • 提供 3 种附加尺寸：小、中、大
  • 多种样式：带边框、切换、圆角切换、全宽
  • 可组合的修饰符
tabs [is-centered|is-right] [is-small|is-medium|is-large] [is-boxed|is-toggle|is-fullwidth]
└── ul
    ├── li [is-active]
    │   └── a
    └── li
        └── a

来源

面包屑导航通过显示基于层级的导航路径来帮助用户了解其在网站中的位置。

主要功能

  • 自动分隔符，具有可自定义的样式
  • 对齐选项：左对齐（默认）、居中、右对齐
  • 图标支持
  • 提供 3 种尺寸：小、中、大
  • 4 种分隔符样式：箭头、圆点、实心圆点、斜杠
breadcrumb [is-centered|is-right] [is-small|is-medium|is-large] [has-arrow-separator|has-bullet-separator|has-dot-separator|has-succeeds-separator]
└── ul
    ├── li
    │   └── a
    └── li [is-active]
        └── a

来源

Pagination 组件

分页导航提供了多页内容的导航，包含上一页/下一页按钮和页码。

主要功能

  • 上一页/下一页导航按钮
  • 页码链接，带有当前页指示
  • 省略号用于范围指示
  • 对齐选项：左对齐（默认）、居中、右对齐
  • 圆角样式选项
  • 提供 3 种尺寸：小、中、大
pagination [is-centered|is-right] [is-rounded] [is-small|is-medium|is-large]
├── pagination-previous
├── pagination-next
└── pagination-list
    ├── pagination-link
    ├── pagination-ellipsis
    ├── pagination-link [is-current]
    └── pagination-link

来源

菜单是垂直导航组件，通常用于侧边栏导航。

主要功能

  • 干净的垂直列表样式
  • 支持嵌套导航（最多 2 层）
  • 活动状态指示
  • 节标签
menu
├── menu-label
├── menu-list
│   ├── li
│   │   └── a
│   └── li
│       ├── a [is-active]
│       └── ul
│           └── li
│               └── a
└── menu-label
    └── menu-list
        └── li
            └── a

来源

交互元素

模态框组件创建了一个覆盖页面内容的对话框，将用户注意力集中在特定内容或操作上。

主要功能

  • 带有点击关闭功能的背景遮罩层
  • 关闭按钮
  • 两种内容样式
    • 简单内容容器
    • 带标题、主体和页脚的结构化卡片
  • 通过添加 is-active 类激活（需要 JavaScript）

基本模态框类型

  1. 内容模态框 - 适用于简单内容，尤其是图片
  2. 卡片模态框 - 适用于带有操作的结构化内容
modal [is-active]
├── modal-background
├── modal-content
│   └── Any content (image, text, etc.)
└── modal-close

modal [is-active]
├── modal-background
└── modal-card
    ├── modal-card-head
    │   ├── modal-card-title
    │   └── delete
    ├── modal-card-body
    │   └── Content
    └── modal-card-foot
        └── buttons

来源

下拉菜单提供了一种显示用户操作或导航的上下文覆盖层的方法。

主要功能

  • 触发方式：鼠标悬停或切换（需要 JavaScript）
  • 定位：左对齐（默认）、右对齐、向上（下拉式）
  • 可以在条目中包含任何内容
  • 支持活动条目状态和分隔线
dropdown [is-active|is-hoverable] [is-right] [is-up]
├── dropdown-trigger
│   └── button
└── dropdown-menu
    └── dropdown-content
        ├── dropdown-item [is-active]
        ├── dropdown-divider
        └── dropdown-item

来源

信息组件

面板组件

面板是容器，可以包含导航、搜索表单和内容列表。

主要功能

  • 带有可选颜色变体的标题
  • 选项卡导航
  • 可以包含各种内容的块状项目
  • 图标支持
  • 所有 Bulma 颜色均可用
panel [is-primary|is-link|is-info|is-success|is-warning|is-danger]
├── panel-heading
├── panel-block
│   └── control (search form)
├── panel-tabs
│   ├── a [is-active]
│   └── a
└── panel-block [is-active]
    ├── panel-icon
    └── Text or other content

来源

消息组件

消息是用于通知、警报或信息内容的彩色容器。

主要功能

  • 带标题和删除按钮的可选标题
  • 用于内容的身体
  • 所有 Bulma 颜色均可用
  • 3 种附加尺寸：小、中、大
message [is-primary|is-link|is-info|is-success|is-warning|is-danger] [is-small|is-medium|is-large]
├── message-header
│   ├── p
│   └── delete
└── message-body
    └── Content

来源

组件交互与JavaScript

虽然Bulma提供了组件的CSS样式，但交互功能需要JavaScript。Bulma默认不包含JavaScript，允许开发者根据需要实现功能。

常见的交互模式

  1. 导航汉堡包切换

    • 切换导航汉堡包和导航菜单的is-active类
    • 通过点击导航汉堡包进行控制

  2. 模态框激活

    • 添加is-active类到模态框以显示它
    • 移除is-active类以隐藏
    • 向html/body添加is-clipped以防止滚动

  3. 下拉菜单切换

    • 使用is-hoverable进行悬停激活
    • 切换is-active类进行点击激活

来源

UI组件的最佳实践

  1. 无障碍性考量

    • 使用合适的ARIA属性（aria-label, aria-controls, aria-expanded）
    • 确保交互元素的键盘导航可用
    • 与模态框保持正确的焦点管理

  2. 响应式行为

    • 测试所有屏幕尺寸下的组件
    • 使用合适的响应式修饰符
    • 考虑移动设备的替代布局

  3. 组件组合

    • 导航栏可包含下拉菜单、按钮和表单元素
    • 消息框可以放在模态框内作为通知
    • 面板可以包含菜单或标签页以进行嵌套导航

  4. 状态管理

    • 一致使用is-active类表示活动状态
    • 考虑添加动画类以实现过渡效果
    • 妥善管理焦点状态

来源

已弃用的组件

为了向后兼容，nav组件已被弃用，取而代之的是新的navbar组件。虽然两者目前并存以保证向后兼容，但建议在新项目中使用navbar组件。

来源

总结

Bulma的UI组件为构建交互式界面提供了全面的工具集。通过将这些组件与适当的JavaScript功能相结合，开发者可以创建响应式、可访问且视觉一致的用户界面。组件系统的模块化特性允许在保持整个应用程序设计语言一致性的同时，轻松进行定制。