温度计、液位计组件

1. 简介

温度计、液位计 应用组件

查看更多应用组件前往 https://github.com/tinper-acs

演示效果: https://tinper-acs.github.io/ac-thermometer/

本组件包含温度计Thermometer、液位计ContentGage两种组件

2. 安装

• 通过npm下载使用 npm install ac-thermometer -S

3. 使用

import React, { Component } from 'react';
import { Col, Row } from 'tinper-bee';//加载组件库
import { Thermometer, ContentGage } from 'ac-thermometer';//导入应用组件
import 'tinper-bee/assets/tinper-bee.css';//加载组件库样式
import 'ac-thermometer/dist/index.css';//加载温度计、液位计样式


class Demo extends Component {
    constructor() {
        super();
        this.state = {
            num: 0
        }
    }
    componentDidMount = () => {
        setInterval(() => {
            let num = Math.floor(Math.random() * (100 - 0 + 1) + 0);
            this.setState({ num });
        }, 3000);
    }
    render() {
        let { num } = this.state;
        return (
            <div>
                <Row style={{ "paddingTop": "30px" }}>
                    <Col md={2}>
                        <Thermometer
                            theme="light"
                            value={num}
                            max="100"
                            steps="5"
                            format="°C"
                            size="small"
                            height="400"
                        />
                    </Col>
                    <Col md={2}>
                        <Thermometer
                            theme="light"
                            value={num}
                            max="100"
                            steps="5"
                            format="°C"
                            size="normal"
                            height="400"
                        />
                    </Col>
                    <Col md={2}>
                        <Thermometer
                            theme="light"
                            value={num}
                            max="100"
                            steps="5"
                            format="°C"
                            size="large"
                            height="400"
                        />
                    </Col>
                    <Col md={1}>
                        <ContentGage
                            theme="light"
                            value={num}
                            max="100"
                            steps="5"
                            format="L"
                            size="small"
                            height="400"
                        />
                    </Col>
                    <Col md={1}>
                        <ContentGage
                            theme="light"
                            value={num}
                            max="100"
                            steps="5"
                            format="L"
                            size="normal"
                            height="400"
                        />
                    </Col>
                    <Col md={1}>
                        <ContentGage
                            theme="light"
                            value={num}
                            max="100"
                            steps="5"
                            format="L"
                            size="large"
                            height="400"
                        />
                    </Col>
                </Row>
            </div>
        );
    }
}

export default Demo;

4. API