@teamix/page-header

页头_spacex

@teamix/page-header

页头区组件

API - TODO

参数名	说明	必填	类型	默认值	备注

Props

// 面包屑区域相关配置
  breadcrumbMaxNode?: number; // 面包屑组件最大展示数，默认为 5
  breadcrumbDataSource?: BreadcrumbDataSourceType[]; // 面包屑区域配置，类型详见下方
  breadcrumbVisible?: boolean; // 是否显示面包屑
  breadcrumbProps?: BreadcrumbProps; // 面包屑基础组件 props
  linkDataSource?: LinkDataSourceType[]; // 页头右上方区域配置，类型详见下方
  // 标题区域相关配置
  onBackIconClick?: () => void; // 点击后退按钮的事件
  backIcon?: {
    visible: boolean;
    onClick: () => void;
    className?: string;
  };
  backIconVisible?: boolean; // 是否显示后退按钮
  // customIcon
  customIconVisible?: boolean; // 是否显示自定义 Icon
  onCustomIconClick?: () => void; // 自定义 Icon 事件
  customIconType?: string; // 自定义 Icon type
  title?: string; // 标题
  customTitle?: string; // 标题，会覆盖 title，用于 pagemap 特殊场景配置
  operationWords?: string; // 操作文案,在标题下下方
  link?: string; // ”了解更多“跳转链接
  dataOverAll?: DataOverAllType[]; // 右侧数据总览，类型详见下方
  tagDataSource?: TagDataSourceType[]; // 标签区配置，类型详见下方
  selectVisible?: boolean; // 是否展示选择
  selectDataSource?: SelectDataSourceType[]; // 选择区配置，类型详见下方
  mainButton?: ButtonDataSourceType; // 主按钮，类型详见下方
  mainButtonText?: string;
  secondaryButtons?: ButtonDataSourceType[]; // 次要按钮配置，类型详见下方
  secondaryButtonsMaxNode?: number; // 次要按钮展示最大数，默认为 3，超过这个值将收至 MenuButton
  secondaryButtonsMaxNodeLabel?: string; // 次要按钮收至 MenuButton 时的 label
  image?: string; // 背景展示图，固定在右侧贴紧
  style?: object;
  className?: string;
  // Tabs
  onTabChange?: (key: string) => void;
  tabs?: object; // 详见 https://teamixpro.dg.aliyun-inc.com/components/page-header#propageheadertabs

Props types detail

import { MenuButtonProps } from '@alifd/next/types/menu-button';
import { ButtonProps } from '@alifd/next/types/button';
import { BreadcrumbProps } from '@alifd/next/types/breadcrumb';


BreadcrumbDataSourceType {
  content: any;
  link?: string;
  id: string;
  onClick?: () => void;
}

LinkDataSourceType {
  icon?: IconDataSourceType;
  content?: any;
  onClick?: ()=>void;
}

DataOverAllType {
  count?:number;
  isUrgent?: boolean;
  content?: any;
}

IconDataSourceType {
  id: string;
  type: string;
  size?: number | 'small' | 'xxs' | 'xs' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
  scriptUrl?: string;
  onClick?: ()=>void;
  className?: string;
}

TagDataSourceType {
  id: string;
  type?: 'normal' | 'primary',
  color?: string;
  content?: any;
  tagProps?: any;
}

CommonDataSourceType {
  label: string;
  value: string | number;
}

SelectDataSourceType {
  id: string;
  label: string;
  dataSource: CommonDataSourceType[];
  // useTriangleUI?: boolean; // todo
  // triangleContent?: string; // todo
  menuButtonProps?: MenuButtonProps;
}

ButtonDataSourceType {
  id: string;
  content: any;
  type?: 'normal' | 'primary' | 'secondary';
  buttonProps?: ButtonProps;
  onClick?: ()=>void;
  buttonGroup?: ButtonDataSourceButtonGroupType[]; // 将按钮放入“更多” MenuButton 中，如传入该项，type 将不生效
  menuButtonProps?: MenuButtonProps;
}

ButtonDataSourceButtonGroupType {
  content: any;
  onClick?: (id:string)=>void;
  id: string;
}