代码之家  ›  专栏  ›  技术社区  ›  Michael Fernandes

垂直菜单蚂蚁设计高度100%

  •  7
  • Michael Fernandes  · 技术社区  · 7 年前

    下午好我对web开发还不熟悉,我无法将ant设计菜单( https://ant.design/components/menu/ )屏幕高度的100%。

    我试着 <Layout style = {{height:" 100vh "}}> 之前,但它没有工作。

    这是我使用的代码

    . . . . .

    import React from 'react'
    import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';
    
    const { Header, Content, Footer, Sider } = Layout;
    const SubMenu = Menu.SubMenu;
    
    export class SideMenu extends React.Component {
    
      constructor(props){
        super(props)
        this.state = {collapsed: false}
      }
    
      toggleCollapsed (){
         this.setState({
           collapsed: !this.state.collapsed
         })
      }
    
      render() {
        return (
          <div style={{ width: 256 }}>
            <Menu
              defaultSelectedKeys={[]}
              defaultOpenKeys={[]}
              mode="inline"
              theme="light"
              inlineCollapsed={this.state.collapsed}
            >
              <Menu.Item key="0">
                <div onClick={this.toggleCollapsed.bind(this)}>
                  <Icon type={this.state.collapsed ? 'menu-unfold' : 'menufold'}/>
                </div>
              </Menu.Item>    
              ...    
              <Menu.Item key="5">
                <Icon type="rocket" />
                <span>Funções</span>
              </Menu.Item>
            </Menu>
          </div>
        );
      }
    }
    

    谢谢你的帮助。

    2 回复  |  直到 7 年前
        1
  •  6
  •   jayanes    7 年前

    尝试管理单独的样式表(在my case menu.less中),并将其置于以下代码中

    应该是工作

    .menu-style {
    
    height: 100vh;
    width: 200px;
    position: fixed;
    }
    

    试试看。

        2
  •  0
  •   iugo    7 年前

    您可以使用 ref 获取所需的DOM参考高度。然后使用某些组件的高度。

    function refIt(theDOM) {
      const height = theDOM.clientHeight;
      this.setState({ height });
    }
    
    return (<div ref={theDOM => refIt(theDOM)}>
      <div height={this.state.height}>
      </div>
    </div>);