Content
Layout Component1import { Content } from 'maker-ui'
The Content component controls the positioning of your inner page content (anything after Header
and before Footer
).
It scans its child nodes for valid layout components like SideNav, Main, or Sidebar and will throw an error if it does not recognize a supported layout.
Props#
Content does not have any special props, but you can still add custom id
and className
selectors.
Prop | Description |
---|---|
css | Type object css prop will be applied to Content. |
Maker UI Options#
The Content component computes all of the dynamic widths and grid layouts for your page. Your options configuration has a content
object with the following properties:
Prop | Description |
---|---|
maxWidth | Type string | number | (string | number)[] Default1020 |
maxWidthSection | Type string | number | (string | number)[] <Section /> components. Can be a responsive array. Default1020 |
breakpoint | Type string | number options.breakpoints array. Default0 The first index of options.breakpoints |
errorBoundary | Type object Type boolean options.errors . |
Accepted Layouts#
The Content component accepts the following layouts:
Content#
1<Content>2 <Main>{children}</Main>3</Content>
Sidebar Content#
1<Content>2 <Sidebar />3 <Main>{children}</Main>4</Content>
Content Sidebar#
1<Content>2 <Main>{children}</Main>3 <Sidebar />4</Content>
Sidebar Content Sidebar#
1<Content>2 <Sidebar />3 <Main>{children}</Main>4 <Sidebar />5</Content>
SideNav Content#
1<Content>2 <SideNav />3 <Main>{children}</Main>4</Content>
Content SideNav#
1<Content>2 <Main>{children}</Main>3 <SideNav />4</Content>
Contents