Scrim

Feedback & Status

콘텐츠 위에 덧씌우는 오버레이.

Usage

Dialog·Drawer 뒤의 콘텐츠를 어둡게 가리고 현재 표면에 집중시킬 때 사용한다.

import

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

API Reference

Scrim Props

Prop

Type

Default

className

string

지정 안 함

예제

Default

코드

Open in Playground

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

const ScrimDefaultExample = () => (
    <div style={{ position: 'relative', width: 400, height: 300, overflow: 'hidden', borderRadius: 12 }}>
      <div
        style={{
          width: '100%',
          height: '100%',
          background: 'linear-gradient(135deg, #4ade80, #3b82f6)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 24,
          fontWeight: 'bold',
          color: '#fff',
        }}
      >
        배경 콘텐츠
      </div>
      <Scrim>
        <Spinner color="white" size="xl" />
      </Scrim>
    </div>
  );

export default ScrimDefaultExample;

EducoreTheme

코드

Open in Playground

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

const ScrimEducoreThemeExample = () => (
    <div
      data-panda-theme="educore"
      style={{ position: 'relative', width: 400, height: 300, overflow: 'hidden', borderRadius: 12 }}
    >
      <div
        style={{
          width: '100%',
          height: '100%',
          background: 'linear-gradient(135deg, #4ade80, #3b82f6)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 24,
          fontWeight: 'bold',
          color: '#fff',
        }}
      >
        배경 콘텐츠
      </div>
      <Scrim>
        <Spinner color="white" size="xl" />
      </Scrim>
    </div>
  );

export default ScrimEducoreThemeExample;