Languages
[Edit]
PL

React - stwórz w┼éasny animowany pasek post─Öpu

1 points
Created by:
MindOfMadness3
246

Hej! 👋 😊

Dzisiaj chciałbym wam pokazać prosty animowany pasek postępu, który stworzyłem niedawno w React.

Efekt końcowy tego postu:

Animowany pasek post─Öpu w React
Animowany pasek post─Öpu w React

Poni┼╝ej przedstawiam wam moje rozwi─ůzanie dotycz─ůce prostego paska┬ápost─Öpu, jak r├│wnie┼╝ przyk┼éadowe style do niego┬á📊🎨.┬á

W tym rozwi─ůzaniu u┼╝ywam:

  • hooka┬áuseState┬ádo zarz─ůdzania stanem paska post─Öpu,
  • width┬á- szeroko┼Ť─ç┬ápaska progresu, kt├│ra mierzona jest w procentach w zale┼╝no┼Ťci od kontenera - ta sztuczka pozwala w ┼éatwy spos├│b wy┼Ťwietla─ç post─Öp od 0% do 100%,
  • przyk┼éadowych przycisk├│w, kt├│re uruchamiaj─ů┬ámetod─Ö ┬ásetProgress(), aby pokaza─ç, jak dzia┼éa pasek post─Öpu (animacja mi─Ödzy prze┼é─ůczaniem daje fajny efekt).

Praktyczny przykład: 

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

const containerStyle = {
  	border: '1px solid silver',
  	background: '#ededed'
};

const contentStyle = {
  	background: '#00cc00',
  	height: '24px',
  	textAlign: 'center',
  	lineHeight: '24px',
  	fontFamily: 'sans-serif',
  	transition: '0.3s'
};

const ProgressBar = ({progress}) => {
  	const state = `${progress}%`;
    return (
      <div style={containerStyle}>
        <div style={{...contentStyle, width: state}}>
          {progress > 5 ? state : ''}
        </div>
      </div>
    );
};

const App = () => {
  const [progress, setProgress] = React.useState(25);
  return (
    <div>
      <ProgressBar progress={progress} />
      <br />
      <div>
        <button onClick={() => setProgress(0)}>0%</button>
        <button onClick={() => setProgress(5)}>5%</button>
        <button onClick={() => setProgress(15)}>15%</button>
        <button onClick={() => setProgress(50)}>50%</button>
        <button onClick={() => setProgress(75)}>75%</button>
        <button onClick={() => setProgress(100)}>100%</button>
      </div>
    </div>
  );
};

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

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