MotionReorder

ಕೀಬೋರ್ಡ್ ಬೆಂಬಲದೊಂದಿಗೆ ಪಟ್ಟಿ ಅಥವಾ ಗ್ರಿಡ್ ಎಳೆದು ಕ್ರಮ ಬದಲಿಸಿ.

ವೆಬ್React Nativeಪಟ್ಟಿಗಳು

ಪ್ರಯತ್ನಿಸಿ

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

JavaScript ಆಫ್ ಆಗಿದೆ. ಕೆಳಗಿನ ಕೋಡ್ ಪೂರ್ಣ ಉದಾಹರಣೆ.

App.jsx

import { useState } from 'react';
import { MotionReorder } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const tracks = [
  { id: 'intro', title: 'Intro', length: '0:48' },
  { id: 'morning', title: 'Morning Light', length: '3:21' },
  { id: 'harbor', title: 'Harbor', length: '4:02' },
  { id: 'chorus', title: 'Chorus Line', length: '2:57' },
  { id: 'night', title: 'Night Drive', length: '5:10' },
  { id: 'outro', title: 'Outro', length: '1:15' },
];

export default function App({ reorder = 'live', layout = 'list' }) {
  const [items, setItems] = useState(tracks);

  return (
    <div className="stage">
      <MotionReorder
        className={`playlist ${layout}`}
        itemClassName="track"
        items={items}
        onItemsChange={setItems}
        getKey={(track) => track.id}
        reorder={reorder}
        layout={layout}
        columns={3}
        gap={8}
        renderItem={(track, { index, dragging }) => (
          <div className={dragging ? 'row dragging' : 'row'}>
            <span className="index">{index + 1}</span>
            <strong>{track.title}</strong>
            <span className="length">{track.length}</span>
          </div>
        )}
      />
      <p className="hint">Drag a handle, or focus it and use the arrow keys.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.track {
  display: flex;
  align-items: center;
  gap: 8px;
}

.track > button {
  flex: none;
  width: 36px;
  height: 44px;
  border: 1px solid #cfe8dc;
  border-radius: 10px;
  background: #f4faf7;
  color: #176b52;
  font-size: 18px;
}

.grid .track {
  flex-direction: column;
  align-items: stretch;
}

.grid .track > button {
  width: 100%;
  height: 32px;
}

.row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
  user-select: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}

.row.dragging {
  border-color: #176b52;
  box-shadow: 0 10px 24px rgba(14, 46, 36, 0.16);
}

.grid .row {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 96px;
  text-align: center;
}

.index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
  font:
    700 12px system-ui,
    sans-serif;
}

.row strong {
  flex: 1;
  color: #0e2e24;
}

.length {
  color: #5b616b;
  font-variant-numeric: tabular-nums;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

ಅತಿ ಚಿಕ್ಕ ಬಳಕೆ

Playlist.jsx

<MotionReorder
  items={tracks}
  onItemsChange={setTracks}
  layout="list"
  renderItem={(track) => track.title}
/>;

ಇದು ನಿಮಗಾಗಿ ನಿರ್ವಹಿಸುವುದು

ನೀವು ಎಳೆಯುವಾಗ (reorder="live") ಅಥವಾ ಬಿಟ್ಟ ತಕ್ಷಣ (reorder="drop") ಉಳಿದ ವಸ್ತುಗಳು ದಾರಿ ಬಿಡುತ್ತವೆ.
columns ಮತ್ತು gap ನೊಂದಿಗೆ ಪಟ್ಟಿ ಮತ್ತು ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳು.
ವೆಬ್‌ನಲ್ಲಿ ಕೀಬೋರ್ಡ್ ಚಲನೆಗಳು, React Native ನಲ್ಲಿ ಪ್ರವೇಶಸಾಧ್ಯತಾ ಕ್ರಿಯೆಗಳು.
items ಮತ್ತು onItemsChange ನಿಂದ ನಿಯಂತ್ರಿತ, ಅಥವಾ defaultItems ನೊಂದಿಗೆ ಅನಿಯಂತ್ರಿತ.

ಇದಕ್ಕೆ ಬಳಸಿ

ಪ್ಲೇಲಿಸ್ಟ್.
ಆದ್ಯತೆ ನೀಡಿದ backlog.
ಫೋಟೋ ಗ್ರಿಡ್.

Props

Prop	ಟೈಪ್	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`items`	`readonly T[]`		ಕ್ರಮವನ್ನು ನೀವು ನಿಯಂತ್ರಿಸುವಾಗ ವಸ್ತುಗಳು.
`defaultItems`	`readonly T[]`	`[]`	ಕ್ರಮವನ್ನು ಕಾಂಪೊನೆಂಟ್ ಇಟ್ಟುಕೊಳ್ಳುವಾಗ ಆರಂಭಿಕ ವಸ್ತುಗಳು.
`onItemsChange`	`(items, { reason, key }) => void`		ಹೊಸ ಕ್ರಮದೊಂದಿಗೆ ಮತ್ತು ಅದು ಎಳೆಯುವಿಕೆ, ಬಿಡುವಿಕೆ ಅಥವಾ ಕೀಬೋರ್ಡ್‌ನಿಂದ ಬಂದಿತೇ ಎಂಬುದರೊಂದಿಗೆ ನಡೆಯುತ್ತದೆ.
`getKey`	`(item) => string \| number`	`item`	ವಸ್ತುವಿಗೆ ವಿಶಿಷ್ಟ key ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಆಗಿ ವಸ್ತುವೇ.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	ವಸ್ತು ಚಿತ್ರಿಸುತ್ತದೆ; ಅದರ index ಮತ್ತು ಅದು ಎಳೆಯಲ್ಪಡುತ್ತಿದೆಯೇ ಎಂದು ಪಡೆಯುತ್ತದೆ.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` ಎಳೆಯುವಾಗ ಉಳಿದ ವಸ್ತುಗಳನ್ನು ಚಲಿಸುತ್ತದೆ; `drop` ಬಿಡುವವರೆಗೆ ಕಾಯುತ್ತದೆ.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` ಅಥವಾ `grid`.
`columns`	`number`	`3`	ಗ್ರಿಡ್‌ನಲ್ಲಿ ಕಾಲಮ್‌ಗಳು.
`gap`	`number`	`12`	ವಸ್ತುಗಳ ನಡುವಿನ ಅಂತರ, ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ.
`disabled`	`boolean`	`false`	ಎಳೆಯುವಿಕೆಯನ್ನು ಆಫ್ ಮಾಡುತ್ತದೆ.
`duration`	`number`	`260`	ದಾರಿ ಬಿಡುವ ವಸ್ತುಗಳಿಗೆ ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳು.
`itemClassName`	`string`		ಪ್ರತಿ ವಸ್ತು ಎಲಿಮೆಂಟ್‌ಗೆ class; `itemStyle` ಅದರ inline style ಹೊಂದಿಸುತ್ತದೆ.

ಇತರ props ರೆಂಡರ್ ಆಗುವ ಎಲಿಮೆಂಟ್‌ಗೆ ಹೋಗುತ್ತವೆ, ಹೀಗಾಗಿ className, style ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಎಂದಿನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ವೆಬ್ ಮತ್ತು React Native

onItemsChange(items, { reason }) ಬದಲಾವಣೆ ಎಳೆಯುವಿಕೆ, ಬಿಡುವಿಕೆ ಅಥವಾ ಕೀಬೋರ್ಡ್‌ನಿಂದ ಬಂದಿತೇ ಎಂದು ಹೇಳುತ್ತದೆ.

React Native ನಲ್ಲಿ ಅದೇ props ಅನ್ವಯಿಸುತ್ತವೆ ಮತ್ತು ಕ್ರಮ ಬದಲಾವಣೆ ಪ್ರವೇಶಸಾಧ್ಯತಾ ಕ್ರಿಯೆಗಳಾಗಿಯೂ ನೀಡಲಾಗುತ್ತದೆ.