Caliper 卡尺

介绍

用于选择某个范围内的值。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入

import { IBestCaliper } from "@ibestservices/ibest-ui"

代码演示

基础用法

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 6
  build() {
    Column({space: 14}){
      Text(this.value.toString())
      IBestCaliper({
        value: $value
      })
    }.alignItems(HorizontalAlign.Start)
  }
}

设置开始结尾数

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 6
  build() {
    Column({space: 14}){
      Text(this.value.toString())
      IBestCaliper({
        value: $value,
        startNum: 50,
        endNum: 200
      })
    }.alignItems(HorizontalAlign.Start)
  }
}

自定义刻度

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 0
  @State value1: number = 0
  build() {
    Column({space: 14}){
      Text(this.value.toString())
      IBestCaliper({
        value: $value,
        scaleSize: 2
      })
      Text(this.value1.toString())
      IBestCaliper({
        value: $value1,
        scales: 5,
        scaleSize: 2
      })
    }.alignItems(HorizontalAlign.Start)
  }
}

自定义样式

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 0
  build() {
    Column({space: 14}){
      Text(this.value.toString())
      IBestCaliper({
        value: $value,
        bgColor: "#d8e9f6",
        fontColor: "#038cfd",
        bigScaleHeight: 50,
        smallScaleHeight: 40,
        activeScaleColor: "red",
        activeFontWeight: FontWeight.Bold
      })
    }.alignItems(HorizontalAlign.Start)
  }
}

刻度对齐方式

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 0
  build() {
    Column({space: 14}){
      Text(this.value.toString())
      IBestCaliper({
        value: $value,
        scaleAlign: "center"
      })
      IBestCaliper({
        value: $value,
        scaleAlign: "bottom"
      })
    }.alignItems(HorizontalAlign.Start)
  }
}

API

@Props

参数	说明	类型	默认值
value	绑定值, 支持双向绑定	number	''
scales	大刻度之间划分的小刻度数量	number	10
scaleSize	小刻度代表数值	number	1
startNum	开始刻度值	number	0
endNum	结束刻度值	number	100
bgColor	背景颜色	ResourceColor	''
scaleColor	刻度线颜色	ResourceColor	#969799
activeScaleColor	选中刻度线颜色	ResourceColor	#1989fa
scaleAlign	刻度线对齐方式, 可选值 top、center、bottom	string	top
fontSize	刻度值字体大小	number	14
fontColor	刻度值字体颜色	ResourceColor	#1989fa
bigScaleWidth	大刻度线宽度	string | number	1
bigScaleHeight	大刻度线高度	string | number	30
smallScaleWidth	小刻度线宽度	string | number	1
smallScaleHeight	小刻度线高度	string | number	20
activeScaleWidth	选中刻度线宽度	string | number	3
activeFontWeight	选中刻度文字字重	string | number| FontWeight	Normal
scaleSpace	刻度线间距	string | number	10

Events

事件名	说明	事件类型
onChange	刻度变化回调	(value: number) => void

主题定制

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称	描述	默认值
ibest_caliper_scale_color	刻度线颜色	#969799