# react-mac-dock

**Repository Path**: twp0217/react-mac-dock

## Basic Information

- **Project Name**: react-mac-dock
- **Description**: React Mac Dock(Mac 程序坞)
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-18
- **Last Updated**: 2021-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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 (
    <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，欢迎讨论。