Кнопка переключения / уменьшение ширины сетки и деления Semanti c React - PullRequest
Новая
       4

Кнопка переключения / уменьшение ширины сетки и деления Semanti c React

1 голос
/ 08 января 2020

У меня есть меню, которое будет иметь размер, и когда вы нажмете кнопку, оно уменьшит ширину до 50px

ie У меня будет меню с кнопкой и значками, и при нажатии появится кнопка только значок

но мне трудно как уменьшить ширину моего div и как он будет работать на семанти c сетка

код: 

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

1 Ответ

0 голосов
/ 08 января 2020

Вы можете уменьшить ширину 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;
...