@twp0217/react-mac-dock

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	-	点击节点时的回调

支持

• 如果项目对你有帮助，请点颗星星⭐，谢谢。
• 如果你对项目有想法、问题、BUG，欢迎讨论。