@fiscozen/ 进步

Vue 3应用程序的进步指标,包括动画加载自旋器和可自定义范围的视觉进步条.

特征

• 正在装入自旋器: 用于装入状态的动画自旋器组件
• 进度栏: 具有自定义分/最大范围的视觉进度指标
• 自定义范围: 支持负值和自定义范围(例如 -15至50)
• 平滑过渡: 更新进度栏的 CSS 转换
• 无障碍页:1 AA 符合 ARIA 属性
• 类型脚本: 具有类型脚本定义的完整类型安全

安装

npm install @fiscozen/progress

构成部分

此套件输出两个组件:

• FzProgress - 动画装入自旋器指示器
• FzProgressBar - 显示百分比的视觉进步栏

基本用途

Fz 进展

<script setup lang="ts">
import { FzProgress } from '@fiscozen/progress'
</script>

<template>
  <FzProgress />
</template>

Fz 进展栏

<script setup lang="ts">
import { FzProgressBar } from '@fiscozen/progress'
</script>

<template>
  <FzProgressBar :current="50" />
</template>

Fz 进展

带有自定义大小

<template>
  <FzProgress size="sm" />
  <FzProgress size="lg" />
  <FzProgress size="xl" />
</template>

Fz 进展栏

基本进展

<template>
  <!-- 0% -->
  <FzProgressBar :current="0" />
  
  <!-- 50% -->
  <FzProgressBar :current="50" />
  
  <!-- 100% -->
  <FzProgressBar :current="100" />
</template>

自定义范围

<template>
  <!-- Range from -15 to 50, current value 30 -->
  <FzProgressBar :current="30" :min="-15" :max="50" />
  
  <!-- Range from 0 to 200, current value 150 -->
  <FzProgressBar :current="150" :min="0" :max="200" />
</template>

自定义标签

<template>
  <FzProgressBar
    :current="75"
    label="Caricamento file"
  />
</template>

带有值的背景进展

<template>
  <FzProgressBar
    :current="3"
    :max="10"
    label="Caricamento file"
    valueText="Caricamento file 3 di 10"
  />
</template>

自定义大小

<template>
  <!-- Small size -->
  <FzProgressBar :current="50" size="sm" />
  
  <!-- Medium size (default) -->
  <FzProgressBar :current="50" size="md" />
</template>

自定义颜色

<template>
  <!-- Purple (default) -->
  <FzProgressBar :current="50" color="purple" />
  
  <!-- Blue -->
  <FzProgressBar :current="50" color="blue" />
  
  <!-- Orange -->
  <FzProgressBar :current="50" color="orange" />
  
  <!-- Pink -->
  <FzProgressBar :current="50" color="pink" />
  
  <!-- Yellow -->
  <FzProgressBar :current="50" color="yellow" />
  
  <!-- Grey -->
  <FzProgressBar :current="50" color="grey" />
  
  <!-- Red (semantic error) -->
  <FzProgressBar :current="50" color="red" />
</template>

道具

Fz 进步道具

Fz 进步栏道具

行为和概念

进度计算

进度栏计算 current 数值 [min, max] 范围 :

percentage = ((current - min) / (max - min)) * 100

CSS宽度在0%至100%之间.

实例:

• current=50, min=0, max=100 → 50%
• current=30, min=-15, max=50 → (30 - (-15)) / (50 - (-15)) * 100 = 69%
• current=-10, min=0, max=100 → 0% (尖叫声)
• current=150, min=0, max=100 → 100% (尖叫声)

自定义范围

该组件支持自定义范围,包括负值:

<template>
  <!-- Temperature range: -25°C to 75°C, current 0°C -->
  <FzProgressBar
    :current="0"
    :min="-25"
    :max="75"
    label="Temperatura"
  />
  <!-- Result: (0 - (-25)) / (75 - (-25)) * 100 = 25% -->
</template>

无障碍

Fz 进展

• 包装器有 role="status" (隐含) aria-live="polite"),所以屏幕阅读器在旋转器进入DOM时宣布装载状态
• aria-label 默认为 'Caricamento…',通过 label 道具,并被镜像为偏好文本内容的屏幕阅读器所隐藏的图像文本
• 动画在 @media (prefers-reduced-motion: reduce) 遵守《保护所有人免受强迫失踪公约》
• 消费者指导: 切换旋转器应设置的容器 aria-busy="true" 在装入时, 因此周围的内容标记为尚未准备好 。 示例

  <div :aria-busy="loading">
    <FzProgress v-if="loading" />
    <slot v-else />
  </div>
  

Fz 进展栏

遵循WCAG 2.1 AA,包括:

• ARIA 属性数字 :
  • role="progressbar" 对于语义意义
  • aria-valuenow 带有当前值(为 NaN/ Infinity 系统化)
  • aria-valuemin 最小值
  • aria-valuemax 最大值
  • aria-label 从 label 屏幕阅读器描述的道具
  • aria-valuetext 从可选 valueText 可读环境进展道具
• 减少动议: 使用宽度过渡 motion-safe: 尾风公用设备,所以自动禁用 prefers-reduced-motion: reduce (世界会计学咨询小组2.3.3)
• 屏幕阅读器支持: 进度值和背景描述在浏览进度栏时可以访问
• 键盘导航: 进步栏可以通过键盘访问(虽然不是交互式的)

未来的增强(最好有)

当真正的消费者需要这些产品时,这些产品被故意排除在目前的API之外,并追踪到将来的少量释放:

• 不确定状态 FzProgressBar ——通过动画条纹,行走填充,或脉冲来表达"进展未知"的方法 aria-valuenow 省略(按ARIA APG计算)。 将作为添加剂添加 indeterminate?: boolean 需要的时候做道具.

页:1

为什么Div 代替 HTML 进步元素 ?

我们用 div 元素代替 HTML <progress> 用于更好的 CSS 交叉浏览器兼容性的元素。 进度元素需要特定浏览器的伪元素(::-webkit-progress-bar, (中文(简体) ), ::-moz-progress-bar),这在浏览器之间可能不一致,与Tailwind CSS的风格更难.

相关构成部分

• 福兹康: Fz 进步在内部用于图标渲染