@aliretail/react-materials-components/demo/PageLayout/usage.md

B 端物料组件库

---
title: PageLayout-Usage
order: 1
---

基础

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Breadcrumb, Card, Button } from '@alifd/next';
import { PageLayout } from '@aliretail/react-materials-components';
const { Nav, Container, Footer, Section } = PageLayout;

const Placement = ({ children, block }) => {
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#b3e8b3',
        height: block ? '100px' : 'auto',
        padding: '10px',
      }}
    >
      {children}
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <div style={{ width: '600px' }}>
        <PageLayout>
          <Nav>
            <Placement>面包屑区域</Placement>
          </Nav>
          <Container>
            <Section>
              <Placement>一个区块</Placement>
            </Section>
          </Container>
          <Container>
            <Section>
              <Placement>另一个一个区块</Placement>
            </Section>
          </Container>

          <Container>
            <Section title="活动设置">
              <Placement block>有标题的模块</Placement>
            </Section>
            <Section>
              <Placement block>无标题的模块</Placement>
            </Section>
          </Container>

          <Footer>
            <Placement>底部区域</Placement>
          </Footer>
        </PageLayout>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```