0.1.28 • Published 6 months ago
submenu-g v0.1.28
submenu-g
Submenu component based on antd with React
Screenshot
Demo
online example: https://favori.gitee.io/gantd-landing (CodePen)
install
Feature
- Can switch to the top
- Support magnetic absorption effect
- Fast page turn footer
Usage
import React from 'react';
import Submenu from 'submenu-g';
import { Icon } from 'antd';
import { UserOutlined } from '@ant-design/icons';
function BasicUse() {
const menuData = [
{
title: 'menu_1',
icon: <Icon type='idcard' />,
path: 'personal',
count: 10
},
{
title: 'menu_2',
icon: <Icon type='global' />,
path: 'preferences',
count: 10
},
{
title: 'menu_3',
icon: <Icon type='lock' />,
path: 'editpwd',
count: 10
},
].map(item => ({ ...item, key: item.path }));
const [selectedKey, setSelectedKey] = useState(menuData[0].path)
const menuBoxRef = useRef(null);
const onSelectedChange = (key, record, item) => setSelectedKey(key);
const onSwitchChange = (mode) => {
// console.log(mode)
}
const activeMenu = _.find(menuData, i => i.path === selectedKey)
return (
<Submenu
menuData={menuData}
selectedKey={selectedKey}
width={180}
setMenuBoxRef={ref => { menuBoxRef.current = ref }}
showFlipOverFooter
onCollapseChange={(collapsed) => {
console.log(collapsed)
console.log(menuBoxRef)
}}
onSelectedChange={onSelectedChange}
onSwitchChange={onSwitchChange}
extra={
<div style={{ padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div>
<Avatar size={64} icon={UserOutlined} />
<div style={{ textAlign: 'center' }}>admin</div>
</div>
</div>
}
>
<div style={{ padding: '20px', height: 400 }}>
{activeMenu['title']}
</div>
</Submenu>
)
}
React.render(<BasicUse/>, mountNode);
API
Contact
- Create a Github issue for bug reports, feature requests, or questions
- Follow @GantFDT for announcements
- Add a ⭐️ star on GitHub to support the project❤️!
Anthor
GantFDT
License
MIT
0.1.28
6 months ago
0.1.26
2 years ago
0.1.25
3 years ago
0.1.24
3 years ago
0.1.23
3 years ago
0.1.22
3 years ago
0.1.20
3 years ago
0.1.21
3 years ago
0.1.18
3 years ago
0.1.17
3 years ago
0.1.16
4 years ago
0.1.15
4 years ago
0.1.14
4 years ago
0.1.13
4 years ago
0.1.12
4 years ago
0.1.10
4 years ago
0.1.11
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago
0.0.28
4 years ago
0.0.27
4 years ago
0.0.26
4 years ago
0.0.25
4 years ago
0.0.24
4 years ago
0.0.23
4 years ago
0.0.22
4 years ago
0.0.20
4 years ago
0.0.21
4 years ago
0.0.19
4 years ago
0.0.18
4 years ago
0.0.12
4 years ago
0.0.13
4 years ago
0.0.3
4 years ago
0.0.1
4 years ago