toggle button / button with icon and text /

问题

I have a menu that opens has a button with 100% witdh with text and icon

and when closed it has only the icon

but I still don't know how I will do this so when my state is closed show only the icon and not the text

Also my icon is not in the center when it is closed. code with my state :

function Menu() {
  const [open, setOpen] = useState(true); // declare new state variable "open" with setter
  const handleClick = e => {
    e.preventDefault();
    setOpen(!open);
  };
  return (
    <ContainerGrid style={{background: '#eee'}}>

    {/* <ContainerGridColumn mobile={2} > */}
    <ContainerGridColumnMenu desktop={open ? '12.5%' : '3.5%'} mobile= {open ? '31.25%' : '12.5%'} wdscreen = { open? '80%' : '2%'} >
    <MenuDiv>
    <WrapButton>

    <ButtonStyled style={{padding:0}}>
      <Icon name='facebook' size='big' style={{height: '1em', marginLeft:' 20px', marginRight:'10px'}} /> Facebook
    </ButtonStyled>

    </WrapButton>
    </MenuDiv>
    </ContainerGridColumnMenu>
    <ContainerContent desktop={open ? '87.5%' : '96.5%'} mobile = { open ? '68.75%' : '87.5%' }>
          <Button icon onClick={handleClick}>
            <Icon name="align justify" />
     /ContainerContent>
   </ContainerGrid>
  );
}/ContainerContent>
   </ContainerGrid>
  );
}

code about button and menu:

<ButtonStyled style={{padding:0}}>
  <Icon name='facebook' size='big' style={{height: '1em', marginLeft:' 20px', marginRight:'10px'}} /> Facebook
</ButtonStyled>

</WrapButton>
</MenuDiv>

css :

export const MenuDiv = styled.div`
width: 100%;
height: 100%;
background: #d987;
padding: 6px;
display:flex;
justify-content: center;
`;

export const WrapButton = styled.div`
  width: 100% ;
  height: 50px ;  
`;


export const ButtonStyled = styled(Button)`
    background: red !important ;
    width: 100% !important;
    height: 100% !important;
    text-align: left !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 0.875rem;
    font-family: Roboto";
    letter-spacing: 0.3px !important;
    margin-bottom: 1.4rem !important;
    &:hover{
        color: white !important;
        background-color:rgba(186,186,186,0.4) !important;
    }
    &:focus{
        color: white !important;
        background-color:#444bf8 !important;
    }
`;

menu opened:

closed:

example: https://codesandbox.io/s/autumn-cache-0i402

回答1:

Put a span around the text inside the button:

<button>
    <i>my icon</i>
    <span>my text</span>
</button>

Set the span to be display none by default:

.ui.button > span {
    display: none;
}

The class of lnSeap appears on one of the button's parent elements when the menu is open, so hang onto that to show the span within the button when the menu is open:

.lnSeap .ui.button > span {
    display: inline;
}

回答2:

You need to change your width.

Please read my code carefully, I'm update your existing code like.

Note in codesandbox your facebook icon is not working so i don't know how it will work, Please fix it so i will give more efforts on design

 <ContainerGridColumnMenu
        desktop={open ? "20%" : "10%"}
        mobile={open ? "31.25%" : "12.5%"}
        wdscreen={open ? "80%" : "2%"}
      >

And

<ContainerContent
        desktop={open ? "80%" : "90%"}
        mobile={open ? "68.75%" : "87.5%"}
      >

Updated

.button-area span {
    display: block;
    text-align: center;
}

.ezGQVc .button-area span {
    display: inline-block;
}

<WrapButton className="button-area">
            <ButtonStyled style={{ padding: 0 }}>
              <Icon
                name="facebook"
                size="big"
                style={{
                  height: "1em",
                  marginLeft: " 20px",
                  marginRight: "10px"
                }}
              />{" "}
              <span>Facebook</span>
            </ButtonStyled>
          </WrapButton>

Hope it will help you. :)

Let me know if you have any query.

来源：https://stackoverflow.com/questions/59662589/toggle-button-button-with-icon-and-text