跳到主要内容

下拉菜单 DropdownMenu

下拉菜单是可切换的上下文叠加,用于显示链接列表等, 可以支持多种类型的下拉菜单。

安装使用

{
// 原生小程序
"usingComponents": {
"ti-dropdown-item": "@titian-design/weapp/dropdown-item/index",
"ti-dropdown-menu": "@titian-design/weapp/dropdown-menu/index"
},
// titan-cli搭建的项目
"usingComponents": {
"ti-dropdown-item": "platform://titian-mp/ti-dropdown-item",
"ti-dropdown-menu": "platform://titian-mp/ti-dropdown-menu"
}
}

用法示例

基本使用

<ti-dropdown-menu>
<ti-dropdown-item title="标题1" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="自定义内容">自定义内容</ti-dropdown-item>
</ti-dropdown-menu>

<ti-dropdown-menu direction="up">
<ti-dropdown-item title="标题1" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

设置选中值

<ti-dropdown-menu>
<ti-dropdown-item value="{{value}}" title="有选中值" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

禁用点击

<ti-dropdown-menu>
<ti-dropdown-item disabled title="禁用标题点击" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

<ti-dropdown-menu disabled>
<ti-dropdown-item title="禁用所有Item点击" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="禁用所有Item点击" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

操作遮罩

<ti-dropdown-menu>
<ti-dropdown-item has-mask="{{false}}" title="不显示遮罩" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

<ti-dropdown-menu has-mask="{{false}}">
<ti-dropdown-item title="不显示遮罩1" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="不显示遮罩2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

<ti-dropdown-menu>
<ti-dropdown-item close-on-mask="{{false}}" title="关闭遮罩点击事件" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

<ti-dropdown-menu close-on-mask="{{false}}">
<ti-dropdown-item title="关闭遮罩点击事件" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

修改选择后的整体色调

<ti-dropdown-menu>
<ti-dropdown-item active-color="red" title="标题1" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

<ti-dropdown-menu active-color="red">
<ti-dropdown-item title="标题1" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

submit 模式

<ti-dropdown-menu>
<ti-dropdown-item bind:submit="handleSubmit" has-submit submit-text="提交" title="标题1" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

自定义选择后的图标、选择类型、以及是否是多选类型

<ti-dropdown-menu>
<ti-dropdown-item title="自定义图标" options="{{dropMenuOptions}}" icon="plus" />
<ti-dropdown-item title="使用 switch" options="{{dropMenuOptions}}" type="switch" />
<ti-dropdown-item mode="multiple" title="多选" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

事件操作

<ti-dropdown-menu>
<ti-dropdown-item bind:close="handleClose" bind:open="handleOpen" bind:change="handleChange" title="标题1" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
<ti-dropdown-item bind:submit="handleSubmit" has-submit submit-text="提交" title="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

主动控制展示

事件操作

<ti-button bind:tap="handleBtnClick">主动控制</ti-button>
<ti-dropdown-menu>
<ti-dropdown-item id="dropdown-item" bind:close="handleClose" bind:open="handleOpen" title="标题" options="{{dropMenuOptions}}" />
<ti-dropdown-item title="标题" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

ti-dropdown-menu API

属性 Properties

名称类型必填默认值说明备注
modestring-列表选择的模式,可选项:single、multiple-
has-maskbooleantrue是否显示遮罩-
close-on-maskbooleantrue是否允许点击遮罩关闭下拉菜单-
typestring-激活选择的样式种类,可选项:checkbox,switch-
iconstring-列表选择的图标-
active-colorstring-选中状态的颜色-
disabledbooleanfalse是否禁用-
directionup | downdown展示方向-
get-position(rect: { rect: DOMRect; direction: 'up' | 'down'; position: IPosition }) => IPositiondown展示方向, 可选值为:down、up自定义展示位置
IPosition
export type DistanceUnit = 'px' | 'em' | 'rem' | 'vw' | 'vh' | '%';

export type IPosition = {
bottom?: `${number}${DistanceUnit}`;
top?: `${number}${DistanceUnit}`;
left?: `${number}${DistanceUnit}`;
right?: `${number}${DistanceUnit}`;
};

可扩展样式名 External Class

名称说明备注
ext-class根节点可扩展的类名-
title-class标题可扩展的类名-

CSS 变量 CSS Variables

变量默认值说明备注
--dropdown-menu-title-wrap-bg-colorvar(--neutral-color-9, #ffffff)--
--dropdown-menu-icon-margin-left4rpx--
--dropdown-title-font-weight400--

ti-dropdown-item API

属性 Properties

名称类型必填默认值说明备注
titlestring-标题-
optionsArray<TiDropdownItemOption>-选项列表-
visiblebooleanfalse是否显示-
modestringsingle列表选择的模式,可选值:single、multiple-
iconstringselected列表选择的图标-
disabledbooleanfalse是否禁用-
valuestring | number | Array<string | number>-唯一标识-
typecheckbox | switchcheckbox下拉列表选中时的选择样式-
has-maskbooleanfalse是否显示遮罩-
close-on-maskbooleanfalse是否阻止遮罩点击关闭事件-
active-colorstring-选中状态的颜色-
has-submitbooleanfalse是否显示提交的按钮-
submit-textstring-提交按钮的文字-
directionstringdown展示方向, 可选值为:down、up-

TiDropdownItemOption

interface TiDropdownItemOption {
title?: string;
label?: string;
desc?: string;
value: string | number;
}

事件 Events

名称参数列表描述备注
bind:close(e: WechatMiniprogram.CustomEvent<never>) => void关闭时触发的事件-
bind:open(e: WechatMiniprogram.CustomEvent<never>) => void打开时触发的事件-
bind:change(e: WechatMiniprogram.CustomEvent<string | number | Array<string | number>>) => void切换时触发的事件-
bind:submit(e: WechatMiniprogram.CustomEvent<string | number | Array<string | number>>) => void提交时触发的事件-

可扩展样式类名(class)

类名说明备注
ext-class扩展样式类名-

CSS 变量 CSS Variables

变量默认值说明备注
--dropdown-active-colorrgb(@theme-r, @theme-g, @theme-b)激活状态的主体颜色-
--dropdown-label-active-colorvar(--dropdown-active-color, rgb(@theme-r, @theme-g, @theme-b))--
--dropdown-select-icon-colorvar(--dropdown-active-color, rgb(@theme-r, @theme-g, @theme-b))--