خلاصة الصور

تنقّل بين الصور بالسحب، وانتقل عبر الصور المصغّرة، وافتح أي صورة بملء الشاشة واسحب تفاصيلها إلى الأعلى.

MotionPagerMotionHighlightMotionZoomMotionSheet

جارٍ تجهيز المثال…

JavaScript معطّل. الشيفرة أدناه هي المثال الكامل.

App.jsx

import { useState } from 'react';
import {
  MotionHighlight,
  MotionPager,
  MotionSheet,
  MotionZoom,
  motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

// Generated scenes, so the example needs no image files.
function scene(sky, land, sun) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 260">
    <rect width="400" height="260" fill="${sky}"/>
    <circle cx="300" cy="80" r="34" fill="${sun}"/>
    <path d="M0 190 Q120 110 220 180 T400 150 V260 H0Z" fill="${land}"/>
    <path d="M0 225 Q150 170 260 215 T400 205 V260 H0Z" fill="#0e2e24"/>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

const photos = [
  {
    id: 'dawn',
    title: 'Dawn ridge',
    place: 'North trail',
    src: scene('#eaf6f0', '#43c58f', '#ffffff'),
  },
  {
    id: 'forest',
    title: 'Deep forest',
    place: 'Valley road',
    src: scene('#176b52', '#2e8f6d', '#eaf6f0'),
  },
  {
    id: 'meadow',
    title: 'Meadow',
    place: 'South field',
    src: scene('#cfe8dc', '#176b52', '#f4faf7'),
  },
  {
    id: 'night',
    title: 'Night hills',
    place: 'Lookout',
    src: scene('#0e2e24', '#176b52', '#43c58f'),
  },
];

export default function App({ gap = 12, spring = 'default' }) {
  const [page, setPage] = useState(0);
  const [details, setDetails] = useState(false);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];
  const photo = photos[page];

  return (
    <div className="feed">
      <MotionPager
        items={photos}
        index={page}
        onIndexChange={setPage}
        gap={gap}
        transition={transition}
        renderItem={(item) => (
          <MotionZoom
            src={item.src}
            width={400}
            height={260}
            className="photo"
            transition={transition}
          />
        )}
      />
      <div className="bar">
        <MotionHighlight
          items={photos}
          value={photo.id}
          onValueChange={(key) => setPage(photos.findIndex((item) => item.id === key))}
          transition={transition}
          className="thumbs"
          itemClassName="thumb"
          highlightClassName="thumb-on"
          renderItem={(item) => <img src={item.src} width={48} height={32} />}
        />
        <button className="info" onClick={() => setDetails(true)}>
          Details
        </button>
      </div>
      <MotionSheet open={details} onOpenChange={setDetails} className="sheet">
        <span className="handle" />
        <h2>{photo.title}</h2>
        <p>
          {photo.place} · photo {page + 1} of {photos.length}
        </p>
        <button onClick={() => setDetails(false)}>Close</button>
      </MotionSheet>
    </div>
  );
}

styles.css

.feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 560px;
  min-height: 420px;
  margin: 0 auto;
  padding: 24px 20px;
  align-content: start;
}

.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 260;
  border-radius: 18px;
  object-fit: cover;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* On a narrow phone the thumbnails shrink; the Details button keeps its size. */
.thumbs {
  display: flex;
  min-width: 0;
  gap: 6px;
}

.thumb {
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
}

.thumb img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 7px;
}

.thumb-on {
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #176b52;
}

.info {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.sheet {
  gap: 6px;
  padding: 12px 22px 22px;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(14, 46, 36, 0.18);
}

.handle {
  justify-self: center;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: #cfe8dc;
}

.sheet h2 {
  margin: 6px 0 0;
  font:
    750 22px system-ui,
    sans-serif;
  color: #0e2e24;
}

.sheet p {
  margin: 0;
  color: #5b616b;
}

.sheet button {
  min-height: 46px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

كيف يعمل

يقلب MotionPager صفحة واحدة لكل سحبة أو نقرة سريعة.
يميّز MotionHighlight الصورة المصغّرة الحالية ويحرّك مقلّب الصفحات.
يفتح MotionZoom الصورة من مكانها؛ اسحبها بعيدًا لإغلاقها.
يعرض MotionSheet التفاصيل ويُغلق بالسحب أو بالخلفية أو بـ Escape.

خلاصة الصور

كيف يعمل

المزيد من الأمثلة

بحث