SwipeCell 滑动操作

列表项横向滑动露出操作按钮组：默认插槽为内容层（列表项主体），slot="actions" 为操作按钮组（宿主放置 button / oas-button）。向 inline-start 方向滑动内容层即可露出 inline-end 侧的操作区，松手按位移阈值吸附开合；oas-open / oas-close 在开 / 关落定时各派发一次（程序性 open 属性变化同样派发）。同一项还可在另一侧再放一组操作（slot="actions-start"，见「双侧滑动」）——两侧同项互斥开合。

基础用法

单个滑动项：把内容放进默认插槽、操作按钮放进 slot="actions"。向左滑动（LTR）露出右侧操作区，松手吸附。

单个滑动项

向左滑动查看操作

删除

示例代码

side：actions 挂左侧（向右滑开）

actions 默认挂 inline-end 侧（LTR 右侧，左滑露出）；side="start" 改挂 inline-start 侧（LTR 左侧，向右滑开）。side 是交互侧选择、与书写方向正交——RTL 下两侧定义自动镜像（侧位与滑动方向随逻辑方向翻转）。注意：当同项放置了 slot="actions-start" 时，side 被忽略、slot="actions" 恒归 inline-end（该槽专用于单槽场景）。

side="start"：向右滑开

向右滑动查看操作

编辑

示例代码

多按钮并排

slot="actions" 可放多个按钮：组件按总宽度测量，滑开后整排露出（各自独立点击）：

编辑 + 删除双按钮

向左滑动露出两个操作

编辑删除

示例代码

双侧滑动（两侧各有操作）

同一项可同时在两侧放置操作组：slot="actions" 在 inline-end 侧（LTR 左滑露出），slot="actions-start" 在 inline-start 侧（LTR 右滑露出）。同一手势双向拖动、可跨 0 端到端切换侧；同项内互斥（仅一侧开）。open-side 属性反映当前开侧（start / end），oas-open 事件的 detail 带 { side }。

左滑删除 / 右滑归档

左滑露右侧「删除」，右滑露左侧「归档」

归档删除

示例代码

单开互斥与事件

同一 document 内同一时刻至多一个滑动项处于打开态：任一项落定开态会广播，自动关闭其他打开项。点击空白处、滚动容器或按 Esc 也会关闭当前项。下方反馈区显示最近派发的 oas-open / oas-close。

多个滑动项 + 事件反馈

项目一

编辑

项目二

编辑

项目三

删除滑动任意一项查看事件反馈

示例代码

阈值 / 禁用 / 程序开合

threshold 控制释放吸附阈值（默认 40px，位移超过即吸附到开态，否则回弹）；disabled 全禁手势；open 可读写用于受控或程序化开合（任一侧开着即为真）。程序化改 open 会派发 oas-open / oas-close；open-side 属性（或同名 property）指定/读取开哪一侧——置 open-side 与 open 即开该侧，事件 detail.side 告知是哪侧。

threshold 与 disabled

阈值 100px：需滑过更远才吸附开态

删除

禁用：手势不生效

删除

示例代码

程序开合（open）

初始 open：操作区已露出

编辑

切换 open

示例代码

键盘与无障碍

• 操作区为 role="group" 并带可访问名（i18n swipeCell.actionsLabel）；双侧时两组各自具备。
• 操作按钮在 DOM 中天然 tabbable：焦点进入对应侧操作区时自动开该侧，键盘用户无需滑动手势即可看到并操作按钮。
• 按 Esc 关闭打开项；prefers-reduced-motion 下吸附无过渡动画。
• 组件不改动内容层的角色与语义，读屏按宿主提供的结构朗读。

API

oas-swipe-cell

属性

属性	说明	类型	默认值
disabled	全禁手势	boolean	—
open	打开态（可读写；任一侧开着即为真；程序性变化派发 oas-open / oas-close）	boolean	—
open-side	当前/目标开侧：start / end；与 open 同设即开该侧，读取反映当前开侧	'' | 'start' | 'end'	—
side	actions 挂侧：end（默认，inline-end——LTR 右/RTL 左，向 inline-start 滑开）/ start（inline-start，向 inline-end 滑开——LTR 右滑）；与书写方向正交，RTL 自动镜像；同项有 actions-start 时忽略	string	end
threshold	释放吸附阈值（px）；位移超过则吸附到开态，否则回弹关	—	—

事件

事件	说明
oas-close	落定关态时派发（手势、外点、滚动、Esc 或程序性 open 变化）
oas-open	落定开态时派发（手势或程序性 open 变化），detail: { side } 告知开侧

插槽

名称	说明
默认	内容层（列表项主体）；组件不改动其语义
actions	操作按钮组（置于 inline-end 侧；role=group + aria-label）
actions-start	另一侧操作按钮组（置于 inline-start 侧，右滑露出；与 actions 同项互斥开合）

CSS 变量

CSS 变量	默认值
--oas-swipe-cell-actions-bg	var(--oas-color-bg-hover)
--oas-swipe-cell-bg	var(--oas-color-bg)
--oas-swipe-cell-offset	0px