当前位置：首页 > news >正文

ant 布局组件组件等高设置

news 来源：原创 2024/5/9 8:53:27

背景：

想实现一个和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()}来渲染侧边导航。