Tuff
|Docs
Components/Progress

Progress

Lightweight wrapper around TxProgressBar for standard linear progress rows.

VerifiedSince 0.3.4

Usage

Progress States

Loading demo...

Progress Row

Loading demo...

Custom Text Formatting

<template>
  <TuffProgress :percentage="42" :format="value => `Done ${value}%`" />
</template>

Indeterminate Progress

<template>
  <TuffProgress indeterminate :percentage="60" :show-text="false" />
</template>

For unknown-duration work, prefer an indeterminate state instead of showing a fake percentage.

Best Practices

  • Use TuffProgress for simple rows where the legacy public name and compact API are enough.
  • Use TxProgressBar directly for segments, tooltip, messages, loading/success/error booleans, flow effects, or custom text placement.
  • Keep strokeWidth modest; this wrapper is intended for row-level progress, not hero metrics.
  • Do not show stale percentages for unknown work. Use indeterminate and hide text unless you can provide a trustworthy value.
  • Pair progress with a concise status label when the surrounding UI needs operational context.

API Reference

Props

PropTypeDefaultDescription
percentagenumber0Determinate progress value forwarded to TxProgressBar.
status'success' | 'error' | 'warning' | ''''Visual status tone forwarded to TxProgressBar.
strokeWidthnumber6Bar height in pixels.
showTextbooleantrueShows outside progress text.
indeterminatebooleanfalseEnables indeterminate progress mode.
format(percentage: number) => string-Custom formatter for displayed determinate text.

Events

TuffProgress does not emit component events. Observe progress changes in the host task state and update props.

Slots

TuffProgress does not expose slots. Use format for text customization, or use TxProgressBar directly when the layout needs custom content.

Overview

  • TuffProgress renders TxProgressBar and does not add its own wrapper DOM.
  • percentage, status, indeterminate, showText, and format are forwarded directly.
  • strokeWidth is converted to a CSS height string such as "6px" and passed as height.
  • Text placement is fixed to outside.
  • The underlying bar uses maskVariant="plain"; the track follows TxProgressBar's default styling (flat rimless track, gradient fill).
  • Determinate progress exposes role="progressbar" and aria-valuenow through TxProgressBar.
  • Indeterminate progress omits aria-valuenow and applies the progress-bar indeterminate class.
  • The install entry registers the component name TuffProgress.

Technologies

  • Source: packages/tuffex/packages/components/src/progress/src/TxProgress.vue confirms the wrapper renders TxProgressBar directly and maps strokeWidth to height.
  • Verified coverage: Coverage: packages/tuffex/packages/components/src/progress/__tests__/progress.test.ts covers forwarded status, custom formatting, strokeWidth, hidden text, and indeterminate ARIA behavior.
  • Export: packages/tuffex/packages/components/src/progress/index.ts registers the public component name TuffProgress.
查看源码
packages/tuffex/packages/components/src/progress/index.ts