Skip to content

ActionBar 操作栏 ​

底部命令条 + 读数井(容器 role="group" + aria-label):命令按钮组 + 统计/任务进度/媒体运输/音乐节奏读数井,三表体(charcoal/dark/light)。与 oas-toolbar(工具调色板)的分工——action-bar 是底部命令 + 读数,读数井是 toolbar 没有的词汇;因 center 槽常规承载读数井(progressbar 等读数区非命令控件),容器不作 toolbar 角色承诺(其 roving 方向键导航契约以纯命令集合为前提),降级 group 诚实播报,命令按钮各自原生 Tab 可达。

基础用法 ​

slot="start" / 默认插槽放命令按钮(oas-action-bar-button),slot="center" 放读数井(oas-action-bar-well 容器 + oas-statistic-well / oas-task-progress-well / oas-transport-well / oas-music-well),slot="end" 放末端内容。

命令按钮 + 统计读数井

Snap标记点 · 3Stereo48 kHz

命令按钮(oas-action / active / plain) ​

点击派发 oas-action(detail { value, active }——active 为点击时刻状态);active 布尔属性是选中态(受控显示,宿主监听事件回写);active-tint 自定义高亮色(11 预设名或任意色值,如录音红);plain 组内无填充。

录制按钮(active-tint 录音红)与切换反馈

● 录制SoloMute

点「录制」观察 oas-action 反馈与 active 态切换(宿主回写演示)。

表体(theme) ​

theme="charcoal"(默认,恒深表面)/ "dark"(恒深·深档)/ "light"(主题本色)三表体;恒深表面走 --oas-color-ink* 语义 token,不随宿主主题翻转(transport 条视觉锚点)。

三表体对照

播放播放播放

任务进度井(oas-task-progress-well) ​

label / progress(0-100,受控显示——宿主驱动)/ detail;取消钮派发 oas-cancel(detail { label },组件只发事件不移除自身,宿主决定后续);进度到 100 保留完成态。

全空态(label/detail 全缺且未设 progress)整体退场(宿主 data-empty 反射、无布局足迹,同 oas-statistic-well)——无任务时不占胶囊。

导出任务进度 + 取消

导出

点井内 × 观察 oas-cancel 反馈;「导出」按钮驱动进度增长。

媒体运输井(oas-transport-well) ​

frames(当前帧,受控显示——键盘 seek 只发事件,宿主回写)/ frame-rate(fps,时间码换算基准)/ duration(总帧数,可选——决定「/总时长」段与 seek 上界)/ label / detail。时间码显示 HH:MM:SS:FF(纯展示换算,不做 drop-frame/播放时钟);时间码即 scrub 滑轨(role="slider",可访问名 label > 内置文案):聚焦后 ←/→ ±1 帧、↑/↓ ±1 秒、Home/End 首/尾帧,每次派发 oas-seek(detail { frames },提议值已 clamp [0, duration])。

全空态(label/frames/frame-rate/duration/detail 全缺)整体退场(宿主 data-empty 反射、无布局足迹,同 oas-statistic-well)。

时间码 scrub(键盘 seek,宿主回写)

播放Snap

Tab 聚焦时间码后按 ←/→(±1 帧)、↑/↓(±1 秒)、Home/End(首/尾帧),观察 oas-seek 与时间码推进(宿主回写演示)。

音乐节奏井(oas-music-well) ​

bars / beats(当前小节 / 节拍,1 起,共同决定「小节.节拍」位置段)/ tempo(BPM)/ meter(拍号,原样显示)/ label / detail;纯读数(无交互、无事件——节奏位置由宿主驱动显示,井不做节拍时钟);detail 段自动拼接 {tempo} BPM · {meter} · {detail}。

全空态(六属性全缺)整体退场(零布局足迹,同 oas-statistic-well)。

节奏位置读数

节拍器48 kHz

RTL ​

容器 dir="rtl" 下组件自动镜像:data-rtl 钩子 + 全逻辑属性布局(井区 auto margin 推远端随书写方向镜像)。

RTL 镜像

تشغيل

API ​

oas-action-bar ​

属性 ​

属性说明类型默认值
theme表体:charcoal(默认,恒深表面)/ dark(恒深·深档)/ light(主题本色);恒深表面走 --oas-color-ink* 语义 token,不随宿主主题翻转;非法值回落 charcoal 并告警一次(同值去重)stringcharcoal

插槽 ​

名称说明
默认命令区(oas-action-bar-button 或任意命令控件)
center读数井区(oas-action-bar-well + 井子件;自动推到书写方向远端)
end末端区
start前部命令区

CSS 变量 ​

CSS 变量默认值
--oas-action-bar-bgvar(--oas-color-ink)
--oas-action-bar-fgvar(--oas-color-on-ink)
--oas-action-bar-height44px

oas-transport-well ​

属性 ​

属性说明类型默认值
detail补充信息(分辨率/色彩空间等,与自动帧率文本拼段;空时隐藏)string—
duration总帧数(可选——决定「/总时长」段、seek 上界与 aria-valuemax)string—
frame-rate帧率 fps(时间码换算基准;缺省/非法时时间码退化为原始帧数显示)string—
frames当前帧(受控显示——键盘 seek 只发事件,宿主回写驱动读数推进;非法回落 0、负值 clamp 0、超 duration 压到尾帧)string—
label读数标签(空时隐藏)string—

事件 ​

事件说明
oas-seek键盘 seek(←/→ ±1 帧、↑/↓ ±1 秒、Home/End 首/尾帧,RTL 镜像水平方向)时派发;detail { frames }(提议值已 clamp);受控显示——组件不自改 frames,宿主回写

CSS 变量 ​

CSS 变量默认值
--oas-action-bar-well-bgcolor-mix(in srgb, var(--oas-color-on-ink) 10%, transparent)
--oas-action-bar-well-height32px

oas-music-well ​

属性 ​

属性说明类型默认值
bars当前小节(1 起;与 beats 共同决定「小节.节拍」位置段,双缺整段隐藏)string1
beats当前节拍(1 起;与 bars 共同决定「小节.节拍」位置段,双缺整段隐藏)string1
detail补充信息(与自动 BPM/拍号文本拼段;空时隐藏)string—
label读数标签(空时隐藏)string—
meter拍号(如 4/4,原样显示;空时隐藏)string—
tempo速度 BPM(非法值忽略该段)string—

CSS 变量 ​

CSS 变量默认值
--oas-action-bar-well-bgcolor-mix(in srgb, var(--oas-color-on-ink) 10%, transparent)
--oas-action-bar-well-height32px

基于 MIT OR Apache-2.0 双许可发布