Skip to content

新增下拉菜单组件 Dropdown #986

@JeromeLin

Description

@JeromeLin

实现一个下拉菜单组件,点击菜单标题,向下(或向上)拉出内容区域,点击遮罩收回下拉内容。

示例如下:

image

Demo

import { Dropdown } from 'zarm';

render(
  <Dropdown>
    <Dropdown.Item key="key1" title="菜单一">内容一</Dropdown.Item>
    <Dropdown.Item key="key2" title="菜单二">内容二</Dropdown.Item>
  </Dropdown>
);

Props

export interface DropdownProps {
  actively?: number | string;
  defaultActiveKey?: number | string;
  onChange?: (activeKey: number | string) => void;
  arrow?: ReactNode;
}

export interface DropdownItemProps {
  key?: number | string;
  title?: ReactNode;
  arrow?: ReactNode;
}

API

Dropdown

属性 类型 默认值 说明
activeKey number | string - 激活的 Item Key
defaultActiveKey number | string - 默认激活的 Item Key
onChange (activeKey: number | string) => void - activeKey 变化时触发的回调函数
arrow ReactNode - 箭头样式

DropdownItem

属性 类型 默认值 说明
key number | string - 唯一值
title ReactNode - 标题
arrow ReactNode - 箭头样式

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions