الأرقام

الأرقام displays statistical data in a variety of layout patterns including pairs, splits, comparisons, and highlighted panels.

Loading demo: number-real-world

التثبيت

npx sdaia-ui@latest add number

import { Number } from "@/components/ui/number"

<Number type="stat-pair" />

إحصاءان معروضان جنباً إلى جنب.

Loading demo: number-stat-pair

إحصاءات مرتبة في قائمة جنباً إلى جنب.

Loading demo: number-stat-side-list

إحصاءات بتخطيط رأس مقسوم.

Loading demo: number-stat-header-split

إحصاءات مكدّسة في قائمة عمودية.

Loading demo: number-stat-list-stack

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

Prop	Type	Default	Required
type	'StatPair' \| 'StatHighlight' \| 'StatSplit' \| 'StatComparisonBlock' \| 'StatSideList' \| 'StatExtendedPanel' \| 'StatMixedStack' \| 'StatOptionBlock' \| 'StatDetailPair' \| 'StatInlineGroup' \| 'StatHeaderSplit' \| 'StatListStack'	—	optional
label	string	'Indicator Name'	optional
value	string	'422.61'	optional
trend	'positive' \| 'negative'	'positive'	optional
trendValue	string	'12%'	optional
label2	string	'Indicator Name'	optional
value2	string	'422.61'	optional
trend2	'positive' \| 'negative'	'negative'	optional
trendValue2	string	'12%'	optional
title	string	'Title'	optional
rows	NumberRow[]	[ { label: 'Indicator Name', value: '422.61' }, { label: 'Indicator Name', value: '422.61' }, ]	optional
menuLabel	string	'Options'	optional
onMenuClick	() => void	-	optional
onMoreClick	() => void	-	optional
className	string	-	optional