npm

ac-thermometer

1.0.2 • Public • Published

温度计、液位计组件


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

参数 类型 说明 默认值
theme String Light or Dark light
value Number 温度值 0
max Number 温度计最大值 100
steps Number 温度计分隔 0
format String 单位格式 ""
size String 温度计的尺寸.可以是小的(small)、正常(normal)或者大的(large) normal
height Number 温度计的高度 200

Package Sidebar

Install

npm i ac-thermometer

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

30.5 kB

Total Files

5

Last publish

Collaborators

  • rongqb
  • duxue
  • jwangyangls
  • shaohlr
  • honely1314
  • xiaoshutong
  • yonyoufed
  • jonyw
  • guoyongfeng
  • kvkens
  • whizbz
  • npm_yx
  • bjyxszd
  • tinper-bot
  • gaox2025f
  • gcht163
  • cnkvkens
  • diozhu
  • wangjings123