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

本教程将介绍切换按钮/减小宽度网格和div语义反应的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

切换按钮/减小宽度网格和div语义反应 教程 第1张

问题描述

我有一个菜单,它会有一个大小,当您单击按钮时,它会将宽度减少到50px

ie我将有一个带有按钮和图标的菜单,当单击按钮时将只出现图标

但我遇到了困难,怎么减小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

推荐答案

当点击按钮时打开状态改变时,可以减小div的宽度,请查看demo link

App.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;

好了关于切换按钮/减小宽度网格和div语义反应的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。