For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/components/status-bar.md.
  • 简体中文
  • next
  • 状态栏

    状态栏持续展示文档状态、视图控件与缩放信息,同时避免与工作区主操作争夺注意力。

    Live previewHTML · CSS · JavaScript

    文档画布

    第 1 页,共 12 页132 字已保存

    90%

    Usage

    <footer class="status-bar" aria-label="文档状态">
      <div data-status-info><span data-status-priority="low">第 1 页,共 12 页</span><span>已保存</span></div>
      <div data-status-actions>...</div>
    </footer>

    Parameters

    参数必填用途
    data-status-info可伸缩的资源与保存状态信息
    data-status-actions视图、缩放或导航控件
    data-status-priority="low"低于 30rem 时隐藏非必要状态项
    --status-bar-height状态栏高度,默认 1.75rem

    States and variants

    状态文案应简短且稳定。默认 28 像素状态栏使用固定 flex 基准,使其始终贴合工作区边缘,不会被内部控件撑高。为可舍弃的上下文添加 data-status-priority="low",让窄屏优先保留保存状态与操作区。临时保存或校验状态使用语义色,视图模式控件使用 aria-pressed

    Accessibility

    页面包含多个页脚地标时,应为状态栏提供名称。每个滑块和图标按钮都需要无障碍名称;异步保存失败应通过独立实时区域播报。