@maggioli-design-system/mds-benchmark-bar

mds-benchmark-bar

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

Property	Attribute	Description	Type	Default
alias	alias	An alias to custom how value is represented	string | undefined	undefined
typography	typography	The typography of the component	"label" | "option" | undefined	'label'
value	value	A value between 0 and 100 that rapresents the benchmark	number	0
variant	variant	Sets the theme variant colors	"ai" | "dark" | "error" | "info" | "light" | "primary" | "success" | "warning" | undefined	'dark'

Slots

Slot	Description
"default"	Add text string to this slot, avoid to add HTML elements or components here.

Dependencies

Depends on

• mds-text
• mds-progress

Graph

graph TD;
  mds-benchmark-bar --> mds-text
  mds-benchmark-bar --> mds-progress
  style mds-benchmark-bar fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department