@illa-design/page-header v1.3.0

PageHeader

Pageheader is located on top of page container. it is used to show common description and action of page.

Installation

yarn add @illa-design/pageheader

Import component

import { PageHeader } from "@illa-dedign/pageheader"

API

PageHeader Basic Properties

PageHeader Events

Example

Basic usage

<PageHeader
  title="ILLA-Design"
  subTitle={
    <>
      This is a description
      <Tag color="blue" size="medium" style={{ marginLeft: 10 }}>
        Tag
      </Tag>
    </>
  }
  backIcon
  onBack={() => Message.info("Click back button")}
  breadcrumb={{
    routes: [
      {
        path: "/",
        breadcrumbName: "Home",
      },
      {
        path: "/channel",
        breadcrumbName: "Channel",
      },
      {
        path: "/news",
        breadcrumbName: "News",
      },
    ],
  }}
  extra={
    <div>
      <Button colorScheme="grey" style={{ marginRight: 10 }}>
        Cancel
      </Button>
      <Button type="blue">confirm</Button>
    </div>
  }
/>