BrowserFrame

Layout

탭·주소창을 포함한 브라우저형 미리보기 프레임.

Usage

관리자 화면에서 최종 사용자 화면이 어떻게 보이는지 미리보기로 보여줄 때 iframe 안에 렌더해 반응형 뷰포트(모바일·태블릿·데스크톱) 전환을 함께 보여줄 때

import

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

BrowserFrame 하나만 가져오면 BrowserFrame.Root 를 그 아래에서 쓸 수 있다.

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

Anatomy

tsx

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

export default function Example() {
  return (
    <BrowserFrame />
  );
}

부품

필수 여부

반복

위치

BrowserFrame.Root

필수

API Reference

공개 Props가 없습니다.

예제

기본 브라우저 프레임

코드

import {
  BrowserFrame,
  type BrowserFrameRootProps,
} from '@mildang/design-system/unofficial/BrowserFrame';
import { css } from '@mildang/styled-system/css';

const sampleContentStyle = css({
  minHeight: '240px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: 'md',
  backgroundColor: 'neutral.surface.high',
  color: 'neutral.text.low',
  textStyle: 'title-md',
  mdDown: { backgroundColor: 'blue.light.100' },
});
const STORY_DEFAULT_ARGS = {
  address: 'http://localhost:8003/',
  children: <div className={sampleContentStyle}>Preview content</div>,
} satisfies BrowserFrameRootProps;

export default function BrowserFrameBasicExample(props: Partial<BrowserFrameRootProps> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props };
  return <BrowserFrame.Root {...mergedProps} />;
}

반응형 iframe

코드

import {
  BrowserFrame,
  type BrowserFrameRootProps,
} from '@mildang/design-system/unofficial/BrowserFrame';
import { css } from '@mildang/styled-system/css';

const sampleContentStyle = css({
  minHeight: '240px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: 'md',
  backgroundColor: 'neutral.surface.high',
  color: 'neutral.text.low',
  textStyle: 'title-md',
  mdDown: { backgroundColor: 'blue.light.100' },
});
const STORY_DEFAULT_ARGS = {
  address: 'http://localhost:8003/courses/type/content',
  viewportControls: true,
  renderInIframe: true,
  children: <div className={sampleContentStyle}>Media query preview</div>,
} satisfies BrowserFrameRootProps;

export default function BrowserFrameResponsiveIframeExample(
  props: Partial<BrowserFrameRootProps> = {},
) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props };
  return <BrowserFrame.Root {...mergedProps} />;
}