KPageHeader

If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.

Install

pnpm

pnpm add @ikun-ui/page-header

yarn

yarn add @ikun-ui/page-header

npm

npm install @ikun-ui/page-header

Basic usage

Additional operation section

The header can be as complicated as needed, you may add additional sections to the header, to allow rich interactions.

Main content

Sometimes we want the head to show with some co-responding content, we can utilize the default slot for doing so.

Breadcrumbs

Page header allows you to add breadcrumbs for giving route information to the users by breadcrumb slot.

Custom icon

You can customize the icon through the slot or icon attribute

No icon

PageHeader without icon is also possible

Complete example

PageHeader Props

Name	Type	Default	Description
icon	string	i-carbon-arrow-left	Icon component of page header.following the unocss standard
title	string	''	Title of page header.
content	string	''	Content of page header.
cls	string	''	Additional class for component
attrs	any	{}	Additional attributes

PageHeader Events

Name	Description	Type
back	Triggers when right side is clicked.	()=> void

PageHeader Slots

Name	Description
default	Main content.
title	Content of the title.
icon	Content of the icon.
content	Content.
extra	Extra.
breadcrumb	Content as breadcrumb.