关于react.js:Ant-Design-Pro配置

不论是前端框架，还是后端框架，大多数状况下，咱们只想批改一些根本配置后，就能疾速依据本人的业务需要进行开发我的项目。这也是咱们违心应用一些优良框架的起因。

在 Ant Design Pro 中，调整配置的中央不止一处，都有哪些呢？一起来看看吧。

1、defaultSetting.js 配置

地位：/config/defaultSetting.js

const proSettings = {
  navTheme: 'dark',
  // 黎明蓝
  primaryColor: '#1890ff',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  menu: {locale: true,},
  title: 'Ant Design Pro',
  pwa: false,
  iconfontUrl: '',
};
export default proSettings;

navTheme

导航的主题，可选值为：’light’ | ‘dark’，其成果别离为：

primaryColor

主题色，默认为：黎明蓝（#1890ff），咱们能够更换主题色，比方：（#722ED1），其效果图如下：

如果咱们想更换其它色彩，请参考 Ant Design 色调。传送门

layout

layout 的菜单模式，side：右侧导航，top：顶部导航，mix：混合导航，其效果图别离为：

contentWidth

layout 的内容模式，Fluid：自适应，Fixed：定宽 1200px，其效果图别离为：

留神：contentWidth 只有在 layout:”top” 或者 layout:”mix” 状况下失效

fixedHeader

是否固定 header 到顶部，默认为：false

fixSiderbar

是否固定导航，默认为：false

colorWeak

是否开启色弱模式，默认为：false。开启后，其效果图如下：

menu

menu 的配置项，默认 {locale:true}

title

零碎的左上角 的 零碎名称

pwa

是否开启 pwa 模式

iconfontUrl

应用 IconFont 的图标配置

除了上述默认配置，咱们还能够增加更多。
比方，将侧边菜单宽度设置为：300px，即：siderWidth:300 传送门

如果咱们想自定义动静配置时，defaultSetting 配置显然满足不了咱们的需要了，那该去哪里配置呢？
此时，ProLayout 重型组件该出场了。

2、ProLayout 配置

地位：/src/layouts/BasicLayout.js

    <ProLayout
      logo={logo}
      {...props}
      {...settings}
      onCollapse={handleMenuCollapse}
      onMenuHeaderClick={() => history.push('/')}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (
          menuItemProps.isUrl ||
          !menuItemProps.path ||
          location.pathname === menuItemProps.path
        ) {return defaultDom;}
 
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      breadcrumbRender={(routers = []) => [
        {
          path: '/',
          breadcrumbName: '首页',
        },
        ...routers,
      ]}
      itemRender={(route, params, routes, paths) => {const first = routes.indexOf(route) === 0;
        return first ? (<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        ) : (<span>{route.breadcrumbName}</span>
        );
      }} 
      footerRender={() => {if (settings.footerRender || settings.footerRender === undefined) {return defaultFooterDom;}
        return null;
      }}
      menuDataRender={menuDataRender}
      rightContentRender={() => <RightContent />}
      postMenuData={(menuData) => {menuDataRef.current = menuData || [];
        return menuData || [];}}
      waterMarkProps={{
        content: 'Ant Design Pro',
        fontColor: 'rgba(24,144,255,0.15)',
      }}
    >
      <Authorized authority={authorized.authority} noMatch={noMatch}>
        {children}
      </Authorized>
    </ProLayout>

在这里，咱们能够更改零碎的题目、logo、菜单款式、布局等等。因为这里 ProLayout 为 Ant Design 的重型组件。咱们会在后续章节有更具体的解说。