Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 1x | import React from "react"; import { Row, Col } from "@tencent/tea-component/lib/grid"; import { Card } from "@tencent/tea-component/lib/card"; import { MetricsBoard } from "@tencent/tea-component/lib/metricsboard"; import { Icon } from "@tencent/tea-component/lib/icon"; import { Text } from "@tencent/tea-component/lib/text"; export default function MetricsBoardExample() { return ( <Card> <Card.Body title="昨日数据"> <Row showSplitLine> <Col> <MetricsBoard title="语音时长" unit="分钟" value={7890} infos={[ <> 比较前天 <Icon type="trenddown" /> 0% </>, ]} onClick={event => console.log(event)} /> </Col> <Col> <MetricsBoard title="语音 DAU 总人数" value={456} infos={[ <> 比较前天 <Icon type="trendup" /> 0% </>, <> 比较上周 <Icon type="trenddown" /> 0% </>, <> 比较上月 <Icon type="trenddown" /> 0% </>, ]} /> </Col> <Col> <MetricsBoard title="语音 DAU 总人数" value={789} infos={[ <> <MetricsBoard.InfoLabel>标清</MetricsBoard.InfoLabel> <MetricsBoard.InfoKey> <Text theme="danger">23</Text> </MetricsBoard.InfoKey> </>, <> <MetricsBoard.InfoLabel>高清</MetricsBoard.InfoLabel> <MetricsBoard.InfoKey>23</MetricsBoard.InfoKey> </>, <> <MetricsBoard.InfoLabel>1080P</MetricsBoard.InfoLabel> <MetricsBoard.InfoKey>23</MetricsBoard.InfoKey> </>, ]} /> </Col> <Col> <MetricsBoard title="语音 DAU 总人数" value="00" infos={[ <> 比较前天 <Icon type="trendup" /> 0% </>, ]} /> </Col> </Row> </Card.Body> </Card> ); } |