2.1.1 • Published 1 year ago

@antdp/basic-layouts v2.1.1

Weekly downloads
63
License
MIT
Repository
github
Last release
1 year ago

@antdp/basic-layouts

npm npm download

入口公共界面

安装

$ 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

导航菜单模式

slider

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

Ant Design Project

mix

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

Ant Design Project

topleft

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

Ant Design Project

配置明亮主题

亮主题light

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

export default () => {
  return (
    <BasicLayouts
      theme="light"
      projectName="Ant Design Pro"
    />
  )
};

暗主题dark

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

export default () => {
  return (
    <BasicLayouts
      theme="dark"
      projectName="Ant Design Pro"
    />
  )
};

默认样式

 const defaultThemeColors = (layout) =>{
  if(layout === 'slider'){
    return {
      light: {
        '--primary-slider-bg': 'rgb(36, 37, 37)',
        '--primary-header-bg': '#fff',
        '--primary-shadow': 'rgba(29,35,41,.05)',
        '--primary-slider-trigger-border': '#fff',
        '--primary-sider-trigger-text-color': '#fff',
        '--primary-header-text-color': 'rgb(36, 37, 37)',
        '--primary-title-text-color': '#fff',
        '--primary-content-bg': '#f5f5f5',
        'itemSelectedBg': 'rgb(24, 144, 255)',
        'colorItemBgSelected': '#fff',
        'itemActiveBg': '#fff',
        'horizontalItemSelectedBg': '#fff',
        'itemColor': 'rgba(229, 224, 216, 0.85)',
        'itemHoverColor': 'rgba(229, 224, 216, 0.85)',
        'itemSelectedColor': '#fff',
        'colorBgElevated': 'rgba(229, 224, 216, 0.85)',
      },
      dark: {
        '--primary-slider-bg': 'rgb(36, 37, 37)',
        '--primary-header-bg': 'rgb(36, 37, 37)',
        '--primary-shadow': 'rgba(13, 13, 13, 0.65)',
        '--primary-slider-trigger-border': '#fff',
        '--primary-sider-trigger-text-color': '#fff',
        '--primary-header-text-color': '#fff',
        '--primary-title-text-color': '#fff',
        '--primary-content-bg': '#1d1d1d',
        'itemSelectedBg': 'rgb(24, 144, 255)',
        'colorItemBgSelected': '#fff',
        'itemActiveBg': '#fff',
        'horizontalItemSelectedBg': '#fff',
        'itemColor': 'rgba(229, 224, 216, 0.85)',
        'itemHoverColor': 'rgba(229, 224, 216, 0.85)',
        'itemSelectedColor': '#fff',
        'colorBgElevated': 'rgba(229, 224, 216, 0.85)',
      },
    }
  }
  if(layout === 'topleft'){
    return {
      light: {
        '--primary-slider-bg': '#fff',
        '--primary-header-bg': '#fff',
        '--primary-shadow': 'rgba(0,21,41,.12)',
        '--primary-slider-trigger-border': 'rgba(0,0,0,.06)',
        '--primary-sider-trigger-text-color': '#1d1d1d',
        '--primary-header-text-color': '#1d1d1d',
        '--primary-title-text-color': '#1d1d1d',
        '--primary-content-bg': '#f5f5f5',
        'itemSelectedBg': '#e6f7ff',
        'colorItemBgSelected': 'rgba(0, 0, 0, 0.06)',
        'itemActiveBg': '#e6f7ff',
        'horizontalItemSelectedBg': 'rgba(0, 0, 0, 0.06)',
        'itemColor': 'rgba(0, 0, 0, 0.65)',
        'itemHoverColor': 'rgba(0, 0, 0, 0.85)',
        'itemSelectedColor': 'rgb(24, 144, 255)',
        'colorBgElevated': '#fff',
      },
      dark: {
        '--primary-slider-bg': 'rgb(36, 37, 37)',
        '--primary-header-bg': 'rgb(36, 37, 37)',
        '--primary-shadow': 'rgba(13, 13, 13, 0.65)',
        '--primary-slider-trigger-border': '#fff',
        '--primary-sider-trigger-text-color': '#fff',
        '--primary-header-text-color': '#fff',
        '--primary-title-text-color': '#fff',
        '--primary-content-bg': '#1d1d1d',
        'itemSelectedBg': 'rgb(24, 144, 255)',
        'colorItemBgSelected': 'rgb(36, 37, 37)',
        'itemActiveBg': '#fff',
        'horizontalItemSelectedBg': 'rgb(36, 37, 37)',
        'itemColor': 'rgba(229, 224, 216, 0.85)',
        'itemHoverColor': 'rgba(229, 224, 216, 0.85)',
        'itemSelectedColor': '#fff',
        'colorBgElevated': 'rgba(229, 224, 216, 0.85)',
      },
    }
  }
  if(layout === 'mix'){
    return {
      light: {
        '--primary-slider-bg': '#fff',
        '--primary-header-bg': 'rgb(36, 37, 37)',
        '--primary-shadow': 'rgba(0,21,41,.08)',
        '--primary-slider-trigger-border': 'rgba(0,0,0,.06)',
        '--primary-sider-trigger-text-color': 'rgb(36, 37, 37)',
        '--primary-header-text-color': '#fff',
        '--primary-title-text-color': '#fff',
        '--primary-content-bg': '#f5f5f5',
        'itemSelectedBg': '#e6f7ff',
        'colorItemBgSelected': 'rgba(0, 0, 0, 0.06)',
        'itemActiveBg': '#e6f7ff',
        'horizontalItemSelectedBg': 'rgba(0, 0, 0, 0.06)',
        'itemColor': 'rgba(0, 0, 0, 0.65)',
        'itemHoverColor': 'rgba(0, 0, 0, 0.85)',
        'itemSelectedColor': 'rgb(24, 144, 255)',
        'colorBgElevated': '#fff',
      },
      dark: {
        '--primary-slider-bg': 'rgb(36, 37, 37)',
        '--primary-header-bg': 'rgb(15, 28, 41)',
        '--primary-shadow': 'rgba(13, 13, 13, 0.65)',
        '--primary-slider-trigger-border': '#fff',
        '--primary-sider-trigger-text-color': '#fff',
        '--primary-header-text-color': '#fff',
        '--primary-title-text-color': '#fff',
        '--primary-content-bg': '#1d1d1d',
        'itemSelectedBg': 'rgb(24, 144, 255)',
        'colorItemBgSelected': '#fff',
        'itemActiveBg': '#fff',
        'horizontalItemSelectedBg': '#fff',
        'itemColor': 'rgba(229, 224, 216, 0.85)',
        'itemHoverColor': 'rgba(229, 224, 216, 0.85)',
        'itemSelectedColor': '#fff',
        'colorBgElevated': 'rgba(229, 224, 216, 0.85)',
      },
    }
  }
}

token自定义BasicLayouts颜色

import BasicLayouts from '@antdp/basic-layouts';
import './index.css';

export default () => {
  return (
    <BasicLayouts
      projectName="Ant Design Pro"
      theme="light"
      layout="slider"
      token={{
        menu: {
          // menu 的背景颜色
          colorMenuBackground: '#004FD9',
          // menuItem 的 hover 背景颜色
          colorBgMenuItemHover: 'rgba(0,0,0,0.06)',
          // menuItem 的选中背景颜色
          colorBgMenuItemSelected: 'rgba(0,0,0,0.15)',
          // menuItem 的字体颜色
          colorTextMenu: 'rgba(255,255,255,0.75)',
          // menuItem hover 的选中字体颜色
          colorTextMenuActive: 'rgba(255,255,255,0.95)',
          // menuItem 的选中字体颜色
          colorTextMenuSelected: '#fff',
          // colorBgMenuItemCollapsedElevated
          colorBgMenuItemCollapsedElevated: 'rgba(0,0,0,0.85)',
          // 菜单底部操作栏boderTopColor
          triggerColor: '#fff',
          // 菜单底部操作栏字体颜色
          triggerTextColor: '#fff',
        },
        header: {
          // 头部背景色
          colorHeaderBackground: '#fff',
          // 头部文字颜色
          headerTextColor: '#000',
        },
        // 项目名称颜色
        titleColor: '#fff',
      }}
    />
  )
};

npm.io

菜单国际化设置

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();
            },
          },
        ]}
    />
  )
};

Message

由于antd 5.x需全局包裹App,引用message组件。我们在basic-layouts下也进行了注册。

方法一

import { App } from 'antd';
import React from 'react';

const MyPage = () => {
  const { message, notification, modal } = App.useApp();
  message.success('Good!');
  notification.info({ message: 'Good' });
  modal.warning({ title: 'Good' });
  // ....
  // other message, notification, modal static function
  return <div>Hello word</div>;
};
export default MyPage;

方法二

import { Button, Space } from 'antd';
import React from 'react';
import { message } from '@antdp/basic-layouts';

export default () => {
  const showMessage = () => {
    message.success('Success!');
  };

  return (
    <Space>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
    </Space>
  );
};

API

参数说明类型默认值
logo项目logostring-
projectName项目名称React.ReactNode-
children自定义内容React.ReactNode-
intlLanguage国际化语言转换方法IntlShape
topRightMenu头像下拉菜单TopRightMenuProps[]-
bodyPadding设置内容区域补白,默认 14pxnumber-
topRightLanguage顶部右方React.ReactNode-
siderWidth置最左边菜单宽度number180
profile用户信息显示{avatar?: string;name?: string}-
theme明暗主题dark \| lightlight
className样式string-
layout导航菜单模式,slider:右侧导航,topleft:顶部左侧导航,mix:混合导航LayoutModelmix
token导航和头部样式集合TokenProps-

TopRightMenuProps

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

TokenProps

export interface TokenProps {
  menu?: {
    colorMenuBackground?: string;
    colorBgMenuItemHover?: string;
    colorBgMenuItemSelected?: string;
    colorTextMenu?: string;
    colorTextMenuActive?: string;
    colorTextMenuSelected?: string;
    colorBgMenuItemCollapsedElevated?: string;
    triggerColor?: string;
    triggerTextColor?: string;
  };
  header?: {
    colorHeaderBackground?: string;
    headerTextColor?: string;
  };
  titleColor?: string;
  shadowColor?: string;
  contentBackground?: string;
}
2.1.1

1 year ago

2.1.0

1 year ago

2.0.24

1 year ago

2.0.23

2 years ago

2.0.22

2 years ago

2.0.21

2 years ago

2.0.15

2 years ago

2.0.16

2 years ago

2.0.13

2 years ago

2.0.14

2 years ago

2.0.19

2 years ago

2.0.17

2 years ago

2.0.18

2 years ago

2.0.20

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.9

2 years ago

2.0.8

2 years ago

2.0.1

2 years ago

1.9.1

2 years ago

1.9.0

2 years ago

2.0.11

2 years ago

2.0.12

2 years ago

2.0.10

2 years ago

2.0.0

2 years ago

2.0.0-bate.4.0

2 years ago

2.0.0-bate.5

2 years ago

2.0.0-bate.4

2 years ago

2.0.0-bate.3

2 years ago

1.8.25

2 years ago

1.8.26

2 years ago

1.8.27

2 years ago

2.0.0-bate6

2 years ago

2.0.0-bate-2

2 years ago

2.0.0-bate-4.1

2 years ago

2.0.0-bate-1

2 years ago

2.0.0-bate-0

2 years ago

1.8.20

3 years ago

1.8.21

3 years ago

1.8.22

3 years ago

1.8.23

3 years ago

1.8.24

3 years ago

1.8.17

4 years ago

1.8.18

4 years ago

1.8.19

4 years ago

1.8.16

4 years ago

1.8.15

4 years ago

1.8.14

4 years ago

1.8.13

4 years ago

1.8.12

4 years ago

1.8.11

4 years ago

1.8.9

4 years ago

1.8.10

4 years ago

1.8.8

4 years ago

1.8.7

4 years ago

1.8.6

4 years ago

1.8.2

4 years ago

1.8.5

4 years ago

1.8.4

4 years ago

1.8.3

4 years ago

1.8.1

4 years ago

1.8.0

4 years ago

1.7.0

4 years ago

1.6.19

4 years ago

1.6.17

4 years ago

1.6.16

4 years ago

1.6.18

4 years ago

1.6.15

4 years ago

1.6.14

4 years ago

1.6.11

4 years ago

1.6.13

4 years ago

1.6.4

4 years ago

1.6.10

4 years ago

1.6.9

4 years ago

1.6.8

4 years ago

1.6.7

4 years ago

1.6.6

4 years ago

1.6.5

4 years ago

1.6.3

4 years ago

1.6.2

4 years ago

1.6.0

4 years ago

1.5.4

5 years ago

1.5.2

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.3

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.12

5 years ago

1.3.11

5 years ago

1.3.10

5 years ago

1.3.9

5 years ago

1.3.8

5 years ago

1.3.7

5 years ago

1.3.6

5 years ago

1.3.5

5 years ago

1.3.4

5 years ago

1.3.3

5 years ago

1.3.2

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.6

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.23

5 years ago

1.1.22

5 years ago

1.1.21

5 years ago

1.1.20

5 years ago

1.1.19

5 years ago

1.1.18

5 years ago

1.1.17

5 years ago

1.1.16

5 years ago

1.1.15

5 years ago

1.1.12

5 years ago

1.1.14

5 years ago

1.1.13

5 years ago

1.1.11

5 years ago

1.1.10

5 years ago

1.1.9

5 years ago

1.1.8

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago