0
点赞
收藏
分享

微信扫一扫

Matlab 机器人工具箱 动力学

若如初梘 03-04 19:30 阅读 4
前端

背景:

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

举报

相关推荐

0 条评论