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

Swiper

Name	Type	Default	Description
images	Array<ImageType>		Mảng các hình cần xem
activeIndex	number	0	Hình sẽ được hiển thị khi mở ImageViewer
visible	boolean	false	Mở/Tắt ImageViewer
maskStyle	CSSProperties		Thêm inline style, tuỳ chỉnh style cho lớp overlay
maskClassName	string		Thêm class cho element overlay
onClose	function		Callback function khi đóng ImageViewer

ImageType

Name	Type	Default	Description
src	string		Image source
alt	string		Văn bản thay thế (alt text) cho hình ả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>
  );
}