Components

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

AutoStepper

This component does not render anything, but can be used to automatically step through your slide. It is best used as a direct child of your slide and should not be nested inside other components.

NOTE
By setting the end value to 0, you will automatically step through your deck until you reach the next slide.

Properties

Examples

Show
# SLIDE 1
<Step>
- Step through the slide to show this first bullet point
- Afterwards, this slide will automatically step through the remaining bullet points
- Every 1500ms a new bullet shows
- item 4
- item 5
</Step>
<AutoStepper start={1} time={1500} />
---

Block

This component will suround its children with an element, which you can style with theme-aware properties.
Besides that, it also allows to set some CSS properties, like the ones needed for children of either 'flex' or 'grid' layouts, by setting it as a property of the component instead of setting it through the sx property. This allows it to be more easily used in conjunction with the Flex and Grid components.

NOTE
You can setup variants of this component with predefined styles, by defining them inside of theme.mdxp.block.

Properties

Examples

Show
# SLIDE 1
<Block width="50%" sx={{bg: 'accent'}}>
This block will take 50% of the surrounding width and have a background color set to the theme accent color.
Blocks can obviously contain multiple elements and by default group them in a div.
This component is quite handy in conjunction with columns.
</Block>
---
# SLIDE 2
<Block as="em" sx={{color: 'red'}}>
Here the surrounding element will be an `em` tag.  
You can also pass custom components, but beware that you need to put them in between braces instead of quotes : {Component}
</Block>

Flex

This element is a Block component, but it has its display property set to 'flex' by default and allows to set any flex-related CSS properties as values on the item itself, without needing to wrap it in an sx prop.

NOTE
If you do not know what display: flex does, it is highly recommended to read this flexbox guide. Flexbox is a super handy tool to quickly create one-dimensional layouts and control how your elements are placed.

NOTE
You can setup variants of this component with predefined styles, by defining them inside of theme.mdxp.flex.

Properties

Examples

Show
# SLIDE 1
<Flex justifyContent="space-around" alignItems="center" height="100%">
<Block sx={{bg: 'red'}} height="50px" flexGrow="1" />
<Block sx={{bg: 'tomato'}} flexGrow="2">
These blocks will grow to fill the space! 
</Block>
<Block sx={{bg: 'red'}} height="50px" flexGrow="1" />
</Flex>

Grid

This element is a Block component, but it has its display property set to 'grid' by default and allows to set any grid-related CSS properties as values on the item itself, without needing to wrap it in an sx prop.

NOTE
If you do not know what display: grid does, it is highly recommended to read this CSS grid guide. Grid is the two-dimensional counterpart of the flexbox layout, but there are various other minor differences between both. This guide does a good job at comparing both layout methods.

NOTE
You can setup variants of this component with predefined styles, by defining them inside of theme.mdxp.grid.

Properties

Examples

Show
<Grid
  gridTemplateColumns="1fr 3fr 1fr"
  gridTemplateRows="20% auto 5%"
  gridTemplateAreas={['header header header', 'main main sidebar', '. footer .']}
  gridGap='10px'
>
<Block gridArea="header" sx={{bg: 'tomato', textAlign: 'center'}}>
## SLIDE 1
</Block>
<Block gridArea="main" sx={{bg: 'tomato'}}>
- Your main content goes here
- lovely layout
</Block>
<Block gridArea="sidebar" sx={{bg: 'tomato'}}>
Sidebar
</Block>
<Block gridArea="footer" sx={{bg: 'tomato'}}>
 
Footer 
</Block>
</Grid>
---

Place

This component allows you to absolutely position an element in your slide, effectively taking it outside of the flow of the other elements.
If you do pass neither left, nor right properties, the element will be centered horizontally and similarly for top and bottom. Centering happens, by adding a transform: translate() CSS property, so beware if you pass your own transform property through sx.

NOTE
This component surround its elements with an element, and it is that element that gets placed.
If you use this component to center eg. an image, it is thus important to set your desired width on this element, and set the width of the image to 100%. Otherwise the image will not look centered, as it is the surrounding element that is centered and not the image.

Properties

Example

Show
# SLIDE 1
This paragraph is in the normal flow of the slide
<Place bottom="10px">
This paragraph gets placed in the bottom center.
</Place>
- This list is placed under the first paragraph
- Just like if the second paragraph was never there
---
# SLIDE 2
The image below gets placed in the center of the slide and takes 50% of the slide width.
<Place sx={{width: '50%'}}>
<!-- Note that you can use regular markdown image syntax and set the width through the alt-text -->
<img width="100%" src="public/logo.svg" />
</Place>

Styling

This component applies any property you pass as a custom style to its child. It applies the styles using the sx property and thus allows the use of theme values.

NOTE
This component only allows to have a single child element!

NOTE
You can setup variants of this component with predefined styles, by defining them inside of theme.mdxp.styling.

Properties

Examples

Show
# SLIDE 1
<Styling sx={{bg: 'accent', color: 'black', width: '100%', paddingLeft:'50px', listStyleType: 'square'}}>
- This list has a background color set to your theme's accent color
- The foreground color is set to black
- We also set a width and paddingLeft property.
</Styling>
---