Languages
[Edit]
PL

Tworzenie prostego animowanego ekspandera w React

6 points
Created by:
Dirask Community
5250

Cze┼Ť─ç!┬á👋😊

My┼Ťla┼éem dzisiaj o stworzeniu┬áanimowanego ekspandera w┬áReakcie┬ái stworzy┼éem nast─Öpuj─ůce rozwi─ůzanie.

Efekt końcowy tego postu:

Przykład prostego ekspandera w React
Przykład prostego ekspandera w React

W poni┼╝szym przyk┼éadzie stworzy┼éem prosty ekspander, kt├│ry┬ápo klikni─Öciu wy┼Ťwietla listy Owoc├│w┬á🍉 i Warzyw┬á🍅.┬áU┼╝y┼éem nowoczesnego podej┼Ťcia, kt├│re obejmuje u┼╝ycie komponent├│w funkcyjnych i hook├│w React.┬áW tym przypadku hook┬á┬áuseState┬áprzechowuje stan mojego ekspandera.┬á🔺🔻

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 expanderStyle = {
    margin: '6px 0',
    padding: '2px',
    border: '1px solid #85C1E9'
};

const headerStyle = {
	display: 'flex',
    cursor: 'pointer'
};

const titleStyle = {
    padding: '3px',
	flex: 'none'
};

const spacerStyle = {
	flex: '1'
};

const iconStyle = {
	padding: '3px',
	flex: 'none'
};

const contentStyle = {
	overflow: 'hidden',
    transition: 'all 0.3s'
};

const contentExpandedStyle = {
    ...contentStyle,
    padding: '4px 0',
    border: '1px solid #85C1E9',
    height: 'auto',
    filter: 'opacity(1)'
};

const contentCollapsedStyle = {
    ...contentStyle,
  	padding: '0 0',
    border: '1px solid transparent',
    height: '0',
    filter: 'opacity(0)'
};

const Expander = ({title, children}) => {
    const [expanded, setExpanded] = React.useState(false);
    const handleHeaderClick = () => {
    	setExpanded(expanded => !expanded);
    };
  	return (
      <div style={expanderStyle}>
        <div style={headerStyle} onClick={handleHeaderClick}>
          <div style={titleStyle}>{title}</div>
          <div style={spacerStyle} />
          <div style={iconStyle}>{expanded ? '🔺' : '🔻'}</div>
        </div>
        <div style={expanded ? contentExpandedStyle : contentCollapsedStyle}>
          {children}
        </div>
      </div>
    );
};

// Przykład użycia:

const App = () => {
  return (
    <div style={{height: '260px'}}>
      <Expander title="🍏🍌🍊 Owoce">
        <ul>
          <li>🍏 Jab┼éko</li>
          <li>🍌 Banan</li>
          <li>🍊 Pomara┼äcza</li>
        </ul>
      </Expander>
      <Expander title="🥕🥒🍅 Warzywa">
        <ul>
          <li>🥕 Marchewka</li>
          <li>🥒 Og├│rek</li>
          <li>🍅 Pomidor</li>
        </ul>
      </Expander>
    </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