进度

用途

Include CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者只导入基本CSS、细节组件CSS和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/progress.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用CDN或批量程序导入？请参见安装页。

Add your progress HTML

Add class="progress" and role="progressbar" to the root. Use one child <span> as the visual indicator.

<div class="progress" role="progressbar" aria-label="Loading" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
  <span style="width: 66%"></span>
</div>

HTML 结构

<div class="progress" role="progressbar">: Progress root. Set aria-label or aria-labelledby, plus aria-valuenow, aria-valuemin, and aria-valuemax.
<span style="width: ...">: Visual indicator. Its width should match the current value.

示例

RTL

进展在根或父级上支持dir="rtl"。

تقدم الرفع ٦٦%

#进度

#用途

Include CSS

Add your progress HTML

#HTML 结构

#示例

#标签

#RTL

进度

用途

HTML 结构

示例

标签

RTL