PageWithFooter

长念阅读约 3 分钟1 年前发布1 年前编辑

© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0

基于 PageHeaderWrapper 组件封装的支持自定义固定底部操作栏的布局组件。

特性说明

• 支持自定义底部固定操作栏
• 兼容 PageHeaderWrapper 所有属性
• 内置 Spin 控制内容加载效果

基本用法

import { PageWithFooter } from '@/components/layout';

export default () => {
  return (
    <PageWithFooter
      title={title}
      header={
        <Button style={{ marginRight: 8 }} onClick={handleLinkBack}>
          <Icon type="arrow_back" style={{ marginRight: 4 }} />
          返回
        </Button>
      }
      contentProps={{ style: { paddingLeft: 50 } }}
      showFooter={!isReadonly}
      footer={<Button onClick={handleLinkBack}>取消</Button>}
    >
      {/* content here */}
    </PageWithFooter>
  );
};

API

参数	类型	说明	默认值
showFooter	boolean	可选 是否需要底部操作栏	false
footerHeight	number	可选 底部操作栏高度	60
footer	React.ReactNode	可选 底部操作栏内容	null

源代码

import { Size } from 'choerodon-ui/lib/_util/enum';
import { Spin } from 'choerodon-ui/pro';
import { SpinProps } from 'choerodon-ui/pro/lib/spin';
import { PageHeaderWrapper } from 'components/Page';

// 基于 PageHeaderWrapper 封装，支持所有属性；PageWithFooter 存在固定底部按钮组的布局
type PickSpinProps = Pick<SpinProps, 'spinning' | 'dataSet' | 'size' | 'tip'>;
export interface PageWithFooterProps extends React.ComponentProps<typeof PageHeaderWrapper> {
  showFooter?: boolean;
  footerHeight?: number;
  footer?: React.ReactNode;
}

const PageWithFooter: React.FC<PageWithFooterProps & PickSpinProps> = ({
  children,
  showFooter = false,
  footerHeight = 60,
  footer = null,
  spinning = false,
  dataSet,
  size = Size.default,
  tip = '',
  contentProps = { style: {} },
  ...wrapperProps
}) => {
  return (
    <PageHeaderWrapper
      {...wrapperProps}
      contentProps={{
        ...contentProps,
        style: { position: 'relative', paddingRight: 0, paddingBottom: 0, ...contentProps.style },
      }}
    >
      <div
        style={{
          height: showFooter ? `calc(100% - ${footerHeight}px)` : '100%',
          overflowY: 'auto',
          paddingRight: contentProps.style?.paddingRight ?? 50,
        }}
      >
        <Spin dataSet={dataSet} spinning={spinning} tip={tip} size={size}>
          {children}
        </Spin>
      </div>
      {showFooter && (
        <div
          style={{
            width: '100%',
            height: footerHeight,
            textAlign: 'center',
            padding: '12px 0',
            backgroundColor: '#ffffff',
          }}
        >
          {footer}
        </div>
      )}
    </PageHeaderWrapper>
  );
};

export default PageWithFooter;

更新日志

alpha

2024-11-12

• 🎉 新增 Spin 控制内容加载效果

2024-08-27

• 🎉 新增 PageWithFooter 布局组件