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>
  );
};

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