indicator
Displays a label on a red-to-green scale at a specific position.
The min value can be greater than the max value.
The value will be maintained between min and max.
Properties¶
Name | Type | Default | Description |
---|---|---|---|
(★) |
Any dynamic |
The label to be displayed. |
|
value |
Union[int, float] dynamic |
min | The location of the label on the [min, max] range. |
min |
Union[int, float] |
0 | The minimum value of the range. |
max |
Union[int,float] |
100 | The maximum value of the range. |
format |
str |
The format to use when displaying the value. |
|
orientation |
str |
"horizontal" | The orientation of this slider. |
width |
str |
None | The width of the indicator, in CSS units (used when orientation is horizontal). |
height |
str |
None | The height of the indicator, in CSS units (used when orientation is vertical). |
id |
str |
The identifier that is assigned to the rendered HTML component. |
|
properties |
dict[str, Any] |
Bound to a dictionary that contains additional properties for this element. |
|
class_name |
str dynamic |
The list of CSS class names that are associated with the generated HTML Element. |
(★)display
is the default property for this visual element.
Usage¶
Minimal usage¶
Shows a message at a specified position between min and max.
Definition
<|Value|indicator|value={val}|min=0|max=100|>
<taipy:indicator value="{val}" min="0" max="100">Value</taipy:indicator>
import taipy.gui.builder as tgb
...
tgb.indicator("Value", value="{val}", min="0", max="100")
Formatting the message¶
The format property can be set to the format of the value to be displayed.
A format can be applied to the message.
Definition
<|50|indicator|format=%.2f|value=10|>
<taipy:indicator format="%.2f" value="10">50</taipy:indicator>
import taipy.gui.builder as tgb
...
tgb.indicator("50", format="%.2f", value="10")
Vertical indicators¶
The orientation property can be specified to "vertical" (or "v") to create a vertical indicator.
Definition
<|Value|indicator|orientation=v|value=10|>
<taipy:indicator orientation="v" value="10">Value</taipy:indicator>
import taipy.gui.builder as tgb
...
tgb.indicator("Value", orientation="v", value="10")
Dimensions¶
The properties width and height can be specified, depending on the value of orientation.
Definition
<|Value 1|indicator|value={val1}|width=50vw|>
<|Value 2|indicator|value={val2}|orientation=vertical|height=50vh|>
<taipy:indicator value="{val1}" width="50vw">Value 1</taipy:indicator>
<taipy:indicator value="{val2}" orientation="vertical" height="50vh">Value 2</taipy:indicator>
import taipy.gui.builder as tgb
...
tgb.indicator("{Value 1}", value="{val1}", width="50vw")
tgb.indicator("{Value 2}", value="{val2}", orientation="vertical", width="50vw")
Styling¶
All the indicator controls are generated with the "taipy-indicator" CSS class. You can use this class name to select the indicator controls on your page and apply style.