title: 布局

布局 - Layout

目前 AMS 分别提供 3 种布局: Custom Blank , 使用时需要携带前缀 Layout.Custom Layout.Blank

布局 - Layout.Custom

Layout.Custom 是有完整的侧边导航和后台完整结构界面的常用布局, 基本使用方式如下

  1. {
  2.   $$$: 'component',
  3.   registryName: 'ams',
  4.   componentName: 'Layout.Custom',
  5.   props: {
  6.     logo: 'https://test-zt.xoyo.com/allen/Octocat.png',
  7.     title: '开发测试系统',
  8.     sidebar: [
  9.       {
  10.         name: 'Dashboard',
  11.         path: '/?path=/api/components/dashboard',
  12.         icon: {
  13.           $$$: 'component',
  14.           registryName: '@ant-design/icons',
  15.           componentName: 'GithubFilled',
  16.         },
  17.       },
  18.     ],
  19.   },
  20. }

布局 - Layout.Custom 效果图

custom-layout

布局 - Layout.Custom 默认属性

  1. CustomLayout.defaultProps = {
  2.   logo,
  3.   title: 'AMS',
  4.   sidebar: [
  5.     {
  6.       name: 'Dashboard',
  7.       path: '/?path=/api/components/dashboard',
  8.       icon: {
  9.         $$$: 'component',
  10.         registryName: '@ant-design/icons',
  11.         componentName: 'GithubFilled',
  12.       },
  13.     }
  14.   ],
  15. };

布局 - Layout.Custom Props API

props:

属性 类型 例子
logo string ReactNode https://test-zt.xoyo.com/allen/Octocat.png
title string 开发测试系统
sidebar Sidebar [{name: ‘Dashboard’,path: ‘/?path=/api/components/dashboard’,icon: {$$$: ‘component’,registryName: ‘@ant-design/icons’,componentName: ‘GithubFilled’}}]]

Sidebar

sidebar 是一个递归型数组, 它的每一个数组结构如下

  1. {
  2.   name: 'Dashboard',
  3.   path: '/?path=/api/components/dashboard',
  4.   icon: {
  5.     $$$: 'component',
  6.     registryName: '@ant-design/icons',
  7.     componentName: 'GithubFilled',
  8.   },
  9.   children: [
  10.     name: 'Dashboard',
  11.     path: '/?path=/api/components/dashboard',
  12.     icon: {
  13.       $$$: 'component',
  14.       registryName: '@ant-design/icons',
  15.       componentName: 'GithubFilled',
  16.     },
  17.     children: [
  18.       name: 'Dashboard',
  19.       path: '/?path=/api/components/dashboard',
  20.       icon: {
  21.         $$$: 'component',
  22.         registryName: '@ant-design/icons',
  23.         componentName: 'GithubFilled',
  24.       },
  25.       children: [
  26.         ...
  27.       ]
  28.     ]
  29.   ]
  30. }

SidebarItem

属性 类型 例子
name string Dashboard
path string /?path=/api/components/dashboard
icon ReactNode {$$$: ‘component’,registryName: ‘@ant-design/icons’,componentName: ‘GithubFilled’}
children SidebarItem[] 参考例子 children 字段

布局 - Layout.Basic

完全空白的布局, 开发者只能补充相应的 children 即可

  1. {
  2.   $$$: 'component',
  3.   registryName: 'ams',
  4.   componentName: 'Layout.Blank',
  5.   children: [...]
  6. }

布局 - Layout.Basic 效果图

custom-layout

props:

属性 类型 例子
children any 任意类型属性均可