跳至主要内容

Toolbar

在 ChatGPT 中打开
阴影 dwc-toolbar 24.12
Java API

工具栏为用户提供快速访问核心操作和导航元素的方式。webforJ Toolbar 组件是一个水平容器，可以容纳一组操作按钮、图标或其他组件。它非常适合管理页面控制，并容纳关键功能，如搜索栏或通知按钮。

组织工具栏内容​

Toolbar 以易于访问和一致的布局组织基本组件。默认情况下，它占据其父元素的整个宽度，并提供四个放置区域或 插槽 来组织组件：

  • 开始：通常包含一个 AppDrawerToggle 或一个主页按钮。
  • 标题：用于应用名称或徽标。
  • 内容：用于用户关注的操作，如搜索或导航。
  • 结束：不太频繁的操作，如用户个人资料或帮助。

每个插槽都有添加组件的方法：addToStart()、addToTitle()、addToContent() 和 addToEnd()。

以下演示展示了如何将 Toolbar 添加到 AppLayout 中，并有效利用所有支持的插槽。 要了解更多关于在 AppLayout 中实现工具栏的信息，请参见 粘性工具栏 和 移动导航布局。

显示代码

紧凑模式​

使用 setCompact(true) 来减少 Toolbar 周围的填充。这在您需要在屏幕上放入更多内容时很有帮助，尤其是在具有堆叠工具栏或空间有限的应用中。工具栏的行为仍然相同——只是高度减少。此模式通常用于头部、侧边栏或空间紧张的布局中。

Toolbar toolbar = new Toolbar();
toolbar.setCompact(true);
显示代码

ProgressBar 在工具栏中​

ProgressBar 作为正在进行的过程的视觉指示器，例如加载数据、上传文件或在流程中完成步骤。当放置在 Toolbar 中时，ProgressBar 整齐地对齐在底边，使其不显眼，同时仍清晰地向用户传达进度。

您可以将其与工具栏中的其他组件（如按钮或标签）组合，而不会干扰布局。

显示代码

样式​

主题​

Toolbar 组件包含 七种内置主题 以实现快速视觉自定义：

显示代码

Loading...