@uiw-admin/basic-layouts v6.1.9

页面整体布局

何时使用

当项目需要默认布局的使用

安装

npm i @uiw-admin/basic-layouts --save # yarn add @uiw-admin/basic-layouts

在项目中，BasicLayouts组件下如果不使用LayoutTabs组件内容放react-router-dom 的Outlet组件。否则只需要放LayoutTabs组件即可。

import { Outlet } from '@kkt/pro';
import BasicLayout from '@uiw-admin/basic-layouts';
import LayoutTabs from "@uiw-admin/layout-tabs";

// 不使用 LayoutTabs 组件
const Layouts = () => {
  return (
    <BasicLayout routes={[]}>
      <Outlet />
    </BasicLayout>
  )
}

// 使用 LayoutTabs 组件
const Layouts = () => {
  return (
    <BasicLayout routes={[]}>
      <LayoutTabs routes={[]} />
    </BasicLayout>
  )
}

基本使用

import React from 'react';
import BasicLayout, { useLayouts } from '@uiw-admin/basic-layouts'
import LayoutTabs from "@uiw-admin/layout-tabs";

function BasicLayoutScreen() {
  const routerArrs = [
    {
      path: "/components/authorized",
      name: "权限组件",
      icon: 'appstore',
      element: <div>测试</div>,
    },
    {
      path: "/components/basic-layouts",
      name: "页面布局",
      icon: 'appstore',
      element: <div>测试2</div>,
    },
    {
      path: "/components/document-title",
      name: "页面标题",
      icon: 'appstore',
      element: <div>测试2</div>,
    }
  ]
  return (
    <div style={{ height: 400 }}>
      <BasicLayout
        isDefaultContentStyle={false}
        routes={routerArrs}
      >
        内容
      </BasicLayout>
    </div>
  )
}
export default BasicLayoutScreen;

头部布局

import React from 'react';
import BasicLayout, { useLayouts } from '@uiw-admin/basic-layouts'
import LayoutTabs from "@uiw-admin/layout-tabs";

function BasicLayoutScreen() {
  const routerArrs =[
    {
      path: "/components/authorized",
      name: "权限组件",
      icon: 'appstore',
      element: <div>测试</div>,
    },
    {
      path: "/components/basic-layouts",
      name: "页面布局",
      icon: 'appstore',
      element: <div>测试2</div>,
    },
    {
      path: "/components/document-title",
      name: "页面标题",
      icon: 'appstore',
      element: <div>测试2</div>,
    }
  ]
  const basicLayoutProps = {
    headerLayout: 'top',
    headerBackground: '#343a40',
    headerFontColor: '#fff',
  }
  return (
    <div style={{ height: 400 }}>
      <BasicLayout
        {...basicLayoutProps} 
        isDefaultContentStyle={false}
        routes={routerArrs}
      >
        内容
      </BasicLayout>
    </div>
  )
}
export default BasicLayoutScreen;

菜单搜索功能

在根目录.kktprc.js文件配置 SEARCH_MENU 参数，类型：boolen 默认true

// .kktprc.ts 
export default {
  define:{
    SEARCH_MENU:true
  }
}

右侧头像部分配置

• menus配置右侧下拉菜单内容;
• profile配置头像以及下拉菜单左侧内容;
• onReloadAuth调用刷新权限接口;
• layouts.closeMenu关闭菜单事件;

window.SEARCH_MENU = true
import React from 'react';
import BasicLayout, { useLayouts } from '@uiw-admin/basic-layouts';
import LayoutTabs from "@uiw-admin/layout-tabs";

const routerArrs = [
  {
    path: "/components/authorized",
    name: "权限组件",
    icon: 'appstore',
    element: <div>测试</div>,
  },
  {
    path: "/components/basic-layouts",
    name: "页面布局",
    icon: 'appstore',
    element: <div>测试2</div>,
  },
  {
    path: "/components/document-title",
    name: "页面标题",
    icon: 'appstore',
    element: <div>测试2</div>,
  }
]

function BasicLayoutScreen() {
  const layouts = useLayouts()
  const basicLayoutProps = {
    // 右侧下拉菜单内容
    menus: [
      {
        title: '欢迎来到uiw',
        icon: 'smile',
        // 调用关闭菜单事件
        onClick: () => layouts.closeMenu(),
      },
      {
        title: '修改密码',
        icon: 'setting',
      },
    ],
    profile: {
      // 头像地址
      avatar: '',
      // 下拉菜单左侧内容
      menuLeft:<div style={{ marginRight: 15 }}>可做自定义dom</div>
    },
    // 调用刷新接口
    onReloadAuth: () => {},
    layouts,
  }

  return (
    <div style={{ height: 400 }}>
      <BasicLayout
        {...basicLayoutProps}
        isDefaultContentStyle={false}
        routes={routerArrs}  >
        内容
      </BasicLayout>
    </div>
  )
}

export default BasicLayoutScreen;

自定义退出

通过隐藏系统默认的退出登录，自定义退出登录

import React from 'react';
import BasicLayout, { useLayouts } from '@uiw-admin/basic-layouts';
import LayoutTabs from "@uiw-admin/layout-tabs";

const routerArrs = [
  {
    path: "/components/authorized",
    name: "权限组件",
    icon: 'appstore',
    element: <div>测试</div>,
  },
  {
    path: "/components/basic-layouts",
    name: "页面布局",
    icon: 'appstore',
    element: <div>测试2</div>,
  },
  {
    path: "/components/document-title",
    name: "页面标题",
    icon: 'appstore',
    element: <div>测试2</div>,
  }
]

function BasicLayoutScreen() {
  const layouts = useLayouts();

  const basicLayoutProps = {
    // 右侧下拉菜单内容
    menus: [
      {
        title: '欢迎来到uiw',
        icon: 'smile',
        // 调用关闭菜单事件
        onClick: () => layouts.closeMenu(),
      },
      {
        title: '退出登录',
        icon: 'setting',
        onClick: () => { console.log('退出'); layouts.closeMenu() },

      },
    ],
    profile: {
      // 头像地址
      avatar: '',
      // 下拉菜单左侧内容
      menuLeft:<div style={{ marginRight: 15 }}>可做自定义dom</div>
    },
    // 调用刷新接口
    onReloadAuth: () => {},
    layouts,
    hideReloadButton: true,
    hideUserInfo: true,
    hideLogoutButton: true
  }

  return (
    <div style={{ height: 400 }}>
      <BasicLayout
        {...basicLayoutProps}
        isDefaultContentStyle={false}
        routes={routerArrs}  >
        <div style={{ padding: 14 }}>
          <LayoutTabs routes={routerArrs} /> 
          <div>注意：项目中使用 不需要设置 padding 样式</div>
        </div>
      </BasicLayout>
    </div>
  )
}
export default BasicLayoutScreen;

Props

建议：在使用 @uiw-admin/layout-tabs 组件渲染的时候，建议 isDefaultContentStyle 设置为 false

useLayouts

response

贡献者

感谢所有的贡献者，欢迎开发者为开源项目贡献力量。

License

Licensed under the MIT License.