Good afternoon. I'm new to web development and I'm not able to put the ant design menu (https://ant.design/components/menu/) at 100% of the screen height.
I tried to put <Layout style = {{height:" 100vh "}}>
before the but it did not work.
Here's the code I'm using
. . . . .
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>
);
}
}
Thanks for your help.
Ant Design, referred to as Antd in this context, is a pretty great library. It contains all the components I could need in nice wrapper components that makes developing a UI very simple. One major omission, however, is a responsive mobile header.
ant-design-pro - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers.
You can create a basic grid system by using a single set of Row and Col grid assembly, all of the columns (Col) must be placed in Row . You can use the gutter property of Row as grid spacing, we recommend set it to (16 + 8n) px ( n stands for natural number).
Try to manage separate style sheet(in my case menu.less) and put it this code
it should be work
.menu-style {
height: 100vh;
width: 200px;
position: fixed;
}
just try it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With