MotionReorder

விசைப்பலகை ஆதரவுடன், பட்டியலையோ grid-ஐயோ இழுத்து வரிசை மாற்றுங்கள்.

வலை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 உடன் பட்டியல், grid லேஅவுட்கள்.
வலையில் விசைப்பலகை நகர்வுகள், React Native-இல் அணுகல்தன்மைச் செயல்கள்.
items, onItemsChange மூலம் கட்டுப்படுத்தப்பட்டது, அல்லது defaultItems உடன் கட்டுப்படுத்தப்படாதது.

இதற்குப் பயன்படுத்துங்கள்

Playlist.
முன்னுரிமைப்படுத்திய backlog.
புகைப்பட grid.

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`	Grid-இல் நெடுவரிசைகள்.
`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 பொருந்துகின்றன; வரிசை மாற்றம் அணுகல்தன்மைச் செயல்களாகவும் வழங்கப்படுகிறது.