跳到主要内容

Page

业务页面的主容器，支持左右侧边栏、页头、页脚、操作栏和可滚动内容区域。

VEF 专属组件。 在 v2.1.6 中从 @vef-framework-react/starter 迁移到 @vef-framework-react/components。

适用场景​

  • 任何需要统一布局外壳的标准业务页面。
  • 左侧树形结构 + 右侧内容区域的分栏页面。
  • 需要固定页头或页脚的页面。

基础用法​

import { Page } from '@vef-framework-react/components';

export default function UserPage() {
  return (
    <Page>
      <div>主内容</div>
    </Page>
  );
}

带左侧边栏​

import { Page } from '@vef-framework-react/components';

export default function UserPage() {
  return (
    <Page
      leftAside={<DeptTree />}
      leftAsideWidth={260}
    >
      <UserTable />
    </Page>
  );
}

可调整宽度的侧边栏​

<Page
  leftAside={<DeptTree />}
  leftAsideWidth={{ defaultWidth: 260, minWidth: 180, maxWidth: 400 }}
>
  <UserTable />
</Page>

带页头和页脚​

<Page
  header={<PageTitle>用户管理</PageTitle>}
  headerPosition="outside"
  footer={<StatusBar />}
  footerPosition="inside"
>
  <UserTable />
</Page>

API​

属性类型默认值说明
marginbooleanfalse为容器应用 var(--vef-spacing-md) 外边距
gapLengthvar(--vef-spacing-md)网格单元格间距
leftAsideReactNode—左侧边栏内容
leftAsideWidthAsideWidth280固定宽度或可调整配置
rightAsideReactNode—右侧边栏内容
rightAsideWidthAsideWidth280固定宽度或可调整配置
headerReactNode—页头内容
headerPosition'inside' | 'outside''inside''outside' 时跨越全宽（包含侧边栏）
footerReactNode—页脚内容
footerPosition'inside' | 'outside''inside''outside' 时跨越全宽（包含侧边栏）
actionBarReactNode—操作栏内容
scrollableboolean—主内容区域是否可滚动
scrollMarginbooleanfalse为滚动条自动添加外边距（需开启 scrollable）

AsideWidth​

type AsideWidth = string | number | {
  defaultWidth?: string | number;
  minWidth?: string | number;
  maxWidth?: string | number;
};

useViewportHeight​

与 Page 一同导出的 hook，用于计算可用视口高度：

import { useViewportHeight } from '@vef-framework-react/components';

const height = useViewportHeight();