Example: Column Layout #72
Conversation
…oilerplate-xwalk into example-columns
…ilerplate-xwalk into example-columns
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
msagolj
force-pushed
the
example-columns
branch
from
3a6dd1e to
5f34551
Compare
component-models.json
Outdated
| { | ||
| "component": "multiselect", | ||
| "name": "style", | ||
| "name": "Column Style(s)", |
There was a problem hiding this comment.
You probably meant to change the label, not the name?
There was a problem hiding this comment.
accidental change in the wrong model :) reverted
| { | ||
| "id": "column-section", | ||
| "components": [ | ||
| "text", |
There was a problem hiding this comment.
Why not include the filter from the regular section?
There was a problem hiding this comment.
to demonstrate that the columns section can have its own set of blocks, and not all blocks fit into a column e.g. hero block.
paths.json
Outdated
| "/content/aem-boilerplate/:/", | ||
| "/content/aem-boilerplate/configuration:/.helix/config.json", | ||
| "/content/aem-boilerplate/metadata:/metadata.json" | ||
| "/content/columns-example/:/", |
There was a problem hiding this comment.
Please don't change the default path mapping.
There was a problem hiding this comment.
jup, paths.json shouldn't be part of the PR, sorry. reverted.
|
2 participants
The default columns block only allows you to add default content (text, title , image, link/button) to the different columns.
This PR is an example on how you can style sections as columns so you can add any number and type of blocks/default content to the different column sections.
The code collects all consecutive sections that have style (class) set to
column, wraps them indivand styles it as a flexbox.Sample Output:
In the editor the columns are listed on the same level as normal sections. As an additional convenience for the author the selected width is shown in the title of the column:
You can add any number of style options as needed by your design to be selected by the author. In this example the author can select the desired width and background color.
Test URLs: