Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ac-thermometer with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var acThermometer = require("ac-thermometer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ac-thermometer v1.0.2

tinper-bee ac thermometer components

温度计、液位计组件


npm version NPM downloads


image

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

参数类型说明默认值
themeStringLight or Darklight
valueNumber温度值0
maxNumber温度计最大值100
stepsNumber温度计分隔0
formatString单位格式""
sizeString温度计的尺寸.可以是小的(small)、正常(normal)或者大的(large)normal
heightNumber温度计的高度200
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free