المقياس

يعرض المقياس مؤشر أداء رئيسياً مع منطقة إجراءات ونوع واتجاه وتصوير رسم بياني قابلة للتهيئة.

Loading demo: metric-real-world

التثبيت

npx sdaia-ui@latest add metric

import { Metric } from "@/components/ui/metric"

<Metric action="default" type="compact" trend="badge" />

بطاقة مقياس بسيطة تعرض قيمة وتسمية بتخطيط مدمج.

Loading demo: metric-compact

بطاقة المقياس مع أيقونة تُعرض على يسار القيمة.

Loading demo: metric-icon-left

بطاقة المقياس مع أيقونة توضع فوق القيمة.

Loading demo: metric-icon-top

بطاقة المقياس تجمع أيقونة يسارية مع تسمية نصية وصفية.

Loading demo: metric-icon-left-text

خصائص مكوّن Metric.

Prop	Type	Default	Required
action	'Default' \| 'Footer' \| 'Header'	'Default'	optional
type	'Compact' \| 'Icon Left' \| 'Icon Top' \| 'Icon Left + Text'	'Compact'	optional
trend	'None' \| 'Badge' \| 'Text'	'None'	optional
graph	'None' \| 'Compact' \| 'Large'	'None'	optional
chartTrend	'Positive' \| 'Negative'	'Positive'	optional
label	string	'View 24 hours'	optional
value	string	'2,000'	optional
trendValue	string	'100%'	optional
trendLabel	string	'vs last month'	optional
actionLabel	string	"View report"	optional
onAction	() => void	-	optional
onMoreOptions	() => void	-	optional