页头_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#propageheadertabsProps 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;
}