Page Header 页头

export function PageHeaderComplete() {  return (    <div aria-label="A complete example of page header">      <ElPageHeader        onBack={() => notification("Back")}        breadcrumb={          <ElBreadcrumb separator="/">            <ElBreadcrumbItem to="./page-header.html">homepage</ElBreadcrumbItem>            <ElBreadcrumbItem>              <a className={styles.link} href="./page-header.html">route 1</a>            </ElBreadcrumbItem>            <ElBreadcrumbItem>route 2</ElBreadcrumbItem>          </ElBreadcrumb>        }        contentSlot={          <div style={flexRow}>            <ElAvatar size={32} src={AVATAR_IMG} style={{ marginRight: 12 }} />            <span style={titleStyle}>Title</span>            <span style={subtitleStyle}>Sub title</span>            <ElTag>Default</ElTag>          </div>        }        extra={          <div style={flexRow}>            <ElButton>Print</ElButton>            <ElButton type="primary">Edit</ElButton>          </div>        }      >        <ElDescriptions column={3} size="small" style={{ marginTop: 16 }}>          <ElDescriptionsItem label="Username">{" "}kooriookami{" "}</ElDescriptionsItem>          <ElDescriptionsItem label="Telephone">{" "}18100000000{" "}</ElDescriptionsItem>          <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem>          <ElDescriptionsItem label="Remarks">            <ElTag size="small">School</ElTag>          </ElDescriptionsItem>          <ElDescriptionsItem label="Address">            {" "}No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province{" "}          </ElDescriptionsItem>        </ElDescriptions>        <p style={{ ...mainStyle, fontWeight: 400 }}>          Element Plus team uses <b>weekly</b> release strategy under normal          circumstance, but critical bug fixes would require hotfix so the actual          release number <b>could be</b> more than 1 per week.        </p>      </ElPageHeader>    </div>  );}

export function PageHeaderBasic() {  return (    <ElPageHeader      onBack={() => {        console.log("go back");      }}      contentSlot={<span style={titleStyle}>Title</span>}    />  );}

export function PageHeaderCustomIcon() {  return <ElPageHeader icon={<ArrowLeft />} contentSlot={<span style={titleStyle}>Title</span>} />;}

export function PageHeaderNoIcon() {  return <ElPageHeader icon="" contentSlot={<span style={titleStyle}>Title</span>} />;}

export function PageHeaderBreadcrumb() {  return (    <ElPageHeader      contentSlot={<span style={titleStyle}>Title</span>}      breadcrumb={        <ElBreadcrumb separator="/">          <ElBreadcrumbItem to="./page-header.html">homepage</ElBreadcrumbItem>          <ElBreadcrumbItem>            <a className={styles.link} href="./page-header.html">route 1</a>          </ElBreadcrumbItem>          <ElBreadcrumbItem>route 2</ElBreadcrumbItem>        </ElBreadcrumb>      }    />  );}

export function PageHeaderAdditionalSections() {  return (    <ElPageHeader      icon=""      contentSlot={        <div style={flexRow}>          <ElAvatar size={32} src={AVATAR_IMG} style={{ marginRight: 12 }} />          <span style={titleStyle}>Title</span>          <span style={subtitleStyle}>Sub title</span>          <ElTag>Default</ElTag>        </div>      }      extra={        <div style={flexRow}>          <ElButton>Print</ElButton>          <ElButton type="primary">Edit</ElButton>        </div>      }    />  );}

export function PageHeaderMainContent() {  return (    <ElPageHeader contentSlot={<span style={titleStyle}>Title</span>}>      <div style={mainStyle}>        Your additional content can be added with default slot, You may put as        many content as you want here.      </div>    </ElPageHeader>  );}