DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

TIP

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

引入

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

代码演示

基础用法

点我查看代码

@Entry
@Component
struct DemoPage {
  groupId: string = 'dropdown_menu'
  @State value: number = 1
  @State options: IBestDropdownMenuOption[] = [
    { text: '全部商品', value: 1 },
    { text: '第一个新款商品', value: 2 },
    { text: '活动商品', value: 3 },
    { text: '优惠商品', value: 4 },
    { text: '价格商品', value: 5 },
    { text: '折扣商品', value: 6 },
    { text: '精选商品', value: 7 },
    { text: '推荐商品', value: 8 },
    { text: '精选商品', value: 9 },
    { text: '推荐商品', value: 10 },
    { text: '新品商品', value: 11 },
    { text: '优惠商品', value: 12 },
    { text: '价格商品', value: 13 },
    { text: '折扣商品', value: 14 },
    { text: '精选商品', value: 15 },
    { text: '推荐商品', value: 16 },
    { text: '新品商品', value: 17 },
    { text: '优惠商品', value: 18 },
    { text: '价格商品', value: 19 },
    { text: '折扣商品', value: 20 },
    { text: '精选商品', value: 21 },
    { text: '推荐商品', value: 22 },
    { text: '新品商品', value: 23 },
    { text: '优惠商品', value: 24 },
    { text: '价格商品', value: 25 },
    { text: '折扣商品', value: 26 },
    { text: '精选商品', value: 27 },
    { text: '推荐商品', value: 28 },
    { text: '新品商品', value: 29 },
    { text: '优惠商品', value: 30 },
    { text: '最后一个价格商品', value: 31 }
  ]
  @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,
          maxHeight: 500,
          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)
          }
        })
      }
    }
  }
}

自定义菜单内容

点我查看代码

@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})
        }
      }
    }
  }
}

自定义样式

点我查看代码

@Entry
@Component
struct DemoPage {
  groupId: string = 'dropdown_menu'
  @State value: number = 1
  @State options: IBestDropdownMenuOption[] = [
    { text: '全部商品', icon: "star", value: 1 },
    { text: '新款商品', icon: "fire", iconPosition: 'right', value: 2 },
    { text: '活动商品', icon: "gem", value: 3, disabled: true }
  ]
  @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
          }
        })
      }
    }
  }
}

横向滚动

点我查看代码

@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)
          }
        })
      }
    }
  }
}

异步打开

点我查看代码

@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,
          beforeOpen: () => {
            if(this.options.length){
              return true
            }
            return new Promise((resolve, reject) => {
              setTimeout(() => {
                this.options = [
                  { text: '打折商品', value: '1' },
                  { text: '新款商品', value: '2' },
                  { text: '活动商品', value: '3' }
                ]
                resolve(true)
              }, 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)
          }
        })
      }
    }
  }
}

禁用菜单

点我查看代码

@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 \| number	`48`
bgColor	菜单背景颜色	ResourceColor	`#fff`
closeOnClickOverlay	点击遮罩层是否关闭菜单	boolean	`true`
menuWidthType	菜单项宽度类型, 可选值 `auto`、`fixed`	string	`flex`
menuIcon	菜单项标题右侧图标	Resource	`arrow-down`
menuShadow	菜单项阴影	ShadowOptions \| ShadowStyle	`-`
menuIconSize	菜单项图标大小	string \| number	`16`
menuFontSize	菜单项文字大小	string \| number	`16`
menuFontColor	菜单项文字颜色	ResourceColor	`#323232`
activeColor	菜单标题和下拉选项的选中态颜色	ResourceColor	`#1989fa`
dropDownFontSize	菜单项下拉选项文字大小	string \| number	`14`
radius	下拉菜单圆角	string \| number	`0`
selectedIcon	菜单项选中图标	ResourceStr	`success`
controller	菜单项控制器	IBestDropdownMenuController	`-`
dropDownIconSize	下拉选项图标大小	string \| number	`14`

IBestDropdownMenu 插槽

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

IBestDropdownItem @Props

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

IBestDropdownMenuOption 数据结构

参数	说明	类型
text	选项文字	ResourceStr
value	选项标识符	string \| number
disabled	选项是否禁用	boolean
icon	选项图标	ResourceStr
iconPosition	选项图标位置, 可选值 `left`、`right`, 默认left	string

IBestDropdownItem Events

事件名	说明	事件类型
onOpen	菜单打开时触发	`() => void`
onClose	菜单关闭时触发	`() => void`
onChange	点击选项时触发	`(value: string \| number) => void`
beforeOpen	菜单打开前触发，返回false可阻止菜单打开	`() => Promise<boolean> \| boolean`

IBestDropdownItem 插槽

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

IBestDropdownMenuController API

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

主题定制

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

名称	描述	默认值
ibest_dropdown_menu_bg_color	菜单背景色	`#fff`
ibest_dropdown_menu_text_color	菜单文字颜色	`#323233`
ibest_dropdown_menu_border_color	菜单边框颜色	`#ebedf0`
ibest_dropdown_menu_disabled_color	菜单禁用时颜色	`#969799`

DropdownMenu 下拉菜单 ​

介绍 ​

引入 ​

代码演示 ​

基础用法 ​

自定义菜单内容 ​

自定义样式 ​

横向滚动 ​

异步打开 ​

禁用菜单 ​

API ​

IBestDropdownMenu @Props ​

IBestDropdownMenu 插槽 ​

IBestDropdownItem @Props ​

IBestDropdownMenuOption 数据结构 ​

IBestDropdownItem Events ​

IBestDropdownItem 插槽 ​

IBestDropdownMenuController API ​

主题定制 ​

DropdownMenu 下拉菜单

介绍

引入

代码演示

基础用法

自定义菜单内容

自定义样式

横向滚动

异步打开

禁用菜单

API

IBestDropdownMenu @Props

IBestDropdownMenu 插槽

IBestDropdownItem @Props

IBestDropdownMenuOption 数据结构

IBestDropdownItem Events

IBestDropdownItem 插槽

IBestDropdownMenuController API

主题定制