antd-layout

npm i -S antd-layout

TopMenuLayout 上下布局组件

Demo:

import React from 'react';
import { TopMenuLayout } from 'antd-layout';

function Home() {
  return (
    <>
      Home
    </>
  )
}

function Header() {
  return (
    <>
      Header
    </>
  )
}

const routes = [
  {
    path: '/',
    title: 'Home',
    icon: 'icon-tuichu',
    component: Home
  },
  {
    path: '/header',
    title: 'Header',
    icon: 'icon-twitter',
    component: Header
  },
]

export default () => (
  <TopMenuLayout
    logo={"https://gw.alicdn.com/tfs/TB1hY9aHYj1gK0jSZFuXXcrHpXa-316-316.jpg"}
    menuTheme={"light"}
    itemDefaultSelected={0}
    routes={routes}
    menuFixed={false}
    contentStyle={{
      margin: '20px',
      backgroundColor: '#fff'
    }}
    iconFontUrl={"//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"}
  />
);