@antdp/basic-layouts

@antdp/basic-layouts

入口公共界面

安装

$ npm i @antdp/basic-layouts  # yarn add  @antdp/basic-layouts

基本使用

import React from 'react';
import BasicLayouts from '@antdp/basic-layouts';
const Demo = () => {
  return (
    <BasicLayouts
      projectName="Ant Design Pro"
    />
  )
};

export default Demo

导航菜单模式

import React from 'react';
import BasicLayout from '@antdp/basic-layouts';
const Demo = () => {
  return (
    <BasicLayout
      // topleft | mix
      layout="slider"
    />
  )
};

export default Demo

菜单国际化设置

import BasicLayouts from '@antdp/basic-layouts';
import { useIntl,SelectLang } from '@umijs/max';

const Demo = () => {
  return (
    <BasicLayouts
      projectName="Ant Design Pro"
      intlLanguage={useIntl()}
      topRightLanguage={<SelectLang />}
    />
  )
};
export default Demo

配置右侧菜单

import BasicLayouts from '@antdp/basic-layouts';

export default () => {
  return (
    <BasicLayouts
      projectName="Ant Design Pro"
      topRightMenu={[
          {
            title: '个人中心',
            icon: <UserOutlined />,
            onClick: () => {},
          },
          {
            title: '个人设置',
            link: '/setting/property',
            icon: <SettingOutlined />,
          },
          {
            divider: true,
          },
          {
            title: '退出登录',
            icon: <LogoutOutlined />,
            onClick: () => {
              logout();
            },
          },
        ]}
    />
  )
};

配置暗模式

import BasicLayouts from '@antdp/basic-layouts';

export default () => {
  return (
    <BasicLayouts
      theme="dark"
      projectName="Ant Design Pro"
      topRightMenu={[
        {
          title: '个人中心',
          icon: <UserOutlined />,
          onClick: () => {},
        },
        {
          title: '个人设置',
          link: '/setting/property',
          icon: <SettingOutlined />,
        },
        {
          divider: true,
        },
        {
          title: '退出登录',
          icon: <LogoutOutlined />,
          onClick: () => {
            logout();
          },
        },
      ]}
    />
  )
};

API

参数	说明	类型	默认值
logo	项目logo	string	-
projectName	项目名称	React.ReactNode	-
children	自定义内容	React.ReactNode	-
intlLanguage	国际化语言转换方法	IntlShape
topRightMenu	头像下拉菜单	TopRightMenuProps[]	-
bodyPadding	设置内容区域补白，默认 14px	number	-
topRightLanguage	顶部右方	React.ReactNode	-
siderWidth	置最左边菜单宽度	number	180
profile	用户信息显示	{avatar?: string;name?: string}	-
theme	明暗主题	dark | light	light
className	样式	string	-
configProviderProps	antd组件全局化配置	ConfigProviderProps	-
layout	导航菜单模式,slider：右侧导航，topleft：顶部左侧导航，mix：混合导航	LayoutModel	mix

TopRightMenuProps

参数	说明	类型	默认值
icon	图标	React.ReactNode	-
title	标题	React.ReactNode	-
link	链接	string	-
divider	是否有下划线	boolean	-
onClick	点击事件	IntlShape