IBest-UI

Appearance

WeekPicker 周选择 ​

介绍 ​

周选择器，用于选择周，通常与弹出层组件配合使用。

TIP

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

引入 ​

ts
import { IBestWeekPicker, IBestPickerOption } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
import { IBestToast } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State selectValue: number = 2
  build() {
    Column(){
      IBestWeekPicker({
        title: "选择周",
        value: $selectValue,
        onConfirm: (value, text) => {
          IBestToast.show(value.toString() + " " + text)
        },
        onChange: (value, text) => {
          IBestToast.show(value.toString() + " " + text)
        }
      })
    }
  }
}

自定义选项 ​

自定义选项

点我查看代码
ts
import { IBestToast } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State selectValue: string = '5'
  @State options: IBestPickerOption[] = [
    { text: "星期一", value: '1' },
    { text: "星期二", value: '2' },
    { text: "星期三", value: '3' },
    { text: "星期四", value: '4' },
    { text: "星期五", value: '5' },
    { text: "星期六", value: '6' },
    { text: "星期日", value: '7' }
  ]
  build() {
    Column(){
      IBestWeekPicker({
        title: "选择星期",
        value: $selectValue,
        options: this.options,
        onConfirm: (value, text) => {
          IBestToast.show(value.toString() + " " + text)
        },
        onChange: (value, text) => {
          IBestToast.show(value.toString() + " " + text)
        }
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value已选择的值, 支持双向绑定string | number''
options选项列表IBestPickerOption[][{text: '周一', value: 1},{text: '周二', value: 2},{text: '周三', value: 3},{text: '周四', value: 4},{text: '周五', value: 5},{text: '周六', value: 6},{text: '周日', value: 0}]
title标题ResourceStr''
itemHeight单项高度string | number44
confirmText确认按钮文字ResourceStr确定
cancelText取消按钮文字ResourceStr取消
showToolBar是否显示顶部栏booleantrue
visibleItemCount可见选项数量number6
horizontal是否横向booleanfalse
itemWidth单项宽度string | number44
contentHeight整体高度, 仅横向时生效string | number44
optionFontSize未选中字体大小string | number16
radius外部圆角string | number0
fontColor未选中字体颜色ResourceColor#323233
fontWeight未选中字体字重FontWeightNormal
selectedFontSize选中字体大小string | number16
selectedFontColor选中字体颜色ResourceColor#323233
selectedFontWeight选中字体字重FontWeightNormal

Events ​

事件名说明事件类型
onChange选项变更后触发(value: string | numner, text: string) => void
onConfirm点击确定按钮时触发(value: string | numner, text: string) => void
onCancel点击取消按钮时触发() => void