Languages
[Edit]
PL

React - jak zrobi─ç lewostronne animowane menu

1 points
Created by:
Dirask Community
5580

Cze┼Ť─ç! 👋😊

W tym po┼Ťcie chcia┼ébym┬ápokaza─ç wam animowane menu wysuwaj─ůce si─Ö z┬álewej strony, kt├│re niedawno stworzy┼éem.

Efekt końcowy:

React - przykład animowanego menu bocznego
React - przykład animowanego menu bocznego

Poni┼╝ej przedstawiam, jak stworzy─ç to proste┬ámenu, kt├│re wy┼Ťwietla list─Ö r├│┼╝nych rodzaj├│w ┼╝ywno┼Ťci 🍒🥦🍟┬ápo┬ánaci┼Ťni─Öciu┬áprzycisku.

W rozwi─ůzaniu zastosowa┼éem nowoczesne podej┼Ťcie polegaj─ůce na wykorzystaniu komponent├│w funkcyjnych oraz hook├│w. W tym przypadku┬áhook ┬áuseState┬áprzechowuje stan mojego menu bocznego, czy jest widoczne, czy nie.

W przyk┼éadzie jest te┼╝ troch─Ö stylowania, kt├│re polecam dok┼éadnie przeanalizowa─ç i zmieni─ç wed┼éug w┼éasnego uznania. Mo┼╝esz zmodyfikowa─ç uruchamialny przyk┼éad poni┼╝ej i utworzy─ç w┼éasne animowane menu. 😊

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

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

const buttonStyle = {
  padding: '10px 20px',
  border: '2px solid #3085d6',
  borderRadius: '5px',
  background: '#3085d6',
  boxShadow: '5px 5px 5px grey',
  textShadow: '1px 1px 1px black',
  fontWeight: '900',
  color: 'white'
};

const commonStyle = {
  position: 'fixed',
  top: 0,
  bottom: 0,
  padding: '5px',
  border: '1px solid #0657FF',
  borderRadius: '0 30px 30px 0',
  background: '#C9E5FF',
  width: '280px',
  transition: '0.5s',
  overflow: 'hidden'
};

const visibleStyle = {
  ...commonStyle,
  left: '0'
};

const hiddenStyle = {
  ...commonStyle,
  left: '-300px'
};

const liStyle = {
  margin: '10px',
  padding: '5px',
  border: '2px solid #3085d6',
  borderRadius: '5px',
  background: '#5fa8ed',
  boxShadow: '5px 5px 5px grey',
  textShadow: '1px 1px 1px black',
  fontWeight: '900',
  color: 'white',
  listStyle: 'circle inside'
};

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div style={{ height: '200px' }}>
        <button style={buttonStyle} onClick={() => setVisible(true)}>
          Poka┼╝
        </button>
      <div style={visible ? visibleStyle : hiddenStyle}>
        <button style={buttonStyle} onClick={() => setVisible(false)}>
          Ukryj
        </button>
        <div>
          <ul>
            <li style={liStyle}>Owoce 🍏🍌🍒</li>
            <li style={liStyle}>Warzywa 🥕🥦🍅</li>
            <li style={liStyle}>Fast Food 🍕🍟🍔</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

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

Uwaga:

Aby zobaczy─ç┬ározwi─ůzanie z czyst─ů logik─ů, bez zb─Ödnej stylizacji┬áprzeczytaj┬áten artyku┼é .┬á

Zobacz r├│wnie┼╝

ReactJS - Artykuły

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