Layout

用于组织网页的框架结构。

基本用法

<Layout> 容器、可包裹子组件 <Header>、<Footer>、<Aside>、<Content>。

function App() {
  return (
    <div className="ykui-demo-column">
      <Layout>
        <Layout.Header style={{ backgroundColor: "#c6dcff" }}>
          Header
        </Layout.Header>
        <Layout.Content style={{ backgroundColor: "#a4c7ff" }}>
          Content
        </Layout.Content>
        <Layout.Footer style={{ backgroundColor: "#c6dcff" }}>
          Footer
        </Layout.Footer>
      </Layout>

      <Layout>
        <Layout.Header style={{ backgroundColor: "#c6dcff" }}>
          Header
        </Layout.Header>
        <Layout>
          <Layout.Sider style={{ backgroundColor: "#85b4ff" }}>
            Aside
          </Layout.Sider>
          <Layout.Content style={{ backgroundColor: "#a4c7ff" }}>
            Content
          </Layout.Content>
        </Layout>
        <Layout.Footer style={{ backgroundColor: "#c6dcff" }}>
          Footer
        </Layout.Footer>
      </Layout>

      <Layout>
        <Layout.Header style={{ backgroundColor: "#c6dcff" }}>
          Header
        </Layout.Header>
        <Layout>
          <Layout.Content style={{ backgroundColor: "#a4c7ff" }}>
            Content
          </Layout.Content>
          <Layout.Sider style={{ backgroundColor: "#85b4ff" }}>
            Aside
          </Layout.Sider>
        </Layout>
        <Layout.Footer style={{ backgroundColor: "#c6dcff" }}>
          Footer
        </Layout.Footer>
      </Layout>

      <Layout>
        <Layout.Sider style={{ backgroundColor: "#85b4ff" }}>
          Aside
        </Layout.Sider>
        <Layout>
          <Layout.Header style={{ backgroundColor: "#c6dcff" }}>
            Header
          </Layout.Header>
          <Layout.Content style={{ backgroundColor: "#a4c7ff" }}>
            Content
          </Layout.Content>
          <Layout.Footer style={{ backgroundColor: "#c6dcff" }}>
            Footer
          </Layout.Footer>
        </Layout>
      </Layout>
    </div>
  );
}

API

属性	说明	类型	默认值
children	内容	ReactNode	--
className	类名	string	--
style	样式	CSSProperties	--