1.1.1 • Published 3 years ago
react-mac-dock - Mac 程序坞
使用
import React from 'react';
import MacDock, { MacDockItem } from '@twp0217/react-mac-dock';
import './index.less';
export default () => {
const items: MacDockItem[] = [
{
label: 'nautilus',
icon: 'https://twp0217.github.io/react-mac-dock/demo/nautilus.png',
},
{
label: 'opera',
icon: 'https://twp0217.github.io/react-mac-dock/demo/opera.png',
},
{
label: 'addressbook',
icon: 'https://twp0217.github.io/react-mac-dock/demo/addressbook.png',
},
{
label: 'dictionary',
icon: 'https://twp0217.github.io/react-mac-dock/demo/dictionary.png',
},
{
label: 'update',
icon: 'https://twp0217.github.io/react-mac-dock/demo/update.png',
},
{
label: 'settings',
icon: 'https://twp0217.github.io/react-mac-dock/demo/settings.png',
},
{
label: 'trash',
icon: 'https://twp0217.github.io/react-mac-dock/demo/trash.png',
},
];
return (
<div className="demo-container">
<MacDock items={items} />
</div>
);
};
API
MacDockItem
名称 | 类型 | 默认值 | 说明 |
---|
label | string | number | - | key |
icon | number | - | label |
MacDockProps
名称 | 类型 | 默认值 | 说明 |
---|
className | string | - | 类名 |
style | React.CSSProperties | - | 样式 |
placement | top | bottom | left | right | bottom | 位置 |
size | default | small | number | default | 图标大小 |
items | MacDockItem[] | - | 数据 |
renderItem | (item: MacDockItem, originNode: React.ReactNode) => React.ReactNode | - | 自定义渲染列表项 |
onClick | (item: MacDockItem) => void | - | 点击节点时的回调 |
支持
- 如果项目对你有帮助,请点颗星星:star:,谢谢。
- 如果你对项目有想法、问题、BUG,欢迎讨论。