en-US

Support image preview.

zh-CN

支持图片预览。

import { useState } from 'react';

import { EyeOutlined } from '@react-devui/icons';
import { DImage } from '@react-devui/ui';

export default function Demo() {
  const [active, setActive] = useState(0);
  const [visible, setVisible] = useState(false);

  const imgs = Array.from({ length: 4 }).map((_, i) => ({
    src: `/assets/imgs/image-${i + 1}.jpg`,
    alt: 'demo',
  }));

  return (
    <>
      {imgs.map((props, index) => (
        <DImage
          key={props.src}
          style={{ height: 100 }}
          dImgProps={props}
          dActions={[
            <DImage.Action
              className="button"
              onClick={() => {
                setVisible(true);
              }}
            >
              <EyeOutlined />
              {index !== 3 && <span>Preview</span>}
            </DImage.Action>,
          ]}
          onClick={() => {
            setActive(index);
          }}
        ></DImage>
      ))}
      <DImage.Preview
        dList={imgs}
        dActive={active}
        dVisible={visible}
        onClose={() => {
          setVisible(false);
        }}
        onActiveChange={setActive}
      ></DImage.Preview>
    </>
  );
}

.button {
  gap: 0 4px;
  padding: 0 4px;

  span {
    font-size: 0.9em;
  }
}