https://github.com/twp0217/react-mac-dock
React Mac Dock(Mac 程序坞)
https://github.com/twp0217/react-mac-dock
dock mac mac-dock react react-component react-mac-dock
Last synced: about 1 year ago
JSON representation
React Mac Dock(Mac 程序坞)
- Host: GitHub
- URL: https://github.com/twp0217/react-mac-dock
- Owner: twp0217
- Created: 2021-09-13T04:38:10.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-15T05:14:30.000Z (almost 5 years ago)
- Last Synced: 2025-03-28T10:50:32.051Z (over 1 year ago)
- Topics: dock, mac, mac-dock, react, react-component, react-mac-dock
- Language: TypeScript
- Homepage: https://twp0217.github.io/react-mac-dock/
- Size: 1.93 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react-mac-dock - Mac 程序坞
## 使用
```typescript
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 (
);
};
```
## 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，欢迎讨论。