滑动以显示

允许用户滑动组件以显示其他操作。

滑动以显示组件允许您向芯片和卡片添加其他操作,尤其是在它们显示在列表中时。此组件使用户无需离开屏幕即可快速完成操作。

用户可以将芯片和卡片向左部分滑动以访问这些操作,然后点击操作以完成操作。用户还可以将芯片和卡片完全向左滑动以快速提交主要操作。

该组件为这些操作提供了 2 个插槽

  1. 主要
  2. 辅助(可选)

结构

显示的操作

开发人员可以为其独特的用例自定义操作。考虑在这些操作中使用的颜色和图标,以帮助用户了解其含义。

显示的操作在所有语言区域设置中都显示在同一侧。

  1. 主要操作
  2. 辅助操作(可选)

提交主要操作

要提交主要操作,用户可以点击按钮或继续向左滑动。这样,按钮就会扩展到屏幕的整个宽度并显示标签。操作在选中后会淡出。

第一个示例显示了**单个按钮选项**。第二个示例显示了**双按钮选项**。

撤消操作

对于破坏性操作,请添加撤消组件以允许用户撤消这些操作。将撤消功能添加到主要操作。

如果添加,则撤消芯片按钮将出现在已提交操作的位置。经过短暂的时间后,撤消操作会淡出,系统会完成已提交的操作。

滑动阈值

滑动以显示组件的行为取决于用户在屏幕上滑动的距离

  • 如果用户滑动的距离小于屏幕的 50%,则组件会弹回其起始位置,并且不会执行任何操作。
  • 如果用户滑动的距离在屏幕全宽的 50% 到 75% 之间,则组件会保持部分可见,并且会显示与组件关联的操作。
  • 如果用户滑动的距离超过屏幕的 75%,则组件会消失,并且系统会自动执行主要操作。

以下采用 Material 主题的组件实现了滑动以显示的行为

在卡片上

以下屏幕截图显示了使用SwipeToRevealCard类时滑动以显示组件的外观

在芯片上

以下屏幕截图显示了使用SwipeToRevealChip类时滑动以显示组件的外观