DataLabel

DataLabel

DataLabel 用作显示数据，一共 5 种类型：

CoupleLabel

同时显示左右两个数据，例如经纬度：

<couplelabel leftContent={myStore.value} rightContent={myStore.value} style="default">
</couplelabel>

const { CoupleLabel } from 'mesh-envoy-tag'

const label = (
  <CoupleLabel
    leftContent={this.state.value}
    rightContent={this.state.value}
    style="default">
  </CoupleLabel>
)

名称	作用	必须	可否更改
style	couplelabel 包含两种样式，style 用于指定该采用何种样式: "default": 默认样式 "transparent": 透明背景样式	false	false
leftContent	左边文本内容	true	true
rightContent	右边文本内容	true	true

DetailLabel

只显示一个数据，带有一个标题：

<detaillabel title="Title">
  {myStore.text}
</detaillabel>

const { DetailLabel } from 'mesh-envoy-tag'

const label = (
  <DetailLabel title="Title">
    {this.state.value}
  </DetailLabel>
)

名称	作用	必须	可否更改
title	DetailLabel 的 title	true	false
text	DetailLabel 的内容，为数值或者字符串	false	true

RateLabel

以比例的方式显示数据，带有标题：

<ratelabel title="Title" leftUnit="pic" leftContent={myStore.leftContent} rightUnit="sec" rightContent={myStore.rightContent}>
</ratelabel>

const { RateLabel } from 'mesh-envoy-tag'

const label = (
  <RateLabel
    title="Title"
    leftUnit="pic"
    leftContent={this.state.value}
    rightUnit="sec"
    rightContent={this.state.value}>
  </RateLabel>
)

名称	作用	必须	可否更改
title	ratelabel 的 title	true	false
leftUnit	左方数据的单位	true	false
leftContent	左方数据	true	true
rightUnit	右方数据的单位	true	false
rightContent	右方数据	true	true

IconLabel

中间包含一原型 icon 图片

<iconlabel title="Title" url={myStore.icon} file={myStore.file}>
</iconlabel>

const { IconLabel } from 'mesh-envoy-tag'

const label = (
  <IconLabel
    title="Title"
    url="https://randomuser.me/api/portraits/thumb/men/85.jpg">
  </IconLabel>
)

名称	作用	必须	可否更改
title	iconlabel 的 title	true	false
url	icon 图片的 url，url 与 file 至少其中一个有值	false	true
file	icon 图片文件的名称，如：feature_waypoint。url 与 file 至少其中一个有值	false	true

url 优先级比 file 高，它们同时有值时，取 url

PlainLabel

只显示一个数据：

<plainlabel>
  {myStore.text}
</plainlabel>

const { PlainLabel } from 'mesh-envoy-tag'

const label = (
  <PlainLabel>
    {this.state.value}
  </PlainLabel>
)

名称	作用	必须	可否更改
text	PlainLabel 的内容，为数值或者字符串	true	true