Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@uiw/react-dropdown
Advanced tools
向下弹出的列表。
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_
);
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
menu | 菜单 | <Menu> | - |
disabled | 菜单是否禁用 | Boolean | - |
trigger<OverlayTrigger> | 悬停/点击弹出窗口 | Enum{hover , click , focus } | hover |
placement<OverlayTrigger> | 指定弹出框位置,支持 12 个访问展示菜单。 | Enum{} | bottomLeft |
更多属性文档请参考 OverlayTrigger。
FAQs
Dropdown component
We found that @uiw/react-dropdown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.