跳到主要内容

下拉菜单 DropdownMenu

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

安装使用

import { TiDropdownMenu, TiDropdownItem } from '@titian-design/mobile-react';

用法示例

基本使用

const App: React.FC = () => {

const dropMenuOptions: TiDropdownItemProps['options'] = [
{ title: "选项1", value: "1" },
{ title: "选项2", value: "2" }
];

return (
<>
<TiDropdownMenu>
<TiDropdownItem visible title="默认展开" options={dropMenuOptions} />
<TiDropdownItem title="标题" options={dropMenuOptions} />
<TiDropdownItem title="自定义内容">
<div>自定义内容</div>
</TiDropdownItem>
</TiDropdownMenu>

<TiDropdownMenu direction="up">
<TiDropdownItem title="标题1" options={dropMenuOptions} />
<TiDropdownItem title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>
</>
)
}

设置选中值

const App: React.FC = () => {

const dropMenuOptions: TiDropdownItemProps['options'] = [
{ title: "选项1", value: "1" },
{ title: "选项2", value: "2" }
];

return (
<>
<TiDropdownMenu>
<TiDropdownItem value={["1"]} title="有选中值" options={dropMenuOptions} />
<TiDropdownItem title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>
</>
)
}

禁用点击

const App: React.FC = () => {

const dropMenuOptions: TiDropdownItemProps['options'] = [
{ title: "选项1", value: "1" },
{ title: "选项2", value: "2" }
];

return (
<>
<TiDropdownMenu>
<TiDropdownItem disabled title="禁用点击" options={dropMenuOptions} />
<TiDropdownItem title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>

<TiDropdownMenu disabled>
<TiDropdownItem title="禁用所有Item点击" options={dropMenuOptions} />
<TiDropdownItem title="禁用所有Item点击" options={dropMenuOptions} />
</TiDropdownMenu>
</>
)
}

操作遮罩

const App: React.FC = () => {

const dropMenuOptions: TiDropdownItemProps['options'] = [
{ title: "选项1", value: "1" },
{ title: "选项2", value: "2" }
];

return (
<>
<TiDropdownMenu>
<TiDropdownItem hasMask={false} title="不展示遮罩" options={dropMenuOptions} />
<TiDropdownItem title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>

<TiDropdownMenu hasMask={false}>
<TiDropdownItem title="不展示遮罩" options={dropMenuOptions} />
<TiDropdownItem title="不展示遮罩" options={dropMenuOptions} />
</TiDropdownMenu>

<TiDropdownMenu>
<TiDropdownItem closeOnMask={false} title="关闭遮罩点击事件" options={dropMenuOptions} />
<TiDropdownItem title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>

<TiDropdownMenu closeOnMask={false}>
<TiDropdownItem title="关闭遮罩点击事件" options={dropMenuOptions} />
<TiDropdownItem title="关闭遮罩点击事件" options={dropMenuOptions} />
</TiDropdownMenu>
</>
)
}

修改选择后的整体色调

const App: React.FC = () => {

const dropMenuOptions: TiDropdownItemProps['options'] = [
{ title: "选项1", value: "1" },
{ title: "选项2", value: "2" }
];

return (
<>
<TiDropdownMenu activeColor="red">
<TiDropdownItem title="标题1" options={dropMenuOptions} />
<TiDropdownItem title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>

<TiDropdownMenu>
<TiDropdownItem activeColor="red" title="标题1" options={dropMenuOptions} />
<TiDropdownItem title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>
</>
)
}

submit 模式

const App: React.FC = () => {

const dropMenuOptions: TiDropdownItemProps['options'] = [
{ title: "选项1", value: "1" },
{ title: "选项2", value: "2" }
];

return (
<>
<TiDropdownMenu>
<TiDropdownItem hasSubmit submitText="确定" title="标题1" options={dropMenuOptions} />
<TiDropdownItem hasSubmit submitText="提交" title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>
</>
)
}

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

const App: React.FC = () => {

const dropMenuOptions: TiDropdownItemProps['options'] = [
{ title: "选项1", value: "1" },
{ title: "选项2", value: "2" }
];

return (
<>
<TiDropdownMenu>
<TiDropdownItem title="自定义图标" options={dropMenuOptions} icon="plus" />
<TiDropdownItem title="使用 switch" options={dropMenuOptions} type="switch" />
<TiDropdownItem mode="multiple" title="多选" options={dropMenuOptions} />
</TiDropdownMenu>
</>
)
}

事件操作

const App: React.FC = () => {
const handleClose = useCallback((e: CustomEvent<never>) => {
console.log(e);
}, []);

const handleOpen = useCallback((e: CustomEvent<never>) => {
console.log(e);
}, []);

const handleChange = useCallback(
(e: CustomEvent<string | number | Array<string | number>>) => {
console.log(e.detail);
},
[]
);

const dropMenuOptions: TiDropdownItemProps['options'] = [
{ title: "选项1", value: "1" },
{ title: "选项2", value: "2" }
];

return (
<>
<TiDropdownMenu>
<TiDropdownItem
onClose={handleClose}
onOpen={handleOpen}
onChange={handleChange}
title="默认展开"
options={dropMenuOptions}
/>
<TiDropdownItem title="标题1" options={dropMenuOptions} />
<TiDropdownItem title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>
</>
)
}

通过 Ref 控制 TiDropdownItem 展示

const App: React.FC = () => {
const dropdownItemRef = useRef<HTMLTiDropdownItemElement>();

const dropMenuOptions: TiDropdownItemProps['options'] = [
{ title: "选项1", value: "1" },
{ title: "选项2", value: "2" }
];

return (
<>
<TiButton onClick={() => dropdownItemRef.current?.toggle()}>
主动控制
</TiButton>
<TiDropdownMenu>
<TiDropdownItem
ref={dropdownRef}
onOpen={handleOpen}
onChange={handleChange}
title="默认展开"
options={dropMenuOptions}
/>
<TiDropdownItem title="标题1" options={dropMenuOptions} />
<TiDropdownItem title="标题2" options={dropMenuOptions} />
</TiDropdownMenu>
</>
)
}

TiDropdownMenu API

属性 Properties

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

可扩展样式名 External Class

名称说明备注
extClass根节点可扩展的类名-
titleClass标题可扩展的类名-

CSS 变量 CSS Variables

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

TiDropdownItem API

属性 Properties

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

TiDropdownItemOption

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

事件 Events

名称参数列表描述备注
onClose(e: CustomEvent<never>) => void关闭时触发的事件-
onOpen(e: CustomEvent<never>) => void打开时触发的事件-
onChange(e: CustomEvent<string | number | Array<string | number>>) => void切换时触发的事件-
onSubmit(e: CustomEvent<string | number | Array<string | number>>) => void提交时触发的事件-

可扩展样式名 External Class

类名说明备注
extClass扩展样式类名-

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