ZSPortal

컴포넌트의 현재 레이아웃 위치와 overflow, zIndex 제약을 벗어나 OverlayProvider의 최상위 레이어에 콘텐츠를 렌더링합니다. 자체 팝업이나 화면 최상단 플로팅 UI처럼 표준 오버레이 API로 표현하기 어려운 UI에 사용합니다.

Alert, BottomSheet, Snackbar, Loader에는 ZSPortal을 직접 구성하는 대신 useOverlay를 우선 사용하세요.

앱 예제 Playgroundv1.0.2

소스 보기새 창에서 열기

Interactive exampleZSPortal 로컬 웹 예제

예제를 선택하면 현재 저장소 소스로 만든 Expo Web 화면을 불러옵니다.

웹 미지원 또는 플랫폼 종속 기능은 실제 iOS·Android 앱에서 확인하세요.

사전 조건

ZSPortal은 OverlayProvider가 제공하는 포털 호스트에 콘텐츠를 등록합니다. 앱 루트에 Provider가 있어야 합니다.

<ThemeProvider>
  <OverlayProvider>
    <App />
  </OverlayProvider>
</ThemeProvider>

기본 사용법

import { ZSPortal, ZSView, ZSText } from '@0610studio/zs-ui';
import { StyleSheet } from 'react-native';

<ZSPortal isFocused={isOpen}>
  <ZSView style={styles.floatingLayer} elevationLevel={8}>
    <ZSText typo="body.2">최상위 레이어 콘텐츠</ZSText>
  </ZSView>
</ZSPortal>

const styles = StyleSheet.create({
  floatingLayer: {
    ...StyleSheet.absoluteFillObject,
  },
});

Props

Prop	Type	Default	Description
children	React.ReactNode	Required	최상위 레이어에 렌더링할 콘텐츠
isFocused	boolean	true	true면 등록하고 false면 포털에서 제거

컴포넌트가 언마운트될 때 등록된 콘텐츠도 자동으로 제거됩니다. children이 바뀌면 같은 포털 항목의 내용이 갱신됩니다.