我有一个菜单,它将具有一个大小,当您单击按钮时,它将把宽度减小到50px
即,我将有一个带有按钮和图标的菜单,单击按钮时将仅显示图标
但是我很难解决如何减小div的宽度以及它如何在语义网格上工作
代码:
function Menu() {
const [open, setOpen] = useState(true); // declare new state variable "open" with setter
const handleClick = e => {
e.preventDefault();
setOpen(!open);
};
return (
<Grid style={{background: '#eee'}}>
<Grid.Column computer={2} tablet={4} mobile={5} style={{background: '#000', padding:'0', height:'100vh'}}>
<div style={{background:'#000', width:'100%', height:'100%'}}>
</div>
</Grid.Column>
<Grid.Column width={14} style={{background: '#eee', padding:'0'}}>
<Button icon onClick={handleClick}>
<Icon name="align justify" />
</Button>
</Grid.Column>
</Grid>
);
}
css:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#root,
.App,
.ui.grid{
height: 100vh !important;
margin: 0 !important;
padding:0 !important;
}
您可以在单击按钮时更改打开状态时减小div的宽度,请查看demo link