API
플러그인
plugin-basic-ui

@stackflow/plugin-basic-ui

전역 스택 상태를 사용하여 활동 내에서 UI를 렌더링해요. 기본적으로 cupertino 및 android 테마를 제공해요.

설치

npm install @stackflow/plugin-basic-ui

사용법

어플리케이션 앱바 형태의 컴포넌트를 제공해요.

stackflow.config.ts
import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyHome",
      route: "/",
    },
    {
      name: "MyArticle",
      route: "/articles/:articleId",
    },
  ],
});
stackflow.ts
import { stackflow } from "@stackflow/react";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
import { config } from "./stackflow.config";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
 
const { Stack } = stackflow({
  config,
  components: {
    MyHome,
    MyArticle,
  },
  plugins: [
    // ...
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
});

basicUIPlugin 옵션

OptionTypeDescription
themecupertino | android테마를 설정해요.
rootClassNamestring(optional)루트 클래스 이름을 설정해요.
appBarAppBar(optional)앱 바를 설정해요.
AppScreen
import { AppScreen } from "@stackflow/plugin-basic-ui";
 
const Something = () => {
  return (
    <AppScreen appBar={{ title: "Home" }}>
      <div>Hello, World</div>
    </AppScreen>
  );
};

Safe Area

AppScreen은 두 테마 모두에서 본문과 앱 바에 기기의 좌우 Safe Area Inset을 자동으로 반영해요. Cupertino 제목은 안전 영역 안에서 가운데에 배치돼요. 배경과 화면 전환은 화면 전체 너비를 유지해요.

Modal은 상하좌우 Safe Area Inset을 제외한 안전 영역의 가운데에 배치돼요. 기존 좌우 2.5rem 마진과 maxWidth는 안전 영역 안에서 그대로 적용되고, dim 배경은 화면 전체를 덮어요.

BottomSheet 배경은 화면 전체 너비와 하단 위치를 유지해요. 내부에는 좌우와 하단 Safe Area Inset을 패딩으로 적용하며, 자식 요소의 기존 패딩은 그 안에 추가로 유지돼요. 상단 Inset은 적용하지 않아요.

자식 요소에서 이미 Safe Area Inset을 적용하고 있다면, 컴포넌트가 자동 적용하는 방향과 중복되는 처리만 제거해 주세요. Modal은 상하좌우, BottomSheet는 좌우와 하단이 대상이에요. 일반적인 콘텐츠 패딩과 BottomSheet 자식의 기존 상단 Inset 처리는 유지해 주세요.

브라우저가 Safe Area Inset을 제공하도록 viewport 메타 태그에 viewport-fit=cover를 포함해 주세요.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

이미지 등 본문 요소를 화면 끝까지 넓히려면 블록 요소로 감싸고, 감싼 요소에 음수 마진을 지정해 Inset을 상쇄해 주세요.

.full-bleed {
  margin-left: calc(-1 * env(safe-area-inset-left, 0px));
  margin-right: calc(-1 * env(safe-area-inset-right, 0px));
}

appBar

OptionTypeDescription
backButton{ renderIcon?: () => ReactNode; ariaLabel?: string; onClick?: (e) => void } | { render?: () => ReactNode }뒤로가기 버튼을 설정해요.
closeButton{ renderIcon?: () => ReactNode; ariaLabel?: string; onClick?: (e) => void } | { render?: () => ReactNode }닫기 버튼을 설정해요.

모달 및 바텀시트 컴포넌트도 제공해요.

Modal
import { Modal } from "@stackflow/plugin-basic-ui";
 
const Something = () => {
  return (
    <Modal>
      <div>Hello, World</div>
    </Modal>
  );
};
BottomSheet
import { BottomSheet } from "@stackflow/plugin-basic-ui";
 
const Something = () => {
  return (
    <BottomSheet>
      <div>Hello, World</div>
    </BottomSheet>
  );
};
linkplugin-devtools