Ant Design入门之布局

布局

antd布局：https://ant.design/components/layout-cn/

在后台系统页面布局中，往往是经典的三部分布局，像这样：

下面，我们通过antd组件来完成这个布局。

组件概述

Layout ：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
Header ：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Sider ：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
Content ：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Footer ：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

搭建整体框架

在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容：

import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{render(){return (<Layout><Sider>Sider</Sider> <Layout><Header>Header</Header> <Content>Content</Content> <Footer>Footer</Footer> </Layout> </Layout> );
}

需要特别说明的是，在umi中约定的目录结构中，layouts/index.js文件将被作为全局的布局文件。

接下来，配置路由：（非必须）

config.js文件：

export default {plugins: [['umi‐plugin‐react', {dva: true, // 开启dva功能antd: true // 开启Ant Design功能}]],routes: [{path: '/',component: '../layouts' //配置布局路由}]
};

import React from 'react';
import { Layout, Menu, Icon } from 'antd';
import Link from 'umi/link';const { Header, Footer, Sider, Content } = Layout;
const SubMenu = Menu.SubMenu;class BasicLayout extends React.Component{constructor(props){super(props);this.state = {collapsed: false,}}render(){return (<Layout><Sider width={256} style={{minHeight: '100vh', color: 'white'}}><div style={{ height: '32px', background: 'rgba(255,255,255,.2)', margin: '16px'}}/><MenudefaultSelectedKeys={['1']}defaultOpenKeys={['sub1']}mode="inline"theme="dark"inlineCollapsed={this.state.collapsed}><SubMenu key="sub1" title={<span><Icon type="user"/><span>用户管理</span></span>}><Menu.Item key="1"><Link to="/user/UserAdd">新增用户</Link></Menu.Item><Menu.Item key="2"><Link to="/user/UserList">新增列表</Link></Menu.Item></SubMenu></Menu></Sider><Layout><Header style={{ background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header><Content style={{ margin: '24px 16px 0' }}><div style={{ padding: 24, background: '#fff', minHeight: 360 }}>{this.props.children}</div></Content><Footer style={{ textAlign: 'center' }}>后台系统 ©2018 Created by 中国深圳</Footer></Layout></Layout>)}}export default BasicLayout;

Ant Design入门之布局相关推荐

Ant Design入门之介绍
Ant Design入门什么是Ant Design? Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用. 官网:https://ant.design/in ...
Ant Design入门
目录一:什么是Ant Design? 二:开始使用三:布局四:表格一:什么是Ant Design? Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用 ...
Ant Design入门之开始使用
引入Ant Design Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用. 在 umi 中,你可以通过在 ...
Ant Design 入门-引用自己命名的组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 自己创建的组件:代码 import { Table, Divider, Tag } from 'antd'; ...
Ant Design 入门-参照官方文档使用组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 先来一个按钮组件使用的对比,官方文档的(不能直接用)和实际能用的. 官网demo: import { Tabl ...
Ant Design Vue之布局layout
根据业务需要想直接用layout组件,实现如下效果: 然后吧代码复制: <template><a-layout id="components-layout-demo-cus ...
ant design pro（二）布局
一.概述参看地址:https://pro.ant.design/docs/layout-cn 其实在上述地址ant-design上已经有详细介绍,本文知识简述概要. 页面整体布局是一个产品最外层的框 ...
Ant Design蚂蚁设计理念
Ant Design蚂蚁设计理念空间布局是体系视觉设计的起点,和传统法人平面设计的不同之处在于,UI界面空间要基于[动态.体系化]的角度出发展开.我们受到建筑界大师柯布西耶的模度思想的启发,基于[秩序 ...
Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...

Ant Design入门之布局

布局

组件概述

搭建整体框架

Ant Design入门之布局相关推荐

最新文章

热门文章