ant 布局组件 组件等高设置

背景:

想实现一个和content等高的侧边栏,并增加侧边栏导航。

ant组件概述

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

实现代码:

1、先实现自定义侧边栏的导航组件

// Sidebar.js
import React from 'react';
import { Menu } from 'antd';const Sidebar = () => (<Menumode="inline"defaultSelectedKeys={['1']}style={{ height: '100%', borderRight: 0 }}><Menu.Item key="1">选项1</Menu.Item><Menu.Item key="2">选项2</Menu.Item><Menu.Item key="3">选项3</Menu.Item></Menu>
);export default Sidebar;

2、在主组件页面中,引入子组件Sidebar组件

import React from 'react';
import { Layout } from 'antd';
import Sidebar from './Sidebar'; // 引入自定义组件
const { Header, Footer, Sider, Content } = Layout;const App = () => (
// 自定义函数,用于渲染侧边导航const renderSidebar = () => (<Sider width={200} className="site-layout-background"style={{ backgroundColor: 'white' }}><Sidebar />  //自定义组件</Sider>);<Layout style={{ minHeight: '100vh' }}> {/* 设置最小高度为视口高度 */}<Header className="header">{/* 头部内容 */}</Header>{renderSidebar()} {/* 使用自定义函数渲染侧边导航 */}<Layout><Header style={{ backgroundColor: 'grey' }}>Header</Header><Content style={{ margin: '24px 16px 0' }}>Content</Content><Footer style={{ textAlign: 'center' }}>Footer</Footer></Layout></Layout>
);export default App;

说明:

1、外层的Layout组件设置了minHeight: '100vh',这意味着它会至少占满整个视口的高度

2、内部的Sider和另一个Layout(包含Header、Content、Footer)将会自动填充这个高度,从而实现等高的效果。

3、自定义子组件Sidebar

4、使用自定义函数:renderSidebar是一个自定义函数,它返回一个Sider组件,该组件内部使用了我们定义的Sidebar组件。在Layout结构中,通过调用{renderSidebar()}来渲染侧边导航。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/708351.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CUMT---图像处理与视觉感知---期末复习重点

文章目录 一、概述 本篇文章会随课程的进行持续更新中&#xff01; 一、概述 1. 图像的概念及分类。  图像是用各种观测系统以不同形式和手段观测客观世界而获得的、可以直接或间接作用于人的视觉系统而产生的视知觉实体。  图像分为模拟图像和数字图像&#xff1a;(1) 模拟图…

51单片机(6)-----直流电机的介绍与使用(通过独立按键控制电机的运行)

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 目录 一. 直流电机模块介绍 1.直流电机介绍 2.电机参数 二. 程序设计…

C语言创建json数据

在C语言中创建JSON数据可以使用第三方库&#xff0c;比如 cJSON。cJSON是一个轻量级的JSON解析器和生成器&#xff0c;可以用于创建、解析和操作JSON数据。 以下是使用cJSON库创建JSON数据的步骤&#xff1a; 首先&#xff0c;你需要下载并包含cJSON库的头文件。你可以在cJSO…

Python set 集合中的内置方法介绍及其示例

python set 的所有内置方法 本文详细介绍了Python中set集合的内置方法及其示例。Set&#xff08;集合&#xff09;是Python中一种无序且不重复的数据结构&#xff0c;用于存储唯一的元素。它提供了一系列内置方法&#xff0c;用于操作集合&#xff0c;如添加、删除、交集、并集…

JAVA泛型浅析

Java范型generics&#xff0c;是JDK1.5引入的新特性&#xff0c;是一种编译时类型安全检测机制&#xff0c;可以在编译时检测到非法的类型。范型的本质是将类型参数化&#xff0c;将类型指定成一个参数。java中的集合就有使用&#xff0c;并且对外提供的三方库和SDK中使用也极为…

返回数据(返回视图所需要的数据)

在上篇文章中&#xff0c;小编带领大家了解到&#xff1a;返回静态数据-CSDN博客&#xff0c;但是&#xff0c;仅仅返回一个静态页面&#xff0c;对于静态页面的数据没正常返回&#xff01; 所以&#xff0c;本篇文章便讲述如何返回数据&#xff1f;&#xff1f; 还是先不管前…

从win11切换到ubuntu20的第1天

我不想做双系统&#xff0c;反正win11也没有意思&#xff0c;打游戏直接去网吧&#xff0c;所以电脑直接重装了ubuntu20&#xff0c;为什么不是ubuntu22&#xff1f;因为版本太新&#xff0c;很多东西不支持。为什么不装ubuntu18&#xff1f;因为我电脑装完了之后不支持外界显示…

敏捷开发最佳实践:质量维度实践案例之软硬一体持续交付

在过去的Top敏捷实践案例中&#xff0c;我们可以看到企业或团队在敏捷质量管理上的创新&#xff0c;包括场景化测试、迭代T1自动化覆盖、一套自动用例到处运行、用例持续运行可视化等&#xff0c;而这也进一步促进了价值流动。本文将继续给大家带来全新的质量维度实践案例&…

【MySQL】_外连接

目录 3.1 情况一&#xff1a;两个表数据一一对应 3.2 情况二&#xff1a;两个表数据并非一一对应 本专栏关于联合查询已建立相应库与表&#xff0c;原文链接如下&#xff1a; 【MySQL】_联合查询基础表-CSDN博客 内连接原文如下&#xff1a; 【MySQL】_内连接-CSDN博客 基…

react 路由的基本原理及实现

1. react 路由原理 不同路径渲染不同的组件 有两种实现方式 ● HasRouter 利用hash实现路由切换 ● BrowserRouter 实现h5 API实现路由切换 1. 1 HasRouter 利用hash 实现路由切换 1.2 BrowserRouter 利用h5 Api实现路由的切换 1.2.1 history HTML5规范给我们提供了一个…

Android studio (一) 新建一个Android项目 编程语言为Java

一、下载Android studio 下载 Android Studio 和应用工具 - Android 开发者 | Android Developers 这里我下载的是2023年的 二、新建项目 选择如下模板。 填写项目名、项目保存位置、编程语言、最低支持Android API的版本、打包编译模式 三、报错Connection refused: no …

GO语言学习笔记(与Java的比较学习)(四)

结构体 一个结构体&#xff08;struct&#xff09;就是一组字段&#xff08;field&#xff09;。 package main ​ import "fmt" ​ type Vertex struct {X intY int } ​ func main() {fmt.Println(Vertex{1, 2}) } 结构体中的字段用 . 访问 package main ​ im…

【GB28181】wvp-GB28181-pro快速适配 连接SQlite3数据库

引言 wvp最新项目支持mysql等数据库, 如果本地没有安装mysql等数据库,并想直接可以运行wvp项目,需要进行二次修改。 本文包含:WVP最新代码适配SQlite3数据库 运行平台:windows或linux 文章目录 一、为何使用SQlite二、配置修改2.1 添加SQlite3依赖2.2 修改SQlite3不支持的…

进程的通信以及信号的学习

一&#xff0c;进程的通信&#xff1a; 种类&#xff1a;1.管道 2.信号 3.消息队列 4.共享内存 5.信号灯 6.套接字 1.管道: 1.无名管道 无名管道只能用于具有亲缘关系的进程间通信 pipe int pipe(int pipefd[2]); 功能: 创建一个无名管道 …

Rust 交叉编译 macOS 为 Linux 和 Windows

文章目录 前言环境案例macOS 编译为 Linux 和 Windows 可用二进制程序编译为 Linux 平台编译为Windows平台 最后 前言 鉴于 rust 中文资料较少&#xff0c;遇到问题的解决方案更少。这里记录遇到的一些问题。 Rust 支持交叉编译&#xff0c;可以在 macOS 平台编译出 Linux 或者…

机器学习——CBOW基于矩阵(手动实操)

基于矩阵的CBOW基础算法&#xff0c;其实是负采样的前提算法。 主要是根据 预测准确率为22%左右 说实话。。。我已经很满意了&#xff0c;至少这个东西是可以去预测的&#xff0c;至于预测为什么不正确&#xff0c;我目前猜测主要还是跟词频有关。 在结果中&#xff0c;an…

uniapp:启动图 .9png 制作教程

1、工具安装&#xff1a;自行下载Android Studio 2、制作.9png 注意上图3条黑线的位置&#xff0c;意思是&#xff1a;标注黑线的位置可以进行缩放。 对其大多数启动图来说&#xff0c;标注以上3条黑线即可。

一周掌握【机器学习】入门知识

学习目标&#xff1a; 一周掌握 机器学习 入门知识 学习内容&#xff1a; 1.了解机器学习的基本概念&#xff1a; 阅读由 Keras 的创建者 Francois Chollet 编著的《使用 Python进行深度学习》。这本书从程序员的角度介绍了机器学习的基础知识。您可以阅读第 1-4 章&#xff…

ETH开源PPO算法学习

前言 项目地址&#xff1a;https://github.com/leggedrobotics/rsl_rl 项目简介&#xff1a;快速简单的强化学习算法实现&#xff0c;设计为完全在 GPU 上运行。这段代码是 NVIDIA Isaac GYM 提供的 rl-pytorch 的进化版。 下载源码&#xff0c;查看目录&#xff0c;整个项目…

创新之巅 健康之选 森歌集成灶智能水洗新揭秘

2024年2月27日&#xff0c;一场引领智能厨电风潮的盛会在杭州隆重召开。森歌集成灶以“勠力同心 共生共歌”为主题&#xff0c;成功举办了2024森歌智能厨电优秀经销商峰会。此次峰会上&#xff0c;森歌集成灶发布了令人瞩目的奥运冠军同款智能厨电新品——森歌鲸洗小灶Z60&…