v0.2.5
Documentation
IntroductionGetting StartedSyntaxComponentsThemingPresentExamples
API
@mdxp/core
@mdxp/components
ComponentsExtractLayoutsBlankLayoutHeaderLayoutNumberLayoutWrappers
@mdxp/rehypex-plugins

Layout Components

This page contains the documentation for all Layout Components that the @mdxp/components package has to offer.

BlankLayout

This is the default layout for MDXP, which is exposed here if you need to explicitely use it.
This layout is setup as a div with the following default sx style:

sx = {
  width: '100%',
  height: '100%',
  boxSizing: 'border-box',
  position: 'relative',
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  color: 'text',
  bg: 'background',
  '& p': {textAlign: 'center'},
}

Properties

sx
object
{}
children
node
props
object

Examples

Show
# SLIDE 1
This slide will use whathever the default layout is as its layout
---
<BlankLayout>
# SLIDE 2
This slide wil have a blank layout.
</BlankLayout>
---
<BlankLayout sx={{color: 'tomato'}}>
# SLIDE 3
This slide will have a blank layout with a tomato colored text.
</BlankLayout>
---
<BlankLayout sx={{bg: 'primary'}}>
# SLIDE 4
This slide will have a blank layout with your theme's "primary" color as background.
</BlankLayout>

HeaderLayout

This layout looks at its first child and if that is an H1-H6 element, places it at the top. You can also pass an optional Footer element as a property, which will be set at the bottom. The rest of the page will be filled with a div that contains the rest of the slide and which is styled like a BlankLayout by default.

Properties

sxHeader
object
{}
sx
object
{}
Footer
elementType
children
node
props
object

Examples

Show
# SLIDE 1
This slide will use whathever the default layout is as its layout
---
<HeaderLayout>
# SLIDE 2
This slide will have its title (SLIDE 2) at the top of the page
</HeaderLayout>
---
<HeaderLayout sxHeader={{width: '100%', bg: 'text', color: 'background', textAlign: 'center'}}>
### SLIDE 3
This slide will have its title at the top of the page,
in a full-width box with inverted background and foreground color.
Note that the title is smaller, because we used an H3 tag.
</HeaderLayout>
---
<HeaderLayout>
This slide 4 will look like a BlankLayout, because it does not have a title as first element.
</HeaderLayout>

NumberLayout

This layout renders a BlankLayout, but places an extra, absolutely posistioned, element which contains the current slide number. The extra element is rendered with a Place component.

Properties

offset
number
0
sx
object
{}
numberOptions
exact
{bottom: '2%', right: '2%'}
children
node
props
object

Examples

Show
# SLIDE 1
This slide will use whathever the default layout is as its layout
---
<NumberLayout>
# SLIDE 2
This slide will have the number 1 written in the bottom right corner.
</NumberLayout>
---
<NumberLayout offset={1} numberOptions={{bottom: '25px', left: '25px', sx: {color: 'red', fontSize: '50px'}}}>
# SLIDE 3
This slide will have the number 3 written in the bottom left corner.  
The number will also be red and have a 50px font-size.
</NumberLayout>