mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity
3884ee3c5a
ant-design/components/layout/index.en-US.md
Wei Zhu 77b78a9389 docs: Unify type naming (#4636) 
* Unify name of ReactNode type in document

* Lowser all string type name

* Lowercase all number type name

* Lowercase all boolean type name

* Unify array type

* Lowercase all object type name

* Unify mutilple types
2017-01-20 20:10:50 +08:00

1.8 KiB
Raw Blame History

category type cols title
Components Layout 1 Layout

When you are handling the overall layout of a page, this component might be helpfull.

Overview

  • Layout: The layout wrapper, in which Header Sider Content Footer or Layout itself can be nested.
  • Header: The top layout with default style.
  • Sider: The sidebar with default style and basic functions.
  • Content: The content layout with default style.
  • Footer: The bottom layout with default style.

Base on flex layout, please pay attention to the compatibility.

API

<Layout>
  <Header>header</Header>
  <Layout>
    <Sider>left sidebar</Sider>
    <Content>main content</Content>
    <Sider>right sidebar</Sider>
  </Layout>
  <Footer>footer</Footer>
</Layout>

Layout

The wrapper.

Property Description Type Default
style to custom the styles object -
className container className string -

API of Layout.Header Layout.Footer Layout.Content is the same with Layout.

Layout.Sider

The sidebar.

Property Description Type Default
collapsible whether can be collapsed boolean false
defaultCollapsed to set the initial status boolean false
collapsed to set the current status boolean -
onCollapse the callback function, can be executed when you switch the sidebar, available only collapsible: true (collapsed) => {} -
trigger specify the customized trigger, set to null to hide the trigger string|ReactNode -
width width of the sidebar number|string 200
collapsedWidth width of the collapsed sidebar, available only collapsible: true number 64
style to custom the styles object -
className container className string -