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

B 端物料组件库

---
title: PageLayout-Simple
order: 1
---

左侧边栏

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

const { Left, 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: '800px'}}>
        <PageLayout>
          <Left>
            <Section>
              <Placement>左侧区域</Placement>
            </Section>
          </Left>

          <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>

          <Container>
            <Section title="活动设置">
              <Placement block>有标题的模块</Placement>
            </Section>
            <Section>
              <Placement block>无标题的模块</Placement>
            </Section>
          </Container>
          
          <Footer>
            <Placement>底部区域</Placement>
          </Footer>
        </PageLayout>
      </div>
    );
  }
}

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