ImageViewer

Cập nhật lần cuối: 27/05/2022

Bắt đầu hỗ trợ ở phiên bản:

• zmp-ui: 1.7.0

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

Name	Type	Default	Description
activeIndex	number		Index của ảnh đang được hiển thị.
images	ImageType[]		Mảng chứa thông tin của các ảnh cần hiển thị. Mỗi thiết lập bao gồm đường dẫn và mô tả của ảnh. Chi tiết xem .
maskClassName	string		CSS class cho mask của image viewer.
maskStyle	CSSProperties		Inline style cho mask của image viewer.
visible	boolean	false	Trạng thái hiển thị của image viewer. Cần được sử dụng cùng với onClose để đóng image viewer.
onClose	() => void		Callback được gọi khi image viewer được đóng. Cần phải update lại state của visible nếu được truyền vào.

ImageType

Name	Type	Default	Description
alt	string		Mô tả của ảnh. Sẽ được hiển thị khi không thể load ảnh.
src	string		Đường dẫn của ảnh.

Example

Open Sandbox

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 (
    <Page className="section-container">
      <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>
    </Page>
  );
}