Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@antdp/basic-layouts

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@antdp/basic-layouts

入口框架公共界面

2.1.1
latest
Source
npm

Version published: 8 months ago

Maintainers: 2

Created: 5 years ago

Source

@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

导航菜单模式

slider

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

mix

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

topleft

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

配置明亮主题

亮主题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',
      }}
    />
  )
};

菜单国际化设置

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	项目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`	-
layout	导航菜单模式,slider：右侧导航，topleft：顶部左侧导航，mix：混合导航	`LayoutModel`	`mix`
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;
}

Keywords

FAQs

Is @antdp/basic-layouts well maintained?

Package last updated on 28 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@antdp/basic-layouts

@antdp/basic-layouts

安装

基本使用

导航菜单模式

slider

mix

topleft

配置明亮主题

亮主题light

暗主题dark

默认样式

token自定义BasicLayouts颜色

菜单国际化设置

配置头部右侧菜单

Message

方法一

方法二

API

TopRightMenuProps

TokenProps

Keywords

Related posts

Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets

NVD Backlog Tops 20,000 CVEs Awaiting Analysis as NIST Prepares System Updates