A column layout for exerslide.
npm install exerslide-plugin-column-layoutThis layout renders its content in two or more columns, looking something like
```
+-----------------------+ +-----------------------+
| | | |
| | | |
| | | +------+ |
| Text Text | | Text | | |
| | | +------+ |
| | | |
| | | |
+-----------------------+ +-----------------------+
The content is provided via layoutData.
This layout accepts the following options:
- divider: A string that is used to separate the columns in the content. ###
Defaults to . The divider must be always alone in one line.alignment
- : An array of alignments corresponding to each column. This left
defines the horizontal position of the content and can be either center
(default), or right. Example: [left,
right].position
- : An array of positions corresponding to each This defines the top
vertical position of the content in the column, and can be either middle
(default), or bottom. Example: [top, middle]. middle and bottom will align the content relative to the largest column.
The content consists for several blocks of text (one block per column)
separated by the divider. For example:
``
This is the left column.
###
This is the right column.
Each column has the class .Column-column. Columns are wrapped inside an .Column-wrapper
element with class . Each column gets assigned a class .Column-1
containing its index, e.g. for the first column, .Column-2 for
the second column, and so on.
Each alignment and position also adds a class to each column element (e.g.
.Column-left, .Column-middle, etc.). You can use these classes to override
the default behavior.
Columns have a default min-width of 150px. You can set a column to a
specific width using
`yaml`
style: |
.Column-1 {
min-width: 50px;
max-width: 50px;
}
(which sets the width of the first column to 50px)
Note: If you have more than two columns, you likely want to override the
max-width of #exerslide-slide > *, e.g. with
`yaml`
style: |
#exerslide-slide > * {
max-width: 80%;
}
`yaml
---
id: two_column_example
title: TwoColumn layout example
layout: TwoColumn
layout_data:
alignment: [left, center]
position: [top, middle]
---
This is an example that shows text content on the left and a picture on
the right.
Example with [Markdown][]:
- For example:
- bullet lists
Check out the image on the right.
###
!Example image on the right hand side
``