---
title: 基础-分页+侧边栏
order: 6
---

`PageContent` 以及 `isTab` 属性，构成了分页的能力，每一个 `PageContent` 都有自己的侧边栏

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
  Page,
  PageContent,
  PageHeader,
  PageFooter,
  Block,
  BlockCell,
  P,
  Text,
} from '@dslc/pro-layout';

const MockBlock = (props) => {
  return (
    <div className="mock-block-fullx60" {...props}>
      {props.title} <sub>(100% x 100% with min-height:60px)</sub>
    </div>
  );
};

const App = () => {
  return (
    <Page
      isTab
      minHeight="100vh"
      presetHeader
      presetFooter
      // 默认设置打开哪一个
      tabProps={{ defaultActiveKey: 'cc' }}
      header={<MockBlock title="页头" />}
      footer={<MockBlock title="页尾" />}
    >
      <PageContent
        isTab
        title="分页1"
        key="aa"
        presetNav
        presetAside
        nav={<MockBlock title="侧边栏1 nav" />}
        aside={<MockBlock title="侧边栏1 aside" />}
      >
        <MockBlock title="分页内容1" />
      </PageContent>
      <PageContent
        isTab
        key="bb"
        noPadding
        title="分页2(noPadding)"
        presetNav
        presetAside
        nav={<MockBlock title="侧边栏2 nav" />}
        aside={<MockBlock title="侧边栏2 aside" />}
      >
        <MockBlock title="分页内容2" />
      </PageContent>
      <PageContent
        isTab
        title="分页3"
        key="cc"
        presetNav
        presetAside
        nav={<MockBlock title="侧边栏3 nav" />}
        aside={<MockBlock title="侧边栏3 aside" />}
      >
        <MockBlock title="分页内容3" />
      </PageContent>
    </Page>
  );
};

ReactDOM.render(
  <div className="mock-iframe">
    <App />
  </div>,
  mountNode,
);
```

```css
.mock-iframe {
  min-height: 350px;
  width: 100%;
  border: 1px solid #ddd;
}
.mock-block-fullx60 {
  width: 100%;
  height: 100%;
  min-height: 60px;
  background: #ddd;
  border: 1px dashed #333;
}
```