0.1.0 • Published 2 years ago

react-ring-menu v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react ring menu

简体中文 | English

React 环形菜单组件

安装

yarn add react-ring-menu

使用

参考 ./example 目录

const items: MenuItem[] = [
  {
    key: '1',
    title: '1',
    disabled: true,
    children: [{ key: '1-1', title: '1-1' }],
  },
  {
    key: '2',
    title: '2',
    children: [{ key: '2-1', title: '2-1' }],
  },
];

const Container = () => {
  return (
    <div style={{ position: 'relative' }}>
      <RingMenu items={items} position={{ x: 200, y: 200 }} />
    </div>
  );
};

API

Props

属性说明类型默认值
items菜单项MenuItem[]
position绝对定位位置Point{x: 0, y: 0}
width菜单宽度number50
hollowRadius菜单内空心圆半径number20
onClick点击 MenuItem 时的回调(menu: MenuItem, e: MouseEvent<SVGElement>) => void

MenuItem

属性说明类型
key菜单项的唯一标识string \| number
title菜单项标题string
disabled是否禁用菜单项boolean
children子菜单MenuItem[]