按用途
选择一个分组，然后选择一个组件。每个磁贴都会打开文档中该组件的专属页面。
布局
屏幕框架：应用外壳、工具栏、弹性布局和列布局、分隔窗格及表面。
8 个组件
表单和输入框
用户输入、选择或上传的所有内容，包括文本、数字、日期、输入掩码、列表和文件。
20 个组件
TextField用于输入和编辑文本的单行输入框。
MaskedTextField将文本限制为特定格式，例如电话号码。
NumberField带有数值增减控件的数字输入框。
MaskedNumberField强制采用数字格式，例如货币或百分比。
PasswordField用于隐藏密码的单行输入框。
DateField输入框中的浏览器原生日期选择器。
MaskedDateField强制使用指定日期格式的日期输入框
TimeField输入框中的浏览器端时间选择器
MaskedTimeField强制使用指定时间格式的时间输入框。
DateTimeField在一个输入框中选择日期和时间。
ColorField输入框中的浏览器端颜色选择器
TextArea用于输入较大文本块的多行输入框。
CheckBox可在选中和未选中状态间切换的选项。
RadioButton从一组互斥选项中选择一项。
Switch通过滑动在两种状态间切换，例如开/关。
ChoiceBox预设选项的下拉列表。
ComboBox与可编辑文本输入框组合的下拉列表
ListBox可滚动列表，可选择一个或多个项目。
Slider沿轨道拖动滑块以选择范围内的值。
Upload支持拖放、筛选和单文件事件的内联文件选择器。
数据和内容
显示记录、层级结构、图表和流式文本，并在用户滚动时加载更多内容。
8 个组件
导航和操作
在视图和版块间切换、翻阅数据并触发后续操作。
6 个组件
反馈与对话框
告知用户当前情况，请他们确认，并收集一个值、文件或登录信息。
12 个组件
Toast自动消失的非阻塞通知。
Alert以醒目格式显示重要消息或警告。
DesktopNotification通过浏览器 Notification API 自定义桌面通知。
ProgressBar随任务进度填充 的进度条。
BusyIndicator用于指示应用级全局进程正在进行的状态提示。
Loading单个父组件范围内的加载指示器
Spinner显示操作正在进行的旋转动画。
MessageDialog用户点击“确定”确认的信息提示。
ConfirmDialog提示用户确认或取消操作。
InputDialog提示用户输入一个值，并提供“确定”和“取消”选项。
FileUploadDialog从本地文件系统上传文件到应用。
Login预置的登录界面，包含用户名、密码和提交按钮。
组合
您自己的组件， 基于我们的成果构建而成。
webforJ采用组合而非继承。你无需扩展 Button，而是编写一个扩展 Composite 的类，在其中组合组件，并决定应用的其他部分可以访问哪些方法。
public class SearchBar extends Composite<FlexLayout> {
private final FlexLayout self = getBoundComponent();
private TextField searchField;
private Button searchButton;
public SearchBar() {
searchField = new TextField("Search");
searchButton = new Button("Go");
self.setDirection(FlexDirection.ROW)
.add(searchField, searchButton);
}
}
一个类，一个单元。
Composite封装单个已绑定组件并承载其内部结构，因此搜索栏、地址表单或整个仪表板卡片都可成为可复用的类。API 由您选择。
调用方只能看到您公开的方法，而继承会暴露所有内容。
内置组件保持完整。
内置组件是 final 的，可确保底层 Web Component 保持一致且可预测。你的行为逻辑应围绕它们构建，而不是嵌入其中。
集合之外
不在集合中？ 在网页上使用任意组件。
业务组件是起点，而不是终点。每个 HTML 元素都是一个 Java 类，任何 Web 组件都可以成为 Java 类。
你的设计系统
有自己的设计系统吗？ 把它带上。
webforJ 组件是可选方案，并非必需。如果你的设计系统以 web components 形式提供，只需封装一次，就能用 Java 构建整个应用。
- 01
包裹组件
ElementComposite将每个自定义元素转换为 Java 类，并通过 Java API 暴露其属性、特性和事件。 - 02
将它们打包为一个模块
前端打包器允许类声明所需的 npm 包，因此封装组件会自带其设计系统。应用只需添加依赖项。
- 03
照常构建应用
路由、安全性和数据绑定的工作方式相同。实现
ValueAware的包装组件与任何内置字段一样绑定到您的模型。
在 Java 中使用
组件是一个对象 你使用 new 创建。
您可以通过类型化方法设置其状态，使用 lambda 监听其事件，并将其添加到容器中。界面由 Java 代码构建，无需维护同步的模板。
FlexLayout container = new FlexLayout();
container.add(new Button("Click Me"));
TextField nameField = new TextField("Name");
TextField emailField = new TextField("Email");
Button submitButton = new Button("Submit");
container.add(nameField, emailField, submitButton);
// Reveal an additional field when a checkbox is checked
TextField advancedField = new TextField("Advanced setting");
advancedField.setVisible(false);
CheckBox enableAdvanced = new CheckBox("Show advanced settings");
enableAdvanced.addValueChangeListener(e -> advancedField.setVisible(e.getValue()));
// Enable a button only when the required field has a value
Button submitButton = new Button("Submit");
submitButton.setEnabled(false);
TextField nameField = new TextField("Name");
nameField.addValueChangeListener(e -> submitButton.setEnabled(!e.getValue().isBlank()));
主题设置
一个设计系统 每个组件背后
webforJ 内置名为 DWC 的设计系统。其 CSS 变量（设计令牌）涵盖颜色、排版、边框和间距，所有组件都会读取这些变量。更改令牌后，所有使用它的组件都会随之更新。
浅色主题下的相同字段、按钮、开关、徽章和进度条。
light默认样式。浅色背景，带有淡淡的主色调。深色主题下的相同字段、按钮、开关、徽章和进度条。
dark深色背景，点缀淡淡的主色调。内置三种主题
light、dark 和 dark-pure（移除主色调，改用纯中性灰）。可通过 App.setTheme() 在运行时切换，无需重新构建。
跟随操作系统
注册浅色和深色主题，并传入 "system"。webforJ 会选择符合用户偏好的主题，并在偏好变化时自动切换。
@AppTheme("system")
@AppLightTheme("light")
@AppDarkTheme("dark")
class MyApp extends App {
// app code
}
用少量令牌重新塑造品牌
覆盖内置主题的种子令牌，让所有组件焕然一新。令牌不足时，可通过 Shadow Parts 深入组件内部。
:root {
--dwc-color-primary-seed: #6366f1;
--dwc-font-size: var(--dwc-font-size-l);
}