Languages
[Edit]
PL

React - jak zrobi─ç lewostronne animowane menu

1 points
Created by:
Dirask Community
6240

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

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