Neutered Paranoid Meerkat

    @uiw-admin/basic-layouts
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.19 • Public • Published

    页面整体布局

    npm version

    项目的整体默认布局组件,一般默认 '/' 路由的组件

    何时使用

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

    安装

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

    基本使用

    • routes 渲染路由菜单
    • headerLayout 配置头部布局
    • headerBackground: 配置头部背景色
    • headerFontColor: 配置头部字体颜色
    window.SEARCH_MENU = true
    import React from 'react'
    import BasicLayout, {
      useLayouts,
    } from '@uiw-admin/basic-layouts'
    import { HashRouter } from 'react-router-dom';
    import LayoutTabs from "@uiw-admin/layout-tabs"
    const routerArrs =[
      {
        path: "/basic-layouts",
        name: "查询表格",
        element: <div>测试</div>,
      },
      {
        path: "/layout-tabs",
        name: "查询表格2",
        element: <div>测试2</div>,
      }
    ]
    
    function BasicLayoutScreen() {
      const basicLayoutProps = {
        headerLayout: 'top',
        headerBackground: '#343a40',
        headerFontColor: '#fff',
      }
      return (
        <HashRouter window={window}>
          <BasicLayout {...basicLayoutProps}  isDefaultContentStyle={false} routes={routerArrs}  >
            <LayoutTabs routes={routerArrs} /> 
          </BasicLayout>
        </HashRouter>
      )
    }
    ReactDOM.render(<BasicLayoutScreen />, _mount_);

    菜单搜索功能

    在根目录.kktrc.js文件配置 SEARCH_MENU 参数,类型:boolen 默认true

    // .kktrc.js 
    import config from "@uiw-admin/config"
    export default config({
      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 { HashRouter ,useRoutes ,Outlet} from 'react-router-dom';
    import LayoutTabs from "@uiw-admin/layout-tabs"
    
    const routerArrs =[
      {
        path: "/basic-layouts",
        name: "查询表格",
        element: <div>测试</div>,
      },
      {
        path: "/layout-tabs",
        name: "查询表格2",
        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 <HashRouter window={window}>
          <BasicLayout {...basicLayoutProps} isDefaultContentStyle={false} routes={routerArrs}  >
            <LayoutTabs routes={routerArrs} /> 
          </BasicLayout>
        </HashRouter>
    }
    
    ReactDOM.render(<BasicLayoutScreen />, _mount_);

    内容区域默认样式(isDefaultContentStyle)

    window.SEARCH_MENU = true
    import React from 'react'
    import BasicLayout from '@uiw-admin/basic-layouts'
    import { HashRouter } from 'react-router-dom';
    import LayoutTabs from "@uiw-admin/layout-tabs"
    
    const routerArrs =[
      {
        path: "/basic-layouts",
        name: "查询表格",
        element: <div>测试</div>,
      },
      {
        path: "/layout-tabs",
        name: "查询表格2",
        element: <div>测试2</div>,
      }
    ]
    
    
    function BasicLayoutScreen() {
      return <HashRouter window={window}>
    
        <div>不设置 isDefaultContentStyle 使用默认值(true)</div>
        
          <BasicLayout routes={routerArrs}  >
            <div style={{background:"#fff"}} >测试 isDefaultContentStyle 值不设置的情况下渲染样式</div>
          </BasicLayout>
          <br/>
          <div>设置 isDefaultContentStyle = false </div>
           <BasicLayout routes={routerArrs} isDefaultContentStyle={false}  >
            <div style={{background:"#fff"}} >测试 isDefaultContentStyle 值不设置的情况下渲染样式</div>
          </BasicLayout>
        </HashRouter>
    }
    ReactDOM.render(<BasicLayoutScreen />, _mount_);

    自定义退出

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

    window.SEARCH_MENU = true
    import React from 'react'
    import BasicLayout, {
      useLayouts,
    } from '@uiw-admin/basic-layouts'
    import { HashRouter } from 'react-router-dom';
    import LayoutTabs from "@uiw-admin/layout-tabs"
    const routerArrs =[
      {
        path: "/basic-layouts",
        name: "查询表格",
        element: <div>测试</div>,
      },
      {
        path: "/layout-tabs",
        name: "查询表格2",
        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 (
        <HashRouter window={window}>
          <BasicLayout {...basicLayoutProps} isDefaultContentStyle={false} routes={routerArrs}  >
            <LayoutTabs routes={routerArrs} /> 
          </BasicLayout>
        </HashRouter>
      )
    }
    ReactDOM.render(<BasicLayoutScreen />, _mount_);

    菜单隐藏

    window.SEARCH_MENU = true
    import React from 'react'
    import BasicLayout, {
      useLayouts,
    } from '@uiw-admin/basic-layouts'
    import { HashRouter ,useRoutes ,Outlet,useLocation } from 'react-router-dom';
    import LayoutTabs from "@uiw-admin/layout-tabs"
    
    const routerArrs =[
      {
        path: "/basic-layouts",
        name: "查询表格",
        element: <div>测试</div>,
      },
      {
        path: "/layout-tabs",
        name: "查询表格2",
        element: <div>测试2</div>,
      }
    ]
    
    
    const Com = (props)=>{
      const { routes } = props
      const location = useLocation()
      return (<BasicLayout {...props} menuHide={location.pathname==="/layout-tabs"} >
        <LayoutTabs routes={routes} /> 
      </BasicLayout>)
    }
    
    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 <HashRouter window={window}>
          <Com  {...basicLayoutProps}  routes={routerArrs}  />
        </HashRouter>
    }
    
    ReactDOM.render(<BasicLayoutScreen />, _mount_);

    Props

    参数 必填 类型 默认值 说明
    className string BasicLayout 外层className
    style object BasicLayout 外层最外层样式式
    logo string logo图标
    projectName string 项目名称
    footer React.ReactElement 页脚
    routes RoutersProps[] 菜单路由数据
    children React.ReactNode 内容
    headerLayout 枚举类型:"top" | "default" default 头部布局
    headerBackground string "#fff" 头部背景色
    headerFontColor string "#000" 头部字体颜色
    menuHide boolen false 菜单隐藏(可从路由组件router-control组件带参数hiddenMainMenu控制)
    menus HeaderMenuItemsProps[] 右侧点击头像展示菜单
    profile {avatar(头像)?:string,userName(用户名)?:string,menuLeft(菜单左侧)?:React.ReactElement} 头像部分
    onReloadAuth () => void 重新加载权限
    layouts UseLayoutsProps 右侧点击头像展示菜单配置
    isDefaultContentStyle boolean true 内容区域默认样式展示
    hideReloadButton 隐藏刷新权限按钮 Boolean false
    hideLogoutButton 隐藏退出登录按钮 Boolean false
    hideUserInfo 隐藏用户信息 Boolean false
    onLogout (navigate: NavigateFunction) => void 覆盖原始退出事件
    onLogoClick (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void logo 点击事件

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

    useLayouts

    response

    参数 必填 类型 默认值 说明
    headerRightvisible boolen
    closeMenu () => void
    updateStore (datas: {headerRightvisible: boolean}) => void

    贡献者

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

    License

    Licensed under the MIT License.

    Install

    npm i @uiw-admin/basic-layouts

    DownloadsWeekly Downloads

    174

    Version

    5.3.19

    License

    MIT

    Unpacked Size

    260 kB

    Total Files

    81

    Last publish

    Collaborators

    • wcjiang