Languages
[Edit]
PL

React - jak zrobi─ç lewostronne animowane menu

1 points
Created by:
telsa
472

W tym kr├│tkim artykule chcieliby┼Ťmy pokaza─ç, jak stworzy─ç animowane menu w React .

Poni┼╝sze rozwi─ůzanie pokazuje animowane menu wysuwaj─ůce si─Ö z lewej strony po naci┼Ťni─Öciu przycisku.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze importu podczas pracy z kompilatorem JSX.
// import React from 'react';
// import ReactDOM from 'react-dom';

const commonStyle = {
    position: 'fixed',
    left: 0,
    top: 0,
    bottom: 0,
    background: 'silver',
    overflow: 'hidden',
    transition: '0.3s'
};
const visibleStyle = {
    ...commonStyle,
    width: '200px'
};
const hiddenStyle = {
    ...commonStyle,
    width: '0px'
};

const App = () => {
    const [visible, setVisible] = React.useState(false);
    return (
      <div style={{height: '200px'}}>
        {!visible && <button onClick={() => setVisible(true)}>Poka┼╝</button>}
        <div style={visible ? visibleStyle : hiddenStyle}>
          <button onClick={() => setVisible(false)}>Ukryj</button>
          <div>
            1<br />
            2<br />
            3<br />
          </div>
        </div>
      </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Uwaga:

Dzi─Öki sk┼éadni rozwini─Öcia ( ...) mo┼╝emy ┼é─ůczy─ç obiekty powsta┼ée z┬áobiekt├│w styl├│w.

Powi─ůzane posty

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS (PL)

React - lewostronne animowane menu
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join