The stat component is a great way to visualize statistics in a clean and concise way.
- Example Price
- $25
- The price of the item.
rc.stat(
rc.stat_label("Example Price"),
rc.stat_number("$25"),
rc.stat_help_text("The price of the item."),
)
Example of a stats in a group with arrow.
- $250
- %50increased by
- £100
- %50decreased by
rc.stat_group(
rc.stat(
rc.stat_number("$250"),
rc.stat_help_text(
"%50", rc.stat_arrow(type_="increase")
),
),
rc.stat(
rc.stat_number("£100"),
rc.stat_help_text(
"%50", rc.stat_arrow(type_="decrease")
),
),
width="100%",
)
rc.Stat
The Stat component is used to display some statistics. It can take in a label, a number and a help text.
Props
No component specific props
Event Triggers
See the full list of default event triggersrc.StatLabel
A stat label component.
Props
No component specific props
Event Triggers
See the full list of default event triggersrc.StatNumber
The stat to display.
Props
No component specific props
Event Triggers
See the full list of default event triggersrc.StatHelpText
A helper text to display under the stat.
Props
No component specific props
Event Triggers
See the full list of default event triggersrc.StatArrow
A stat arrow component indicating the direction of change.
Event Triggers
See the full list of default event triggersrc.StatGroup
A stat group component to evenly space out the stats.
Props
No component specific props