@twp0217/react-mac-dock
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

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,欢迎讨论。

Package Sidebar

Install

npm i @twp0217/react-mac-dock

Weekly Downloads

1

Version

1.1.1

License

MIT

Unpacked Size

1.14 MB

Total Files

40

Last publish

Collaborators

  • twp0217