Gauge React Component
Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.
Gauge Components
There are following components included:
Gauge
/F7Gauge
Gauge Properties
Prop | Type | Default | Description |
---|---|---|---|
id | string | Gauge element ID attribute | |
type | string | circle | Gauge type. Can be circle or semicircle |
value | number | 0 | Gauge value/percentage. Must be a number between 0 and 1 |
size | number | 200 | Generated SVG image size (in px) |
bgColor | string | transparent | Gauge background color. Can be any valid color string, e.g. #ff00ff , rgb(0,0,255) , etc. |
borderBgColor | string | #eeeeee | Main border/stroke background color |
borderColor | string | #000000 | Main border/stroke color |
borderWidth | string | 10 | Main border/stroke width |
valueText | string | null | Gauge value text (large text in the center of gauge) |
valueTextColor | string | #000000 | Value text color |
valueFontSize | string | 31 | Value text font size |
valueFontWeight | string | 500 | Value text font weight |
labelText | string | null | Gauge additional label text |
labelTextColor | string | #888888 | Label text color |
labelFontSize | string | 14 | Label text font size |
labelFontWeight | string | 400 | Label text font weight |
Examples
export default class extends React.Component {
constructor() {
super();
this.state = {
gaugeValue: 0.5,
};
}
render() {
return (
<Page>
<Navbar title="Gauge"></Navbar>
<Block strong>
<p>Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.</p>
</Block>
<Block strong className="text-align-center">
<Gauge
type="circle"
value={this.state.gaugeValue}
size={250}
borderColor="#2196f3"
borderWidth={10}
valueText={`${this.state.gaugeValue * 100}%`}
valueFontSize={41}
valueTextColor="#2196f3"
labelText="amount of something"
/>
<Segmented tag="p" raised>
<Button onClick={() => this.setState({ gaugeValue: 0 })}>0%</Button>
<Button onClick={() => this.setState({ gaugeValue: 0.25 })}>25%</Button>
<Button onClick={() => this.setState({ gaugeValue: 0.5 })}>50%</Button>
<Button onClick={() => this.setState({ gaugeValue: 0.75 })}>75%</Button>
<Button onClick={() => this.setState({ gaugeValue: 1 })}>100%</Button>
</Segmented>
</Block>
<BlockTitle>Circle Gauges</BlockTitle>
<Block strong>
<Row>
<Col className="text-align-center">
<Gauge
type="circle"
value={0.44}
valueText="44%"
valueTextColor="#ff9800"
borderColor="#ff9800"
/>
</Col>
<Col className="text-align-center">
<Gauge
type="circle"
value={0.12}
valueText="$120"
valueTextColor="#4caf50"
borderColor="#4caf50"
labelText="of $1000 budget"
labelTextColor="#f44336"
labelFontWeight={700}
/>
</Col>
</Row>
</Block>
<BlockTitle>Semicircle Gauges</BlockTitle>
<Block strong>
<Row>
<Col className="text-align-center">
<Gauge
type="semicircle"
value={0.3}
valueText="30%"
valueTextColor="#f44336"
borderColor="#f44336"
/>
</Col>
<Col className="text-align-center">
<Gauge
type="semicircle"
value={0.5}
valueText="30kg"
valueTextColor="#e91e63"
borderColor="#e91e63"
labelText="of 60kg total"
labelTextColor="#333"
/>
</Col>
</Row>
</Block>
<BlockTitle>Customization</BlockTitle>
<Block strong>
<Row>
<Col className="text-align-center">
<Gauge
type="circle"
value={0.35}
valueText="35%"
valueTextColor="#4caf50"
valueFontSize={51}
valueFontWeight={700}
borderWidth={20}
borderColor="#4caf50"
borderBgColor="#ffeb3b"
bgColor="#ffeb3b"
/>
</Col>
<Col className="text-align-center">
<Gauge
type="circle"
value={0.67}
valueText="$670"
valueTextColor="#000"
borderColor="#ff9800"
labelText="of $1000 spent"
labelTextColor="#4caf50"
labelFontWeight={800}
labelFontSize={12}
borderWidth={30}
/>
</Col>
</Row>
<br />
<Row>
<Col className="text-align-center">
<Gauge
type="semicircle"
value={0.5}
valueText="50%"
valueTextColor="#ffeb3b"
valueFontSize={41}
valueFontWeight={700}
borderWidth={10}
borderColor="#ffeb3b"
borderBgColor="transparent"
/>
</Col>
<Col className="text-align-center">
<Gauge
type="semicircle"
value={0.77}
borderColor="#ff9800"
labelText="$770 spent so far"
labelTextColor="#ff9800"
labelFontWeight={800}
labelFontSize={12}
borderWidth={10}
/>
</Col>
</Row>
</Block>
</Page>
)
}
}
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .