Page Header

페이지 경로가 단순하면 Breadcrumb 대신 PageHeader를 사용하는 걸 권장해요.

출처: 문서

본문

import { ElNotification as notify } from 'element-plus'

const onBack = () => {
  notify('Back')
}

단순한 시나리오를 위한 표준 페이지 헤더예요.

기본 아이콘이 마음에 들지 않으면 예제처럼 icon 속성을 설정해서 아이콘을 커스터마이징할 수 있어요.

때로 페이지가 요소로 가득 차서 페이지에 아이콘이 표시되는 것을 원하지 않을 수 있어요. icon 속성을 ""으로 설정해서 제거할 수 있어요.

페이지 헤더는 breadcrumb 슬롯으로 사용자에게 라우트 정보를 주는 브레드크럼을 추가할 수 있게 해줘요.

헤더는 필요에 따라 복잡해질 수 있고, 풍부한 상호작용을 위해 추가 섹션을 추가할 수 있어요.

때로 헤더에 대응하는 내용을 함께 표시하고 싶을 수 있어요. 이때 default 슬롯을 사용하면 돼요.

이 컴포넌트는 다음 부분들로 구성돼요.

Name	Description	Type	Default
icon	페이지 헤더의 아이콘 컴포넌트	string / Component	Back
title	페이지 헤더의 메인 제목, 기본값은 내장 a11y가 있는 Back	string	''
content	페이지 헤더의 내용	string	''

Name	Description	Type
back	오른쪽이 클릭될 때 트리거	Function