פיד תמונות

החליקו בין תמונות, קפצו בעזרת תמונות ממוזערות, פתחו כל תמונה במסך מלא ומשכו למעלה את הפרטים שלה.

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.

פיד תמונות

איך זה עובד

עוד דוגמאות

חיפוש