IBest-UI

Appearance

DropdownMenu 下拉菜单 ​

介绍 ​

向下弹出的菜单列表。

引入 ​

ts
import { IBestDropdownMenu, IBestDropdownItem, IBestDropdownMenuOption, IBestDropdownMenuController } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  groupId: string = 'dropdown_menu'
  @State value: number = 1
  @State options: IBestDropdownMenuOption[] = [
    { text: '全部商品', value: 1 },
    { text: '新款商品', value: 2 },
    { text: '活动商品', value: 3 }
  ]
  @State value1: string = ''
  @State options1: IBestDropdownMenuOption[] = [
    { text: '默认排序', value: '' },
    { text: '好评排序', value: 'a' },
    { text: '销量排序', value: 'b' },
  ]
  build() {
    Column(){
      IBestDropdownMenu({ groupId: this.groupId }){
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value,
          options: this.options,
          onChange: value => {
            this.value = value as string
            IBestToast.show("选项为：" + value)
          }
        })
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value1,
          options: this.options1,
          onChange: value => {
            this.value1 = value as string
            IBestToast.show("选项为：" + value)
          }
        })
      }
    }
  }
}

自定义菜单内容 ​

自定义菜单内容

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  groupId: string = 'dropdown_menu'
  @State value: number = 1
  @State options: IBestDropdownMenuOption[] = [
    { text: '全部商品', value: 1 },
    { text: '新款商品', value: 2 },
    { text: '活动商品', value: 3 }
  ]
  @State switchValue: boolean = true
  @State switchValue1: boolean = true
  private controller: IBestDropdownMenuController = new IBestDropdownMenuController()
  @Builder switchBuilder(){
    IBestSwitch({
      value: $switchValue
    })
  }
  @Builder switchBuilder1(){
    IBestSwitch({
      value: $switchValue1
    })
  }
  build() {
    Column(){
      IBestDropdownMenu({ groupId: this.groupId, controller: this.controller }){
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value,
          options: this.options,
          onChange: value => {
            this.value = value as number
          }
        })
        IBestDropdownItem({ groupId: this.groupId, title: "筛选" }){
          IBestCell({
            title: "轻量",
            center: true,
            rightIconBuilder: (): void => this.switchBuilder()
          })
          IBestCell({
            title: "简单",
            center: true,
            rightIconBuilder: (): void => this.switchBuilder1()
          })
          Row(){
            IBestButton({
              type: "primary",
              text: "确定",
              btnWidth: "100%",
              btnHeight: 50,
              round: true,
              onBtnClick: () => {
                this.controller.close()
              }
            })
          }.padding({top: 5, bottom: 5, left: 10, right: 10})
        }
      }
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  groupId: string = 'dropdown_menu'
  @State value: number = 1
  @State options: IBestDropdownMenuOption[] = [
    { text: '全部商品', value: 1 },
    { text: '新款商品', value: 2 },
    { text: '活动商品', value: 3 }
  ]
  @State value1: string = ''
  @State options1: IBestDropdownMenuOption[] = [
    { text: '默认排序', value: '' },
    { text: '好评排序', value: 'a' },
    { text: '销量排序', value: 'b' },
  ]
  build() {
    Column(){
      IBestDropdownMenu({
        groupId: this.groupId,
        activeColor: "#ee0a24",
        radius: 8,
        menuHeight: 36,
        menuFontSize: 12,
        menuShadow: { color: 'rgba(100, 101, 102, 0.2)', radius: 12, offsetY: 2 },
        menuIcon: $r("app.media.icon_arrow_down_full")
      }){
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value,
          options: this.options,
          onChange: value => {
            this.value = value as number
          }
        })
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value1,
          options: this.options1,
          onChange: value => {
            this.value1 = value as string
          }
        })
      }
    }
  }
}

横向滚动 ​

横向滚动

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  groupId: string = 'dropdown_menu'
  @State value: number = 1
  @State options: IBestDropdownMenuOption[] = [
    { text: '全部商品', value: 1 },
    { text: '新款商品', value: 2 },
    { text: '活动商品', value: 3 }
  ]
  @State value1: string = ''
  @State options1: IBestDropdownMenuOption[] = [
    { text: '默认排序', value: '' },
    { text: '好评排序', value: 'a' },
    { text: '销量排序', value: 'b' },
  ]
  build() {
    Column(){
      IBestDropdownMenu({ groupId: this.groupId, menuWidthType: "auto" }){
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value,
          options: this.options,
          onChange: value => {
            this.value = value as number
            IBestToast.show("选项为：" + value)
          }
        })
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value1,
          options: this.options1,
          onChange: value => {
            this.value1 = value as string
            IBestToast.show("选项为：" + value)
          }
        })
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value1,
          options: this.options1,
          onChange: value => {
            this.value1 = value as string
            IBestToast.show("选项为：" + value)
          }
        })
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value1,
          options: this.options1,
          onChange: value => {
            this.value1 = value as string
            IBestToast.show("选项为：" + value)
          }
        })
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value1,
          options: this.options1,
          onChange: value => {
            this.value1 = value as string
            IBestToast.show("选项为：" + value)
          }
        })
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value1,
          options: this.options1,
          onChange: value => {
            this.value1 = value as string
            IBestToast.show("选项为：" + value)
          }
        })
      }
    }
  }
}

异步选项 ​

异步选项

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  groupId: string = 'dropdown_menu'
  @State value: number = 1
  @State options: IBestDropdownMenuOption[] = []
  @State value1: string = ''
  @State options1: IBestDropdownMenuOption[] = []
  build() {
    Column(){
      IBestDropdownMenu({ groupId: this.groupId }){
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value,
          options: this.options,
          onOpen: () => {
            setTimeout(() => {
              this.options = [
                { text: '打折商品', value: 1 },
                { text: '新款商品', value: 2 },
                { text: '活动商品', value: 3 }
              ]
            }, 1500)
          },
          onChange: value => {
            this.value = value as string
            IBestToast.show("选项为：" + value)
          }
        })
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value1,
          options: this.options1,
          onOpen: () => {
            setTimeout(() => {
              this.options1 = [
                { text: '默认排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
              ]
            }, 1500)
          },
          onChange: value => {
            this.value1 = value as string
            IBestToast.show("选项为：" + value)
          }
        })
      }
    }
  }
}

禁用菜单 ​

禁用菜单

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  groupId: string = 'dropdown_menu'
  @State value: number = 1
  @State options: IBestDropdownMenuOption[] = [
    { text: '全部商品', value: 1 },
    { text: '新款商品', value: 2 },
    { text: '活动商品', value: 3 }
  ]
  @State value1: string = ''
  @State options1: IBestDropdownMenuOption[] = [
    { text: '默认排序', value: '' },
    { text: '好评排序', value: 'a' },
    { text: '销量排序', value: 'b' },
  ]
  build() {
    Column(){
      IBestDropdownMenu({ groupId: this.groupId }){
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value,
          options: this.options,
          disabled: true
        })
        IBestDropdownItem({
          groupId: this.groupId,
          value: this.value1,
          options: this.options1,
          disabled: true
        })
      }
    }
  }
}

API ​

IBestDropdownMenu @Props ​

参数说明类型默认值
groupId分组id, 需保证全局唯一性string | number''
menuHeight菜单高度string | number48
bgColor菜单背景颜色ResourceColor#fff
closeOnClickOverlay点击遮罩层是否关闭菜单booleantrue
menuWidthType菜单项宽度类型, 可选值 auto、fixedstringflex
menuIcon菜单项标题右侧图标Resourcearrow-down
menuShadow菜单项阴影ShadowOptions | ShadowStyle-
menuIconSize菜单项图标大小string | number16
menuFontSize菜单项文字大小string | number16
menuFontColor菜单项文字颜色ResourceColor#323232
activeColor菜单标题和下拉选项的选中态颜色ResourceColor#1989fa
dropDownFontSize菜单项下拉选项文字大小string | number14
radius下拉菜单圆角string | number0
selectedIcon菜单项选中图标ResourceStrsuccess
controller菜单项控制器IBestDropdownMenuController-

IBestDropdownMenu 插槽 ​

插槽名说明类型
defaultBuilder默认内容的插槽CustomBuilder

IBestDropdownItem @Props ​

参数说明类型默认值
groupId分组id, 需保证全局唯一性string | number''
title菜单默认标题string''
options菜单选项列表IBestDropdownMenuOption[][]
value当前选中项对应的value，不支持双向绑定，需从onChange事件中获取最新值string | number''
disabled菜单是否禁用booleanfalse

IBestDropdownMenuOption 数据结构 ​

参数说明类型
text选项文字ResourceStr
value选项标识符string | number
disabled选项是否禁用boolean
icon选项左侧的图标ResourceStr

IBestDropdownItem Events ​

事件名说明回调参数
onOpen菜单打开时触发-
onClose菜单关闭时触发-
onChange点击选项时触发value: string | number

IBestDropdownItem 插槽 ​

插槽名说明类型
defaultBuilder默认内容的插槽CustomBuilder

IBestDropdownMenuController API ​

方法名说明参数
close关闭所有下拉菜单-