Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Image

이미지를 표시하고, 키보드로 열고 닫을 수 있는 접근 가능한 미리보기를 제공하는 컴포넌트입니다.

import { Image } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

이미지를 표시할 때

사용예제

Basic Usage

기본적인 사용 방법입니다.

OnClick

클릭 이벤트 예제입니다.

Mask Customization

마스크 커스터마이징 예제입니다.

import { Image, Upload, Typography } from "sud-ui";
import { Upload as UploadIcon } from "sud-icons";
import { useState } from "react";

export default function App() {
  const [image, setImage] = useState("https://example.com/image.jpg");

  return (
    <div>
      <Upload
        ext={["jpg", "png", "gif", "jpeg"]}
        onChange={(file) => {
          setImage(URL.createObjectURL(file));
        }}
        showUploadList={false}
      >
        <Image
          src={image}
          shape="circle"
          mask={
            <div className="flex flex-col items-center justify-center gap-[10px]">
              <UploadIcon size="30" />
              <Typography>Upload</Typography>
            </div>
          }
          preview={false}
        />
      </Upload>
    </div>
  );
}

Customize

커스터마이징 예제입니다.

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

src

이미지 소스 URL

string

alt

이미지 대체 텍스트

string

width

이미지 너비

number | string

200

height

이미지 높이

number | string

이미지 로딩 방식

"lazy" | "eager"

"lazy"

mask

호버 시 표시될 마스크

ReactNode

기본 마스크 (PhotoFill 아이콘 + '미리보기' 텍스트)

preview

미리보기 기능 활성화 여부. Enter/Space로 열고 Escape 또는 닫기 버튼으로 닫을 수 있습니다.

boolean

true

onClick

클릭 이벤트 핸들러. preview가 활성화된 경우에도 미리보기 전에 호출됩니다.

(e: MouseEvent<HTMLDivElement>) => void

ratio

이미지 비율 (예: '16/9')

string

shape

이미지 모양

square

circle

rounded

capsule

square

shadow

그림자 스타일

none

borderColor

테두리 색상(palette값 또는 HEX code)

string

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number | string

objectFit

이미지 채우기 방식

cover

contain

fill

none

scale-down

cover

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

개인정보 처리방침

서비스 약관