App Screen

Stackflow 네비게이션에서 개별 화면을 구성하는 컴포넌트입니다. 모바일 앱과 같은 화면 전환 경험을 제공할 때 사용됩니다.

Preview

import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { Flex } from "@seed-design/react";
import type { ActivityComponentType } from "@stackflow/react/future";
import {
  AppBar,
  AppBarCloseButton,
  AppBarIconButton,
  AppBarLeft,
  AppBarMain,
  AppBarRight,
} from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

declare module "@stackflow/config" {
  interface Register {
    "react/app-screen/preview": unknown;
  }
}

const AppScreenPreviewActivity: ActivityComponentType<"react/app-screen/preview"> = () => {
  return (
    <AppScreen theme="cupertino">
      <AppBar>
        <AppBarLeft>
          <AppBarCloseButton />
        </AppBarLeft>
        <AppBarMain>Preview</AppBarMain>
        <AppBarRight>
          <AppBarIconButton aria-label="Notification">
            <IconBellFill />
          </AppBarIconButton>
        </AppBarRight>
      </AppBar>
      <AppScreenContent>
        <Flex height="full" justify="center" align="center">
          Preview
        </Flex>
      </AppScreenContent>
    </AppScreen>
  );
};

export default AppScreenPreviewActivity;

Installation

npx @seed-design/cli@latest add ui:app-screen

Usage

import {
  AppBar,
  AppBarBackButton,
  AppBarCloseButton,
  AppBarIconButton,
  AppBarLeft,
  AppBarMain,
  AppBarRight,
} from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

<AppScreen theme="cupertino">
  <AppBar>
    <AppBarLeft>
      <AppBarBackButton />
    </AppBarLeft>
    <AppBarMain>Title</AppBarMain>
    <AppBarRight>
      {/* actions */}
    </AppBarRight>
  </AppBar>
  <AppScreenContent>
    {/* content */}
  </AppScreenContent>
</AppScreen>

Props

App Screen

`AppScreen`

Prop

Type

`AppScreenContent`

Prop

Type

App Bar

`AppBar`

Prop

Type

`AppBarLeft`

Prop

Type

`AppBarMain`

Prop

Type

`AppBarRight`

Prop

Type

`AppBarIconButton`, `AppBarBackButton`, `AppBarCloseButton`

Prop

Type

Examples

Transparent

AppScreen의 tone 속성을 transparent로 설정하여 투명한 배경을 사용할 수 있습니다.

AppBar의 배경이 투명해집니다.
AppScreen 상단에 하얀색 계열의 컨텐츠가 있을 경우를 대비해 그라데이션이 추가됩니다.

Preview

import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { Flex } from "@seed-design/react";
import type { ActivityComponentType } from "@stackflow/react/future";
import {
  AppBar,
  AppBarCloseButton,
  AppBarIconButton,
  AppBarLeft,
  AppBarMain,
  AppBarRight,
} from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

declare module "@stackflow/config" {
  interface Register {
    "react/app-screen/transparent-bar": unknown;
  }
}

const AppScreenTransparentBarActivity: ActivityComponentType<
  "react/app-screen/transparent-bar"
> = () => {
  return (
    <AppScreen theme="cupertino" layerOffsetTop="none" tone="transparent">
      <AppBar>
        <AppBarLeft>
          <AppBarCloseButton aria-label="Close" />
        </AppBarLeft>
        <AppBarMain>Preview</AppBarMain>
        <AppBarRight>
          <AppBarIconButton aria-label="Notification">
            <IconBellFill />
          </AppBarIconButton>
        </AppBarRight>
      </AppBar>
      <AppScreenContent>
        <Flex
          height="full"
          justify="center"
          align="center"
          bg="palette.gray800"
          color="fg.neutralInverted"
        >
          Preview
        </Flex>
      </AppScreenContent>
    </AppScreen>
  );
};

export default AppScreenTransparentBarActivity;

Customizing App Bar

PreviewThis is a nice preview.

Preview

import { Flex, Icon } from "@seed-design/react";
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import type { ActivityComponentType } from "@stackflow/react/future";
import { AppBar, AppBarIconButton, AppBarMain, AppBarRight } from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

declare module "@stackflow/config" {
  interface Register {
    "react/app-screen/app-bar-customization": unknown;
  }
}

const AppScreenAppBarCustomizationActivity: ActivityComponentType<
  "react/app-screen/app-bar-customization"
> = () => {
  return (
    <AppScreen theme="android">
      <AppBar>
        <AppBarMain title="Preview" subtitle="This is a nice preview." />
        <AppBarRight>
          <AppBarIconButton aria-label="Notification">
            <Icon svg={<IconBellFill />} color="fg.informative" size="x5" />
          </AppBarIconButton>
        </AppBarRight>
      </AppBar>
      <AppScreenContent>
        <Flex justify="center" align="center" height="full">
          Preview
        </Flex>
      </AppScreenContent>
    </AppScreen>
  );
};

export default AppScreenAppBarCustomizationActivity;

App Screen

Manual Installation

On this page