跳至主要内容

Splitter

在 ChatGPT 中打开
Shadow dwc-splitter 24.00
Java API

Splitter组件旨在在您的应用程序中划分和调整内容大小，封装了两个可调整大小的组件：主组件和详细组件。一个分隔符分隔这些组件，使用户能够根据自己的偏好动态调整每个组件的大小。

显示代码

最小和最大大小​

Splitter组件提供了设置面板最小和最大大小的方法，让您可以控制Splitter内部组件的调整大小行为。当用户尝试将面板调整到超出指定最小或最大大小时，分隔符组件会强制执行这些约束，确保面板保持在定义的边界内。

设置大小​

setMasterMinSize(String masterMinSize)方法指定分隔符主面板的最小大小。同样，setMasterMaxSize(String masterMaxSize)方法指定主面板的最大大小。

您可以使用任何有效的CSS单位来指定大小，如下所示：

显示代码

方向​

您可以在Splitter组件中配置方向，使您能够创建符合特定设计要求的布局。通过指定方向，组件将面板水平或垂直排列，提供布局设计的多样性。

要配置方向，请使用支持的方向枚举来指定Splitter应水平或垂直渲染：

显示代码

相对位置​

要设置Splitter组件中分隔条的初始位置，请使用setPositionRelative。该方法接受一个从0到100的数字值，表示在Splitter中给定空间的百分比，并在总宽度的给定百分比处显示分隔符：

显示代码

嵌套​

分隔符嵌套允许您创建具有可调整大小面板的复杂布局。它使您能够创建具有细粒度内容排列和调整大小控制的复杂用户界面。

要嵌套Splitter组件，实例化新的Splitter实例并将其作为子组件添加到现有的Splitter组件中。这种层次结构允许创建具有灵活调整大小能力的多级布局。下面的程序演示了这一点：

显示代码

自动保存​

Splitter组件包括一个自动保存选项，该选项将面板大小的状态保存到本地存储中，以便在重新加载之间保持尺寸一致。

当您设置自动保存配置时，Splitter组件会自动将面板大小的状态存储在网页浏览器的本地存储中。这确保用户选择的面板大小在页面重新加载或浏览器会话之间保持不变，从而减少手动调整的需要。

清除状态​

要程序性地将Splitter恢复到默认设置和尺寸，请调用cleanState()方法，以从网页浏览器的本地存储中删除与Splitter组件相关的任何保存状态数据。

显示代码

在前面的演示中，每个Splitter实例通过调用setAutosave方法激活自动保存功能。这确保面板大小自动保存到本地存储。因此，当重新加载浏览器时，这些分隔符的大小保持不变。

单击“清除状态”按钮会调用cleanState()方法并刷新浏览器窗口以显示原始尺寸。

样式​

Loading...

最佳实践​

为了确保使用Splitter组件时获得最佳用户体验，请考虑以下最佳实践：

  • 根据内容调整：在决定面板的方向和初始大小时，请考虑内容的优先级。例如，在包含导航侧边栏和主内容区域的布局中，侧边栏通常应保持较窄，并设置最小大小以便于导航。

  • 战略嵌套：嵌套分隔符可以创建多功能布局，但可能会使UI复杂并影响性能。规划您的嵌套布局以确保它们直观并增强用户体验。

  • 记住用户偏好：使用自动保存功能记住用户在会话之间的调整，提升用户体验。提供一个选项，允许用户重置为默认设置。