CUI/SolidJs
预览
  • CUI-Admin
    权限管理开发平台

Dropdown 下拉菜单

代码演示

Dropdown属性

属性说明类型默认值
classList自定义classObject-
class自定义classstring-
style自定义样式Object
trigger触发方式hover | click | contextMenu | customhover
handler触发事件的元素string
align触发方式bottom | bottomLeft | bottomRight | right | rightBottom | rightTop | left | leftBottom | leftTop | top | topLeft | topRightbottom
menu下拉菜单内容any
visible菜单显隐绑定属性Signal
transfer是否将弹层放置于 body 内,在overflow 为 hidden的容器内效果更友好boolean
fixWidth是否在使用transfer时打开弹框后弹框固定宽度至出发元素宽度,在select中使用boolean
theme主题色string | dark | light | primary | success | info | warning | error | blue | green | red | yellow | pink | magenta | volcano | orange | gold | lime | cyan | geekblue | purplelight
data菜单数据DropdownNode[]
disabled禁用状态boolean
revers超出范围反向显示boolean
gradient渐变色背景string[]
color文字颜色string
position自定义位置x: number, y: number
arrow显示箭头boolean
offset偏移量number
onMouseClick鼠标点击事件(e: MouseEvent) => void
onSelect选择菜单项选中事件(name: string, data: any) => void
onBeforeDrop显示前回调,返回false可阻止展开(visible: boolean) => boolean
属性说明类型默认值
classList自定义classObject-
class自定义classstring-
style自定义样式Object
name菜单项名称string
title菜单项标题string
children子菜单项DropdownNode[]
disabled禁用状态boolean
divided显示分割线boolean
icon图标JSXElement
arrow显示箭头boolean
theme主题色string | primary | secondary | tertiary | success | info | warning | error | light
selected是否选中boolean

Item属性

属性说明类型默认值
classList自定义classObject-
class自定义classstring-
style自定义样式Object
disabled禁用状态boolean
name菜单项名称string
divided显示分割线boolean
icon图标JSXElement
arrow显示箭头boolean
theme主题色string | primary | secondary | tertiary | success | info | warning | error | light
selected是否选中boolean

事件

事件名称说明返回值
OnSelect选择菜单项选中事件name:菜单项名称
onMouseClick鼠标点击事件e: MouseEvent