This component is structurally similar to the Progress Bar component. In fact, it is rendered using the progress bar component. The default colour used for the horizontal line graph is blue.
That’s the basic syntax for displaying a horizontal line graph but let’s look at more practical examples of how to use this component in your applications.
You can display a horizontal line graph in nine different colours by setting the color attribute on the component, like this, color="red"
.
Like most BladewindUI components that have colour options, there are two shades, faint
, and dark
. The default shade is faint
.
You can switch between shades by setting shade="dark"
or shade="faint"
The table below shows a comprehensive list of all the attributes available for the Horizontal Line Graph component.
Option | Default | Available Values |
---|---|---|
percentage | 0 | Any value between 0 and 100. |
color | primary | There are twelve colors to choose from. primary red yellow green blue pink
cyan purple gray orange
violet indigo fuchsia |
shade | faint | Works with color to determine how faint or dark the horizontal line graph colours are. faint dark |
label | blank | Label to display above the horizontal line graph. |
percentage_label_opacity | 50 | Specifies the opacity of the percentage label. In case you want the percentage label to be displayed a shade less than the label. Available values are what's been defined in the TailwindCSS docs for opacity without the 'opacity-' prefix.0 5 10 20 25 30 40 50 60 70 75 80 90 95 100
|
class | bw-horizontal-line-graph | Any additional CSS you wish to add. |
resources > views > components > bladewind > horizontal-line-graph.blade.php