The visual color appearance of the component
Stat
As the name implies, the `Stat` component is used to display some statistics.
Props#
StatLabel,StatHelpText,StatNumbercomposes Text component.StatArrowcomposes Icon component.StatandStatGroupcomposes Box component.
colorScheme
colorSchemeDescription
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"size
sizeDescription
The size of the Stat
Type
"md"Default
mdvariant
variantDescription
The variant of the Stat
Type
stringProps#
StatLabel,StatHelpText,StatNumbercomposes Text component.StatArrowcomposes Icon component.StatandStatGroupcomposes Box component.
colorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"size
sizeDescription
The size of the Stat
Type
"md"Default
mdvariant
variantDescription
The variant of the Stat
Type
stringThe Stat component is a multipart component. The styling needs to be applied to each part specifically.
To learn more about styling multipart components, visit the Component Style page.
Anatomy#
- A:
container - B:
label - C:
helpText - D:
number - E:
icon
Theming properties#
The properties that affect the theming of the Stat component are:
size: The size of the stat. Defaults tomd.
Theming utilities#
createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyleanddefineMultiStyleConfig).definePartsStyle: a function used to create multipart style objects.defineMultiStyleConfig: a function used to define the style configuration for a multipart component.
import { statAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@fluidtruck/core'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(statAnatomy.keys)
Customizing the default theme#
import { statAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@fluidtruck/core'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(statAnatomy.keys)const baseStyle = definePartsStyle({// define the parts you're going to stylelabel: {fontWeight: 'light',color: 'red',},helpText: {},container: {},icon: {},number: {},})export const statTheme = defineMultiStyleConfig({ baseStyle })
After customizing the stat theme, we can import it in our theme file and add it
in the components property:
import { extendTheme } from '@fluidtruck/core'import { statTheme } from './components/stat.ts'export const theme = extendTheme({components: { Stat: statTheme },})
This is a crucial step to make sure that any changes that we make to the stat theme are applied.
Adding a custom size#
Let's assume we want to include new extra small stat size. Here's how we can do that:
import { statAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@fluidtruck/core'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(statAnatomy.keys)export const statTheme = defineMultiStyleConfig({sizes: {// define the styles for this size variantxs: definePartsStyle({label: { fontSize: "xs" },helpText: { fontSize: "xs" },number: { fontSize: "xs" },}),}})// Now we can use the new `xs` size<Stat size="xs" ... />
Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.
Adding a custom variant#
Let's assume we want to include a custom pill variant. Here's how we can do that:
import { statAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@fluidtruck/core'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(statAnatomy.keys)const danger = definePartsStyle({container: {background: "red.100",borderRadius: "lg",padding: "4"},helpText: {fontWeight: "bold"},label: {color: "red.500"},number: {fontStyle: "italic"}})export const statTheme = defineMultiStyleConfig({variants: { danger },})// Now we can use the new `danger` variant<Stat variant={"danger"} .../>