切换按钮/减小宽度网格和 div 语义反应

Question

>我有一个菜单，它有一个大小，当你点击按钮时，它会将宽度减小到 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;
}

代码：https://codesandbox.io/s/cool-kepler-cxj4x

Answer 1

当按钮单击时打开状态发生变化时，您可以减小div 的宽度，请查看演示链接

应用.js

import React, { useState } from "react";
import { Grid, Button, Icon } from "semantic-ui-react";
import "./style.css";
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: "red",
width: open ? "100%" : "calc(100% - 50px)",
height: "100vh"
}}
/>
</Grid.Column>
<Grid.Column
computer={14}
tablet={12}
mobile={11}
style={{ background: "#eee", padding: "0" }}
>
<Button icon onClick={handleClick}>
<Icon name="align justify" />
</Button>
</Grid.Column>
</Grid>
);
}
export default Menu;