IFrame

Layout

외부 문서나 독립 화면을 경계가 있는 프레임 안에 삽입하는 컴포넌트.

Usage

외부 콘텐츠나 격리된 미리보기를 현재 페이지 안에 포함할 때 사용한다.

import

import { IFrame } from '@mildang/design-system/IFrame';

API Reference

IFrame Props

Prop

Type

Default

sandbox

SandboxAttributeValue | SandboxAttributeValue[]

지정 안 함

showLoadingIndicator

boolean

false

예제

기본 사용

srcDoc 으로 만든 정적 HTML 을 고정 크기 iframe 에 띄운다. sandbox 를 지정하지 않으면 속성 자체가 렌더되지 않는다.

코드

Open in Playground

import { IFrame } from '@mildang/design-system/IFrame';

export default function IFrameExample() {
  return <IFrame title="미리보기" srcDoc="<p>안전한 iframe 미리보기</p>" width={320} height={180} />;
}