Drawer
Drawer
组件在 webforJ 中创建一个从屏幕边缘滑出的面板,显示额外内容而不离开当前视图。它通常用于侧边导航、过滤菜单、用户设置或需要临时出现的紧凑通知,而不会干扰主界面。
当多个 Drawers
打开时,它们会自动堆叠,使其成为空间受限界面的灵活选择。
下面的示例展示了这种行为在 AppLayout
组件中的效果。通过汉堡菜单触发的导航抽屉集成在 AppLayout
中,而底部的欢迎弹出窗口使用独立的 Drawer
实例。两者共存并独立堆叠,展示了 Drawers
如何在布局组件中集成或作为独立元素使用。
显示代码
- Java
- CSS
Autofocus
Drawer
组件支持自动聚焦,当 Drawer
打开时,会自动将焦点设置到第一个可聚焦元素。这通过直接将注意力集中在第一个可操作元素上,提高了可用性。
显示代码
- Java
Label
setLabel()
方法可以提供对 Drawer
内部内容的有意义描述。当设置了标签后,辅助技术如屏幕阅读器可以宣读它,帮助用户在未查看其视觉内容的情况下理解 Drawer
的用途。
Drawer drawer = new Drawer();
drawer.setLabel("任务管理器");
使用简洁且描述性强的标签来反映 Drawer
的用途。当更具体的名称可以使用时,避免使用“菜单”或“面板”等通用术语。
Size
要控制 Drawer
的大小,请为 CSS 自定义属性 --dwc-drawer-size
设置值。这将设置 Drawer
左/右放置的宽度或上下放置的高度。
您可以使用任何有效的 CSS 单位来定义该值,例如百分比、像素或 vw/vh,使用 Java 或 CSS:
// Java
drawer.setStyle("--dwc-drawer-size", "40%");
/* CSS */
dwc-drawer {
--dwc-drawer-size: 40%;
}
要防止 Drawer
变得过大,请结合使用 --dwc-drawer-max-size
:
// Java
drawer.setStyle("--dwc-drawer-size", "40%");
drawer.setStyle("--dwc-drawer-max-size", "800px");
/* CSS */
dwc-drawer {
--dwc-drawer-size: 40%;
--dwc-drawer-max-size: 800px;
}
Placement
setPlacement()
方法控制 Drawer
在视口中的出现位置。
可用的放置选项:
- 顶部: 将抽屉放置在视口的顶部边缘。
- 顶部中心: 将抽屉水平居中对齐于视口的顶部。
- 底部: 将抽屉放置在视口的底部。
- 底部中心: 将抽屉水平居中于视口底部。
- 左侧: 将抽屉沿视口的左边缘放置。
- 右侧: 将抽屉沿视口的右边缘放置。
显示代码
- Java
事件处理
Drawer
组件会发出生命周期事件,可用于在其开启或关闭状态变化时触发应用逻辑。
支持的事件:
DrawerOpenEvent
: 在抽屉完全打开时触发。DrawerCloseEvent
: 在抽屉完全关闭时触发。
您可以向这些事件附加监听器,以在 Drawer
状态变化时运行逻辑。
Drawer drawer = new Drawer();
drawer.addOpenListener(e -> {
// 处理抽屉打开事件
});
drawer.addCloseListener(e -> {
// 处理抽屉关闭事件
});
示例:联系人选择器
Drawer
组件在不干扰当前视图的情况下提供额外内容。此示例在底部中心放置一个抽屉,包含一个可滚动的联系人列表。
每个联系人显示一个头像、姓名、位置和用于快速访问详细信息或通信的操作按钮。这种方法非常适合构建紧凑的工具,如联系人选择器、设置面板或通知。
显示代码
- Java
- CSS
示例:任务管理器
此示例使用 Drawer
作为任务管理器。您可以添加任务、检查它们,并清除已完成的任务。Drawer
底部包括与任务列表交互的表单控件,且“添加任务” Button
在达到 50 个任务时会禁用自己。
显示代码
- Java