允许用户滑动组件以显示更多操作。
滑动以显示组件允许您为卡片式按钮和卡片添加额外操作,尤其是在它们出现在列表中的时候。借助此组件,用户无需离开屏幕即可快速完成操作。
用户可以向左部分滑动卡片式按钮和卡片以访问这些操作,然后点按某个操作即可完成。用户还可以向左完全滑动卡片式按钮和卡片,以便快速执行主要操作。
此组件包含以下操作的 2 个槽位:
- 主要
- 次要(可选)
组成
显示的操作
开发者可以根据其独特的用例自定义操作。请考虑这些操作中使用的颜色和图标,以帮助用户理解其含义。
对于所有语言区域,显示的操作都会出现在同一侧。
- 主要操作
- 次要操作(可选)
执行主要操作
要执行主要操作,用户可以点按该按钮或继续向左滑动。这样,按钮会扩展到屏幕的整个宽度并显示一个标签。选定后,该操作会淡出。
第一个示例显示了单个按钮选项。第二个示例显示了双按钮选项。
撤消操作
对于破坏性操作,请添加撤消组件,以便用户反向执行这些操作。为主要操作添加撤消功能。
如果添加了撤消功能,则会在已执行的操作处显示一个撤消卡片式按钮。片刻后,撤消操作会淡出,系统会完成已执行的操作。
滑动阈值
滑动以显示组件的行为取决于用户在屏幕上滑动的距离
- 如果用户滑动的距离小于屏幕宽度的 50%,组件会弹回其起始位置,并且不会执行任何操作。
- 如果用户滑动的距离介于屏幕总宽度的 50% 到 75% 之间,组件会保持部分可见,并且会显示与该组件关联的操作。
- 如果用户滑动的距离超过屏幕宽度的 75%,组件会消失,系统会自动执行主要操作。
相关组件
以下 Material 主题组件实现了滑动以显示行为:
在卡片上
以下屏幕截图显示了使用 SwipeToRevealCard
类时滑动以显示组件的外观:
在卡片式按钮上
以下屏幕截图显示了使用 SwipeToRevealChip
类时滑动以显示组件的外观: