组件

组件架构

Bulma 中的组件遵循一致的架构模式，使用分层结构和修饰符来更改外观和行为。

来源： docs/documentation/components/navbar.html623-670

每个组件通常由以下部分组成：

容器：主包装元素（例如，navbar、card）
部分：主要的结构划分（例如，navbar-brand、navbar-menu）
子元素：部分内的特定元素（例如，navbar-item、navbar-link）

组件使用一致的命名约定，其中类名遵循 component-section-subelement 的模式。例如，在导航栏组件中，我们有 navbar-brand、navbar-menu 和 navbar-item 等类名。

通过使用 is-* 或 has-* 前缀添加修饰符，例如 is-active、is-primary 或 has-dropdown。

组件层次结构

Bulma 中的组件系统建立在清晰的层次结构之上，组件以元素作为构建块。

来源： docs/documentation/components/navbar.html22-82

这种层次结构允许通过组合更小的元素来构建复杂的 UI。例如，导航栏组件可能包含按钮、图标和表单元素，而这些本身都是 Bulma 系统中的一个元素。

常见的组件模式

Bulma 组件共享几种常见的模式和功能

1. 颜色变体

大多数组件都支持 Bulma 的颜色系统，允许您使用颜色修饰符类应用一致的样式。

颜色修饰符	描述
`is-primary`	主要品牌颜色
`is-link`	次要品牌颜色
`is-info`	信息性颜色
`is-success`	成功/积极颜色
`is-warning`	警告颜色
`is-danger`	危险/消极颜色
`is-black`	黑色
`is-dark`	深色
`is-light`	浅色
`is-white`	白色

来源： docs/documentation/elements/button.html34-46 docs/documentation/components/navbar.html1275-1286

2. 响应式行为

组件默认设计为响应式，通常为移动端和桌面端视图提供不同的布局。

视口	行为
移动端	简化、垂直堆叠的布局；通常使用切换按钮
平板	过渡性布局
桌面	功能齐全的布局

示例：导航栏在移动端折叠成汉堡菜单，而在桌面端显示完整的水平导航。

来源： docs/documentation/components/navbar.html707-708 docs/documentation/components/navbar.html783-784

3. 交互状态

组件支持交互元素的各种状态

状态管理	类	效果
悬停	`is-hovered`	鼠标悬停时的样式
重点	`is-focused`	元素获得焦点时的样式
激活	`is-active`	活动/选中状态的样式
加载	`is-loading`	显示加载指示器
已禁用	`disabled` 属性	指示非交互状态

来源： docs/documentation/elements/button.html654-667

4. 容器和内容模式

许多组件遵循容器/内容模式，其中主容器包含各种内容元素

来源： docs/documentation/components/navbar.html22-36 docs/documentation/elements/box.html40-79

核心组件

Bulma 提供了几个关键组件来构建界面

一个响应式水平导航组件，支持下拉菜单、响应式切换和对齐选项。

navbar
├── navbar-brand
│   ├── navbar-item
│   └── navbar-burger
└── navbar-menu
    ├── navbar-start
    │   └── navbar-item
    └── navbar-end
        └── navbar-item
            ├── navbar-link
            └── navbar-dropdown
                ├── navbar-item
                └── navbar-divider

来源： docs/documentation/components/navbar.html22-82 docs/documentation/components/navbar.html623-671

卡片

用于以类似卡片的格式显示内容，包含标题、内容和页脚部分。

消息

带可选标题和关闭按钮的彩色消息块。

叠加显示在页面内容之上的对话框。

可包含链接或其他交互元素的下拉菜单。

支持嵌套项的垂直导航菜单。

分页

用于内容分页的导航。

面板

用于过滤器、导航和内容排序选项的容器。

标签页

具有标签式界面功能的水平导航。

来源：基于引言中提供的系统架构图。

自定义和扩展

JavaScript 集成

Bulma 组件设计为与框架无关，不包含 JavaScript。但是，许多组件（如 Navbar、Modal、Dropdown）需要 JavaScript 来实现交互功能。该框架提供了用于 JavaScript 集成的结构性钩子。

导航栏 JavaScript 集成示例

来源： docs/documentation/components/navbar.html580-600

CSS 变量定制

组件可以使用 CSS 变量进行定制，这允许在不修改源 Sass 文件的情况下进行主题化。

类似 BEM 的命名约定

Bulma 的组件类遵循类似 BEM（块、元素、修饰符）的命名约定

块：组件本身（例如，navbar）
元素：组件的组成部分（例如，navbar-item）
修饰符：变体或状态（例如，is-active、has-dropdown）

这种结构使得在保持一致的 API 的同时，可以轻松地扩展组件以获得额外功能。

组合组件

Bulma 组件旨在协同工作，允许您将它们组合起来创建更复杂的 UI 模式

示例组合

带下拉菜单和按钮的导航栏
包含图像、内容和控制按钮的卡片
带有嵌入式标签页和表单元素的面板

来源： docs/documentation/components/navbar.html68-80 docs/documentation/elements/box.html40-79

无障碍性考量

Bulma 组件包含多项可访问性功能

ARIA 属性：navbar 等组件包含 aria-label 和 aria-expanded 属性
角色属性：为交互元素定义了语义角色
焦点管理：组件支持键盘焦点状态

来自导航栏的示例

来源： docs/documentation/components/navbar.html22-33

最佳实践

使用 Bulma 组件时

保持层次结构：遵循组件结构层次以确保样式正确
使用语义 HTML：为内容使用适当的 HTML 元素（例如，<nav> 用于导航栏）
响应式考虑：跨不同屏幕尺寸测试组件
JavaScript 分离：将 JavaScript 行为与 CSS 样式分开
可访问性：为交互式组件包含适当的 ARIA 属性

遵循这些指南，您可以有效地使用 Bulma 的组件系统来创建一致、可维护的用户界面。

组件