下拉菜单 DropdownMenu

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

使用

API

安装使用

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

用法示例

基本使用

codesanbox

copy

code

import React from 'react';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-react';

export default function DropdownDefault() {
  const dropMenuOptions: TiDropdownItemProps['options'] = [
    { title: '选项1', value: '1' },
    { title: '选项2', value: '2' },
  ];
  return (
    <div className="content">
      <TiDropdownMenu>
        <TiDropdownItem title="标题1" options={dropMenuOptions} />
        <TiDropdownItem title="标题2" options={dropMenuOptions} />
      </TiDropdownMenu>
    </div>
  );
}

设置选中值

codesanbox

copy

code

import React from 'react';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-react';

export default function DropdownDefault() {
  const dropMenuOptions: TiDropdownItemProps['options'] = [
    { title: '选项1', value: '1' },
    { title: '选项2', value: '2' },
  ];
  return (
    <div className="content">
      <TiDropdownMenu>
        <TiDropdownItem value={['1']} title="标题1" options={dropMenuOptions} />
        <TiDropdownItem title="标题2" options={dropMenuOptions} />
      </TiDropdownMenu>
    </div>
  );
}

submit 模式

codesanbox

copy

code

import React from 'react';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-react';

export default function DropdownDefault() {
  const dropMenuOptions: TiDropdownItemProps['options'] = [
    { title: '选项1', value: '1' },
    { title: '选项2', value: '2' },
  ];
  return (
    <div className="content">
      <TiDropdownMenu>
        <TiDropdownItem hasSubmit submitText="确定" title="标题1" options={dropMenuOptions} />
        <TiDropdownItem title="标题2" options={dropMenuOptions} />
      </TiDropdownMenu>
    </div>
  );
}

主动控制

codesanbox

copy

code

import React, { useCallback, useRef } from 'react';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu, TiButton } from 'titian-h5-react';

export default function DropdownDefault() {
  const dropdownItemRef = useRef<HTMLTiDropdownItemElement>();

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

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

  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 (
    <div className="content" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <TiButton onClick={() => dropdownItemRef.current?.toggle()}>主动控制</TiButton>
      <TiDropdownMenu>
        <TiDropdownItem
          ref={dropdownItemRef}
          onOpen={handleOpen}
          onClose={handleClose}
          onChange={handleChange}
          title="默认展开"
          options={dropMenuOptions}
        />
        <TiDropdownItem title="标题1" options={dropMenuOptions} />
        <TiDropdownItem title="标题2" options={dropMenuOptions} />
      </TiDropdownMenu>
    </div>
  );
}

方向向上

codesanbox

copy

code

import React from 'react';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-react';

export default function DropdownDefault() {
  const dropMenuOptions: TiDropdownItemProps['options'] = [
    { title: '选项1', value: '1' },
    { title: '选项2', value: '2' },
  ];
  return (
    <div className="content">
      <TiDropdownMenu direction="up">
        <TiDropdownItem title="标题1" options={dropMenuOptions} />
        <TiDropdownItem title="标题2" options={dropMenuOptions} />
      </TiDropdownMenu>
    </div>
  );
}

禁用点击

codesanbox

copy

code

import React from 'react';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-react';

export default function DropdownDefault() {
  const dropMenuOptions: TiDropdownItemProps['options'] = [
    { title: '选项1', value: '1' },
    { title: '选项2', value: '2' },
  ];
  return (
    <>
      <div className="content">
        <TiDropdownMenu>
          <TiDropdownItem disabled title="标题1" options={dropMenuOptions} />
          <TiDropdownItem title="标题2" options={dropMenuOptions} />
        </TiDropdownMenu>
      </div>

      <div className="content">
        <TiDropdownMenu disabled>
          <TiDropdownItem title="标题1" options={dropMenuOptions} />
          <TiDropdownItem title="标题2" options={dropMenuOptions} />
        </TiDropdownMenu>
      </div>
    </>
  );
}

事件操作

codesanbox

copy

code

import React, { useCallback } from 'react';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-react';

export default function DropdownDefault() {
  const handleClose = useCallback((e: CustomEvent<never>) => {
    console.log(e.detail);
  }, []);

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

  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 (
    <div className="content">
      <TiDropdownMenu>
        <TiDropdownItem
          onClose={handleClose}
          onOpen={handleOpen}
          onChange={handleChange}
          title="默认展开"
          options={dropMenuOptions}
        />
        <TiDropdownItem title="标题1" options={dropMenuOptions} />
        <TiDropdownItem title="标题2" options={dropMenuOptions} />
      </TiDropdownMenu>
    </div>
  );
}

TiDropdownMenu API

属性 Properties

名称	类型	必填	默认值	说明	备注
mode	string	否	-	列表选择的模式，可选项：single、multiple	-
hasMask	boolean	否	true	是否显示遮罩	-
closeOnMask	boolean	否	true	是否允许点击遮罩关闭下拉菜单	-
type	string	否	-	激活选择的样式种类，可选项：checkbox，switch	-
icon	string	否	-	列表选择的图标	-
activeColor	string	否	-	选中状态的颜色	-
disabled	boolean	否	false	是否禁用	-
direction	up | down	否	down	展示方向	-
getPosition	<code>(rect: { rect: DOMRect; direction: 'up' | 'down'; position: IPosition }) => IPosition</code>	否	down	展示方向， 可选值为：down、up	自定义展示位置

可扩展样式名 External Class

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

CSS 变量 CSS Variables

| --dropdown-menu-title-wrap-bg-color | theme.color.gray.background.default | - | - | | --dropdown-menu-icon-margin-left | theme.spacing.gap.g1 | 标题与图标间距 | - | | --dropdown-title-font-weight | theme.fontWeight.regular | 标题字重 | - |

TiDropdownItem API

属性 Properties

名称	类型	必填	默认值	说明	备注
title	string	是	-	标题	-
options	Array<TiDropdownItemOption>	是	-	选项列表	-
visible	boolean	否	false	是否显示	-
mode	string	否	single	列表选择的模式，可选值：single、multiple	-
icon	string	否	selected	列表选择的图标	-
disabled	boolean	否	false	是否禁用	-
value	<code>string | number | Array<string | number></code>	否	-	唯一标识	-
type	checkbox | switch	否	checkbox	下拉列表选中时的选择样式	-
hasMask	boolean	否	false	是否显示遮罩	-
closeOnMask	boolean	否	false	是否阻止遮罩点击关闭事件	-
activeColor	string	否	-	选中状态的颜色	-
hasSubmit	boolean	否	false	是否显示提交的按钮	-
submitText	string	否	-	提交按钮的文字	-
direction	string	否	down	展示方向， 可选值为：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	<code>(e: CustomEvent<string | number | Array<string | number>>) => void</code>	切换时触发的事件	-
onSubmit	<code>(e: CustomEvent<string | number | Array<string | number>>) => void</code>	提交时触发的事件	-

可扩展样式名 External Class

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

CSS 变量 CSS Variables

变量	默认值	说明	备注
--dropdown-active-color	theme.color.brand.1000	激活状态的主体颜色	-
--dropdown-label-active-color	theme.color.brand.1000	-	-
--dropdown-select-icon-color	theme.color.brand.1000	-	-
--dropdown-title-font-weight	theme.fontWeight.regular	标题字重	-
--dropdown-menu-icon-margin-left	theme.spacing.gap.g1	标题与图标间距	-