@xiongtaoiot/xt-layout
v0.0.6
Published
```tsx import XtLayout, { MenuItem } from "@xiongtaoiot/xt-layout"; import { HeartOutlined, SmileOutlined } from "@ant-design/icons"; import { createBrowserHistory } from "history";
Downloads
2
Readme
Xt Layout
Example
import XtLayout, { MenuItem } from "@xiongtaoiot/xt-layout";
import { HeartOutlined, SmileOutlined } from "@ant-design/icons";
import { createBrowserHistory } from "history";
const IconMap: Record<string, React.ReactNode> = {
smile: <SmileOutlined />,
heart: <HeartOutlined />,
};
const componentMap: Record<string, React.ReactNode> = {
welcome: <div>hello welcome</div>,
demo: <div>demo here</div>,
};
const defaultMenus = [
{
path: "/",
name: "欢迎",
icon: "smile",
children: [
{
path: "/welcome",
name: "一",
icon: "smile",
component: "welcome",
},
],
},
{
path: "/demo",
name: "示例",
icon: "heart",
component: "demo",
},
];
const loopMenuItem = (menus: any[]): MenuItem[] =>
menus.map(({ component, icon, children, ...item }) => ({
...item,
icon: icon && IconMap[icon as string],
component: component && componentMap[component as string],
children: children && loopMenuItem(children),
}));
export default () => {
return (
<XtLayout
history={createBrowserHistory()}
menu={{ request: async () => loopMenuItem(defaultMenus) }}
title="菜单布局"
menuFooterRender={() => <div>menu footer here</div>}
headerContentRender={() => <div>header here</div>}
/>
);
};