شريط التقدم Progress

تصوّر تقدّم المهمة. شكلان خطّي ودائري، يدعمان تلوين الحالات، ودالة لون مخصّصة، وتنسيق النص.

شريط التقدم

<template>
  <div class="demo-col">
    <p class="demo-note">line خطّي</p>
    <LhProgress :percentage="30" />
    <LhProgress :percentage="70" status="success" />
    <LhProgress :percentage="45" status="warning" />
    <LhProgress :percentage="20" status="danger" />
    <LhProgress :percentage="60" :stroke-width="20" :format="fmt" />
    <LhProgress :percentage="100" :show-text="false" />
    <p class="demo-note">circle دائري (يتحكم width في حجم اللوحة، و strokeWidth في سماكة الخط)</p>
    <div class="demo-row" style="gap: 32px; flex-wrap: wrap">
      <LhProgress type="circle" :percentage="75" />
      <LhProgress type="circle" :percentage="40" :width="120" :stroke-width="14" status="warning" />
      <LhProgress type="circle" :percentage="100" status="success" :format="fmt" />
    </div>
    <p class="demo-note">color سلسلة نصية أو دالة تُرجع لوناً حسب النسبة المئوية</p>
    <LhProgress :percentage="percent" :color="colorFn" />
    <LhButton size="small" @click="bump">{{ percent >= 100 ? 'إعادة ضبط' : '+10' }}</LhButton>
  </div>
</template>

<script>
export default {
  data: () => ({
    percent: 30,
  }),
  methods: {
    fmt(p) {
      return `${p / 10} من 10`
    },
    colorFn(p) {
      if (p < 40) return 'var(--lh-danger-color)'
      if (p < 80) return 'var(--lh-warning-color)'
      return 'var(--lh-success-color)'
    },
    bump() {
      this.percent = this.percent >= 100 ? 0 : this.percent + 10
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
percentage	نسبة التقدّم 0-100 (تُحصر تلقائياً عند تجاوزها)	number	—
type	النوع	'line' \| 'circle'	'line'
status	تلوين الحالة	'default' \| 'success' \| 'warning' \| 'danger'	'default'
color	لون شريط التقدم: سلسلة نصية أو دالة تُرجع لوناً حسب النسبة المئوية	string \| ((percentage: number) => string)	—
strokeWidth	سماكة الخط px (الارتفاع في line، وسماكة الخط في circle)	number	—
width	عرض اللوحة في الوضع الدائري px	number	—
showText	هل يُعرض نص التقدّم	boolean	true
format	تنسيق مخصّص للنص	(percentage: number) => string	—
sx	خصائص تخطيط سريعة عبر sx	—	—