Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@uiw/react-dropdown

Package Overview
Dependencies
Maintainers
1
Versions
172
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-dropdown

Dropdown component

  • 4.19.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
318
increased by135.56%
Maintainers
1
Weekly downloads
 
Created
Source

Dropdown 下拉菜单

Open in unpkg NPM Downloads npm version

向下弹出的列表。

import { Dropdown } from 'uiw';
// or
import Dropdown from '@uiw/react-dropdown';

基本用法

import React from 'react';
import ReactDOM from 'react-dom';
import { Dropdown, Menu, ButtonGroup, Button, Divider, Icon } from 'uiw';

const menu = (
  <div>
    <Menu bordered style={{ minWidth: 120 }}>
      <Menu.Item icon="reload" text="重新加载" />
      <Menu.Item icon="heart-on" text="另存为" active />
      <Menu.Item icon="appstore" text="应用商城" />
      <Menu.Item icon="bar-chart" text="月统计报表" />
      <Menu.Item icon="setting" text="偏好设置" />
    </Menu>
  </div>
);

class Demo extends React.Component {
  render() {
    return (
      <div>
        <Dropdown menu={menu}>
          <a href='#' onClick={e => e.preventDefault()}>
            鼠标经过出现菜单 <Icon type="down" />
          </a>
        </Dropdown>
        <Dropdown trigger="click" menu={menu}>
          <a href='#' onClick={e => e.preventDefault()}>
            点击我出现下拉菜单 <Icon type="down" />
          </a>
        </Dropdown>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

被禁用

import ReactDOM from 'react-dom';
import { Dropdown, Menu, ButtonGroup, Button } from 'uiw';

const menu = (
  <div>
    <Menu bordered style={{ maxWidth: 200 }}>
      <Menu.Item icon="reload" text="重新加载" />
      <Menu.Divider />
      <Menu.Item icon="heart-on" text="另存为" active />
      <Menu.Item icon="appstore" text="应用商城" />
      <Menu.Item icon="bar-chart" text="月统计报表导出" />
      <Menu.Item icon="setting" text="偏好设置" />
    </Menu>
  </div>
);

ReactDOM.render(
  <div>
    <ButtonGroup style={{ marginRight: 5, display: 'inline-block' }}>
      <Button disabled icon="copy">点击右边</Button>
      <Dropdown disabled trigger="click" placement="bottomRight" menu={menu}>
        <Button icon="more" />
      </Dropdown>
    </ButtonGroup>
    <Dropdown disabled menu={menu}>
      <Button basic type="link"> (超连接样式)link </Button>
    </Dropdown>
    <Dropdown disabled menu={menu}>
      <Button type="primary">主要按钮</Button>
    </Dropdown>
    <Dropdown disabled menu={menu}>
      <Button type="success">成功按钮</Button>
    </Dropdown>
    <Dropdown disabled menu={menu}>
      <Button type="warning">警告按钮</Button>
    </Dropdown>
    <Dropdown disabled menu={menu}>
      <Button type="danger">错误按钮</Button>
    </Dropdown>
    <Dropdown disabled menu={menu}>
      <Button type="light">亮按钮</Button>
    </Dropdown>
    <Dropdown disabled menu={menu}>
      <Button type="dark">暗按钮</Button>
    </Dropdown>
  </div>,
  _mount_
);

弹出位置

import ReactDOM from 'react-dom';
import { Dropdown, Menu, ButtonGroup, Button } from 'uiw';

const menu = (
  <div>
    <Menu bordered style={{ maxWidth: 200 }}>
      <Menu.Item icon="reload" text="重新加载" />
      <Menu.Divider />
      <Menu.Item icon="heart-on" text="另存为" active />
      <Menu.Item icon="appstore" text="应用商城" />
      <Menu.Item icon="bar-chart" text="月统计报表导出" />
      <Menu.Item icon="setting" text="偏好设置" />
    </Menu>
  </div>
);

ReactDOM.render(
  <div>
    <ButtonGroup style={{ marginRight: 5, display: 'inline-block' }}>
      <Button icon="copy">top</Button>
      <Dropdown trigger="click" placement="top" menu={menu}>
        <Button icon="more" />
      </Dropdown>
    </ButtonGroup>
    <Dropdown menu={menu} trigger="click" placement="topLeft">
      <Button type="primary">topLeft</Button>
    </Dropdown>
    <Dropdown menu={menu} trigger="click" placement="topRight">
      <Button type="success">topRight</Button>
    </Dropdown>
    <Divider />
    <Dropdown menu={menu} trigger="click" placement="bottomRight">
      <Button type="light">bottomRight</Button>
    </Dropdown>
    <Dropdown menu={menu} trigger="click" placement="bottom">
      <Button type="warning">bottom</Button>
    </Dropdown>
    <Dropdown menu={menu} trigger="click" placement="bottomLeft">
      <Button type="danger">bottomLeft</Button>
    </Dropdown>
    <Dropdown menu={menu} trigger="click" placement="right">
      <Button type="dark">right</Button>
    </Dropdown>
  </div>,
  _mount_
);

选择器

import React from 'react';
import ReactDOM from 'react-dom';
import { Dropdown, Menu, Button, Icon } from 'uiw';

function Select(props) {
  const { option, onChange } = props;
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState(props.value);
  const label = option.find(item => value === item.value);

  React.useEffect(() => {
    if (props.value !== value) {
      setValue(props.value);
    }
  }, [props.value]);

  return (
    <Dropdown
      trigger="click"
      onVisibleChange={(isOpen) => setOpen(isOpen)}
      isOpen={open}
      menu={
        <div>
          <Menu bordered style={{ minWidth: 120 }}>
            {option.map((item, idx) => {
              const active = value === item.value;
              return (
                <Menu.Item
                  key={idx}
                  active={active}
                  text={item.label}
                  onClick={(e) => {
                    setValue(item.value)
                    setOpen(false)
                    onChange && onChange(item.value, e)
                  }}
                />
              );
            })}
          </Menu>
        </div>
      }
    >
      <Button type="link">{label.label}<Icon type={open ? 'up' : 'down'} /></Button>
    </Dropdown>
  )
}

const option = [
  { label: '往返', value: 1 },
  { label: '单程', value: 2 },
  { label: '联程', value: 3 },
  { label: 'Nomad', value: 4 },
];

const option2 = [
  { label: '经济舱', value: 1 },
  { label: '豪华经济舱', value: 2 },
  { label: '商务舱', value: 3 },
  { label: '头等舱', value: 4 },
];

ReactDOM.render(
  <div>
    <Select option={option} value={1} onChange={(item) => { console.log('item', item); }} />
    <Select option={option2} value={2} onChange={(item) => { console.log('item', item); }} />
  </div>,
  _mount_
);

Props

参数说明类型默认值
menu菜单<Menu>-
disabled菜单是否禁用Boolean-
trigger<OverlayTrigger>悬停/点击弹出窗口Enum{hover, click, focus}hover
placement<OverlayTrigger>指定弹出框位置,支持 12 个访问展示菜单。Enum{}bottomLeft

更多属性文档请参考 OverlayTrigger

Keywords

FAQs

Package last updated on 07 Apr 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc