Chuyển tới nội dung chính
ZZalo Platforms

ImageViewer

Cập nhật lần cuối:

ImageViewer component: Component giúp tạo một gallery để xem hình ảnh với kích thước của màn hình, người dùng có thể tương tác thu phóng, chuyển hình,...

Properties​

ImageViewer​

ImageType​

Example​

import React, { useState } from "react";
import { Page, ImageViewer, Box, Text } from "zmp-ui";

const images = [
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/e2e10aa1a6087a5623192.jpg",
    alt: "img 1",
    key: "1",
  },
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/fee40cbea0177c4925061.jpg",
    alt: "img 2",
    key: "2",
  },
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/82ca759bd932056c5c233.jpg",
    alt: "img 3",
    key: "3",
  },
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/77f5b8cd1464c83a91754.jpg",
    alt: "img 4",
    key: "4",
  },
];

export default function HomePage() {
  const [visible, setVisible] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    
      <Text.Title size="small">ImageViewer</Text.Title>
      <Box mt={6}>
        <Box>
          <Text.Title size="small">Usage</Text.Title>
        </Box>
        <Box mt={2}>
          <Text size="xSmall" className="input-desc">
            Khi cần xem và tương tác với hình ảnh trên kích thước lớn hơn
          </Text>
        </Box>
        <Box mt={6}>
          <Text.Title size="small">Example</Text.Title>
        </Box>
        <Box mt={2}>
          <Box flex flexDirection="row" flexWrap="nowrap">
            {images.map((img, index) => (
              <Box
                mr={1}
                key={img.key}
                style={{
                  width: "68px",
                  height: "69px",
                  borderRadius: "8px",
                  overflow: "hidden",
                }}
              >
                <img
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                  role="presentation"
                  onClick={() => {
                    setActiveIndex(index);
                    setVisible(true);
                  }}
                  src={img.src}
                  alt={img.alt}
                />
              </Box>
            ))}
          </Box>
          <ImageViewer
            onClose={() => setVisible(false)}
            activeIndex={activeIndex}
            images={images}
            visible={visible}
          />
        </Box>
      </Box>
    
  );
}