常熟网站建设公司,那些cps网站做的比较好,瀑布网站模板,网站建设规划书范文5000字背景#xff1a;
想实现一个和content等高的侧边栏#xff0c;并增加侧边栏导航。
ant组件概述
Layout#xff1a;布局容器#xff0c;其下可嵌套 Header Sider Content Footer 或 Layout 本身#xff0c;可以放在任何父容器中。Header#xff1a;顶部布局#xff0c…
背景
想实现一个和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 () (MenumodeinlinedefaultSelectedKeys{[1]}style{{ height: 100%, borderRight: 0 }}Menu.Item key1选项1/Menu.ItemMenu.Item key2选项2/Menu.ItemMenu.Item key3选项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} classNamesite-layout-backgroundstyle{{ backgroundColor: white }}Sidebar / //自定义组件/Sider);Layout style{{ minHeight: 100vh }} {/* 设置最小高度为视口高度 */}Header classNameheader{/* 头部内容 */}/Header{renderSidebar()} {/* 使用自定义函数渲染侧边导航 */}LayoutHeader style{{ backgroundColor: grey }}Header/HeaderContent style{{ margin: 24px 16px 0 }}Content/ContentFooter 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()}来渲染侧边导航。
