React学习day13--antd组件：Layout布局

最新推荐文章于 2025-02-28 15:10:48 发布
最新推荐文章于 2025-02-28 15:10:48 发布
阅读量6.3k 收藏 10
点赞数 4
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46758732/article/details/118255287
版权
本文详细介绍了Ant Design的Layout组件，包括设计规则和尺寸标准，如导航高度和侧边栏宽度的计算公式。Layout提供Header、Sider、Content和Footer等布局容器，适用于构建各种类型的页面结构。此外，文章还展示了顶部-侧边布局的通栏样例，适用于应用型网站。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

https://ant.design/components/layout-cn/

设计规则

尺寸
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
  • 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
  • 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
  • 顶部导航高度的范围计算公式为：48+8n。
  • 侧边导航宽度的范围计算公式：200+8n。
  • 交互
    • 一级导航和末级的导航需要在可视化的层面被强调出来；
    • 当前项应该在呈现上优先级最高；
    • 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
    • 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。

    • 视觉

      导航样式上需要根据信息层级合理的选择样式：
      • 大色块强调:建议用于底色为深色系时，当前页面父级的导航项。
      • 高亮火柴棍:当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
      • 字体高亮变色:从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
      • 字体放大：12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
      组件概述
      • Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
      • Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
      • Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
      • Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
      • Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
样例
import './index.css';
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class App extends Component {
    render() {
        return (
            <div>
                <Layout>
                    <Header>Header</Header>
                    <Content>Content</Content>
                    <Footer>Footer</Footer>
                </Layout>
               
            </div>
        );
    }
}

export default App;

在这里插入图片描述

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

            </div>
        );
    }
}

export default App;

在这里插入图片描述

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

            </div>
        );
    }
}

export default App;

在这里插入图片描述

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

            </div>
        );
    }
}

export default App;

在这里插入图片描述
APP.js

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Layout, Menu, Breadcrumb } from 'antd';

const { Header, Content, Footer } = Layout;
class App extends Component {
    render() {
        return (
            <div>
                <Layout className="layout">
                    <Header>
                        <div className="logo" />
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                            {new Array(15).fill(null).map((_, index) => {
                                const key = index + 1;
                                return <Menu.Item key={key}>{`nav ${key}`}</Menu.Item>;
                            })}
                        </Menu>
                    </Header>
                    <Content style={{ padding: '0 50px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb>
                        <div className="site-layout-content">Content</div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>

            </div>
        );
    }
}

export default App;

index.css

.site-layout-content {
  min-height: 280px;
  padding: 24px;
  background: #fff;
}
.logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl .logo {
  float: right;
  margin: 16px 0 16px 24px;
}
  [data-theme="dark"] .site-layout-content {
    background: #141414;
  }

在这里插入图片描述

顶部-侧边布局-通栏
同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站

js

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
class App extends Component {
    render() {
        return (
            <div>
                <Layout>
                    <Header className="header">
                        <div className="logo" />
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu>
                    </Header>
                    <Layout>
                        <Sider width={200} className="site-layout-background">
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%', borderRight: 0 }}
                            >
                                <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
                                    <Menu.Item key="1">option1</Menu.Item>
                                    <Menu.Item key="2">option2</Menu.Item>
                                    <Menu.Item key="3">option3</Menu.Item>
                                    <Menu.Item key="4">option4</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
                                    <Menu.Item key="5">option5</Menu.Item>
                                    <Menu.Item key="6">option6</Menu.Item>
                                    <Menu.Item key="7">option7</Menu.Item>
                                    <Menu.Item key="8">option8</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
                                    <Menu.Item key="9">option9</Menu.Item>
                                    <Menu.Item key="10">option10</Menu.Item>
                                    <Menu.Item key="11">option11</Menu.Item>
                                    <Menu.Item key="12">option12</Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout style={{ padding: '0 24px 24px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>List</Breadcrumb.Item>
                                <Breadcrumb.Item>App</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content
                                className="site-layout-background"
                                style={{
                                    padding: 24,
                                    margin: 0,
                                    minHeight: 280,
                                }}
                            >
                                Content
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>,
            </div>
        );
    }
}

export default App;

css

.logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

【Python百日进阶-Web开发-Feffery】Day342 - “一起Dash”训练营Lesson-02:dash中的layout&基础回调函数
专注于医院数据分析技术与系统开发的创作与分享。
04-20 203
文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓一、Dash项目开发流程二、实例：加法计算器和更新时间2.1 页面效果2.2 项目源码 前言：fac是什么？ feffery-antd-components（简称fac），是国内大佬费弗里(Feffery)老师基于著名的React UI组件库ant design进行二次开发，将ant design中的诸多实用组件及特性引入Dash，帮助开发者使用极低的纯Python代码量，即可快速开发出现
【Python百日进阶-Web开发-Feffery】Day453 - fac实例：dash+FastAPI实现前后端分离的pdf文件上传，配合PymuPDF进行处理
专注于医院数据分析技术与系统开发的创作与分享。
06-20 349
【Python百日进阶-Web开发-Feffery】Day453 - fac实例：dash+FastAPI实现前后端分离的文件上传
Ant Design布局：Flex, Grid, Layout
微小冷的学习笔记
11-28 3758
任何UI工具，布局都是设计过程中必不可少的一环，前端更是如此。但网页和桌面应用还有区别，正常的网页，无论在手机还是PC上，基本都是自上而下排布的信息流，这种浏览方式对布局来说是一个限制，即很难想象一个网页提供从下到上的浏览方式。
layout:React布局组件
05-14
layout @alifd/layout Layout of PC Box 参数 说明 类型 默认值 direction 布局方向可选值:'row', 'column' Enum column justify 主轴对齐方式可选值:'flex-start', 'center', 'flex-end', 'space-between', 'space-around' Enum flex-start align 与主轴垂直方向的对齐方式可选值:'flex-start', 'center', 'flex-end', 'baseline', 'stretch' Enum stretch wrap 直接子元素是否可折行可选值:'wrap', 'nowrap' Enum nowrap flex flex-grow, flex-shrink, flex-basis 简写，采用数组方式例如[0, 1, 'a
React（12）案例--layout页面的部分
最新发布
a99101的博客
02-28 415
需要手动修改pagejson文件中的react和react-demo版本号为 18.2.0。这里注意 react版本过高会导致antd组件无法安装。创建对应文件夹和文件的json数据。
在React中使用Antd的Layout组件
weixin_65200149的博客
04-30 1650
Antd的Layout组件包括Header、Sider、Content和Footer，它们可以组合使用，以创建复杂的布局结构。在组件中使用Layout组件及其子组件来创建布局，你可通过这个地址进入Antd Layout组件。Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
react antd layout sider
weixin_34235457的博客
04-04 831
import React from 'react'; import {Link, withRouter} from 'react-router-dom'; import {Layout, Menu, Icon} from 'antd'; const {SubMenu} = Menu; const {Sider} = Layout; class SideBar extends Re...
antd-layout布局
热门推荐
神zhi殇的博客
02-19 1万+
nz-layout：布局容器，其下可嵌套 nz-headernz-sider nz-content nz-footer 或 nz-layout 本身，可以放在任何父容器中。 nz-header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 nz-layout 中。 nz-sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 nz-layout 中。 nz-content...
React+TS前台项目实战（四）-- layout整体布局搭建
weixin_43883615的博客
06-09 1310
本文主要讲Layout整体布局的构建以及全局内容盒子Content组件的使用。还包括了导航栏组件的基本封装，并将在后续内容中单独讲解头部header组件的响应式设计，特别是针对移动端的布局要求，以及涉及的交互。下一篇讲【全局常用组件封装】。关注本栏目，将实时更新。
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1444
antd-react 组件库工作以来的总结
webpack-theme-color-replacer动态修改Ant Design Vue主题色
slow097的博客
07-06 952
在main.js中引入 然后我们在config下创建这3个js文件​​​​​ theme-color-replacer.plugin.config.js文件，代码如下： themeColor.js，代码如下： themesettingConfig.js，代码如下： 根目录vue.config.js 代码......
react-layout-library:基于样式化组件的库，为布局提供统一的界面
03-17
React Layout库 通过将指定的道具（例如mt （代表margin-top ）和ml以px单位）添加到组件中，React Layout库用于布局React组件的统一系统。 通过将高阶组件（HOC）应用于组件来添加道具。 除此之外，该库还提供了用于为阴影创建统一样式的HOC，以及用于轻松布局的FlexBox组件。 注意：您可以将这些HOC彼此分开使用。 用法 检查以获得更深入的使用。 首先，安装依赖项 npm i -D styled-components npm i -D react-layout-library 使用withLayoutStyles可以将mt和ml withLayoutStyles添加到样式化的组件中。 使用createShadowStyles创建应用了自定义box-shadow属性的自定义HOC。 // StyledButton.tsx import
react-ReactGridLayout网格布局gridlayout系统但专为React服务
08-15
React-Grid-Layout：网格布局(grid layout)系统，但专为 React 服务
踩坑 antd 3.0 DatePicker 时间区间 日期禁用错误解决方案
qq_43690340的博客
12-03 1626
antd 3.0 DatePicker 时间区间 日期禁用错误解决方案 import React, { PureComponent } from 'react'; import XMIcon from '@/components/PhoenixUI/XMIcon'; import { Col, Form, Row, Icon, Radio, Button, Tooltip, message, DatePicker } from 'antd'; import TrimInput from '@/compone
react layout init
weixin_34242331的博客
03-13 201
class Layout extends React.Component { constructor(props) { super(props); } render() { return ( <div className="wrapper"> {this.p...
react-grid-layout React响应式布局插件的用法
Xpy 的博客
05-14 1529
【代码】react-grid-layout React响应式布局插件的用法。
react Layout 布局实现路由全局守卫
283301717的博客
12-21 1394
相比Vue, react 实现路由拦截会稍微麻烦点，话不多说，上代码： 1、index.js (async () => { try { // 刷新重新请求菜单 const { token, roles } = store.KaTeX parse error: Expected 'EOF', got '&' at position 38: … if (!!token &̲& !roles) { …dispatch(“user/roles”) await store.Ka
antd之Layout和Menu
denghuocc
03-10 1080
<template> <a-layout id="components-layout-demo-custom-trigger"> <a-layout-sider style="background: #fff" v-model="collapsed" :trigger="null" collapsible> <div class="logo"> <a-icon type="gitlab" style="fontSi
React后台管理（七）-- layout布局相关组件封装，以及涉及功能实现
weixin_43883615的博客
05-23 1828
本文将详细介绍页面布局的搭建过程，以及其中涉及的相关功能。主要包括头部、侧边栏和内容区域。我们将讲解其中用到的相关功能：如何注册子路由、监听路由变化、实现侧边栏收缩功能、observer监听器的使用、在头部展示和更新个人信息以及使用MobX进行信息管理、登录、登出和记录路由等相关功能的实现。下一篇讲【开发页面前准备—插槽以及函数组件传值】。关注本栏目，将实时更新。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值