41 lines
932 B
Plaintext
41 lines
932 B
Plaintext
component StatsBar {
|
|
props {
|
|
items = []
|
|
columns = 4
|
|
compact = true
|
|
dividers = true
|
|
icons = true
|
|
size = "default"
|
|
color = "primary"
|
|
variant = "raised"
|
|
maxWidth = "xl"
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<Section
|
|
spacing='{compact ? "sm" : "md"}'
|
|
variant='{variant}'
|
|
color='{color}'
|
|
maxWidth='{maxWidth}'
|
|
borderTop="true"
|
|
borderBottom="true"
|
|
class='{class}'
|
|
>
|
|
<div data-ui-component="StatsBar">
|
|
<MetricGrid
|
|
items='{items.map((item) => ({ ...item, icon: icons ? item.icon : "", variant: "minimal", size: compact ? "sm" : size }))}'
|
|
columns='{columns}'
|
|
tabletColumns="2"
|
|
mobileColumns="1"
|
|
gap='{compact ? "sm" : "md"}'
|
|
dividers='{dividers}'
|
|
size='{compact ? "sm" : size}'
|
|
color='{color}'
|
|
variant="minimal"
|
|
/>
|
|
</div>
|
|
</Section>
|
|
}
|
|
}
|