Component

PageHeader

제목·설명·상위 이동·액션 슬롯의 배치만 소유하는 페이지 헤더입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { PageHeader, Button } from '@amineslab/ui'

import { Archive, Plus } from '@amineslab/ui/icons'

function PageHeaderExample({ title = '구성원', description = '등록된 구성원을 관리합니다.', showBack = false, showStartAdornment = false, actions = true, }: {
    title?: string;
    description?: string;
    showBack?: boolean;
    showStartAdornment?: boolean;
    actions?: boolean;
}) {
    return (<PageHeader className="w-full" title={title} description={description} backOptions={showBack ? { label: '목록', to: '#members' } : undefined} startAdornment={showStartAdornment ? (<div className="grid size-10 place-items-center rounded-full bg-elevation-accent-200 text-label-2 font-semibold text-brand">
            민
          </div>) : undefined} actions={actions ? (<>
            <Button variant="outline" startIcon={<Archive aria-hidden="true"/>}>
              내보내기
            </Button>
            <Button startIcon={<Plus aria-hidden="true"/>}>추가</Button>
          </>) : undefined}/>);
}

export default function ExamplePreview() {
  return (<PageHeaderExample {...({"title":"구성원","description":"등록된 구성원을 관리합니다.","showBack":false,"showStartAdornment":false,"actions":true} as const)}/>)
}

Props

@amineslab/ui에서 PageHeader를 가져옵니다.

import { PageHeader } from '@amineslab/ui'

`PageHeader`

페이지 상단의 제목 계층과 액션 슬롯을 배치합니다.

Name	Type	Default	Description
`title*`	`ReactNode`	-	h1으로 렌더되는 페이지 제목입니다.
`description / eyebrow`	`ReactNode`	-	제목 아래 보조 설명과 제목 위 분류 문구입니다.
`backOptions`	`PageHeaderBackOptions`	-	제목 위에 상위 이동 링크를 표시합니다.
`startAdornment`	`ReactNode`	-	제목 앞에 놓는 아바타·아이콘 슬롯입니다.
`actions`	`ReactNode`	-	PC에서는 제목 오른쪽, 모바일에서는 제목 아래에 배치되는 액션 슬롯입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

startAdornment 슬롯

아바타처럼 제목 앞에 놓는 요소는 startAdornment 슬롯에 둡니다.

민

김민서

Amineslab UI 팀 · 마지막 활동 오늘

import { PageHeader, Button } from '@amineslab/ui'

import { Archive, Plus } from '@amineslab/ui/icons'

function PageHeaderExample({ title = '구성원', description = '등록된 구성원을 관리합니다.', showBack = false, showStartAdornment = false, actions = true, }: {
    title?: string;
    description?: string;
    showBack?: boolean;
    showStartAdornment?: boolean;
    actions?: boolean;
}) {
    return (<PageHeader className="w-full" title={title} description={description} backOptions={showBack ? { label: '목록', to: '#members' } : undefined} startAdornment={showStartAdornment ? (<div className="grid size-10 place-items-center rounded-full bg-elevation-accent-200 text-label-2 font-semibold text-brand">
            민
          </div>) : undefined} actions={actions ? (<>
            <Button variant="outline" startIcon={<Archive aria-hidden="true"/>}>
              내보내기
            </Button>
            <Button startIcon={<Plus aria-hidden="true"/>}>추가</Button>
          </>) : undefined}/>);
}

export default function ExamplePreview() {
  return ((<PageHeaderExample title="김민서" description="Amineslab UI 팀 · 마지막 활동 오늘" showStartAdornment/>))
}

서비스 wrapper

액션 개수에 따른 overflow 메뉴나 모바일 FAB 같은 정책은 서비스가 PageHeader를 감싸서 정합니다.

구성원

import { PageHeader, ActionMenu, Button } from '@amineslab/ui'

import { Plus } from '@amineslab/ui/icons'

function ServicePageHeader({ title, primary, secondary, }: {
    title: string;
    primary: string;
    secondary: string[];
}) {
    const overflow = secondary.length > 2;
    return (<PageHeader className="w-full" title={title} actions={<>
          {overflow ? (<ActionMenu groups={[secondary.map((label) => ({ id: label, label }))]} triggerLabel="추가 작업" sheetTitle="추가 작업"/>) : (secondary.map((label) => (<Button key={label} variant="outline">
                {label}
              </Button>)))}
          <Button startIcon={<Plus aria-hidden="true"/>}>{primary}</Button>
        </>}/>);
}

export default function ExamplePreview() {
  return ((<ServicePageHeader title="구성원" primary="추가" secondary={['내보내기', '설정', '삭제']}/>))
}

사용 기준

권장하는 사용

액션은 actions 슬롯에 ReactNode로 넣습니다. 액션 개수에 따른 overflow 메뉴나 모바일 FAB 같은 분배 규칙은 패키지가 정하지 않습니다.
서비스마다 다른 액션 정책은 PageHeader를 감싼 서비스 컴포넌트에서 구현합니다.
아바타처럼 제목 앞에 놓는 요소는 startAdornment 슬롯을 씁니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Tab: 뒤로가기 링크와 actions 슬롯의 컨트롤 순으로 이동합니다.