Pattern Wrap Classes

This feature allows you to add a wrapper div with css class(es) around a pattern when shown in the single preview. If it gets included in another pattern, the wrapper is not added.

This comes in handy if you, for example, use theming classes to visualize different backgrounds, colors etc.

Configurationpermalink

Enable this feature with the configuration options patternWrapClassesEnable and patternWrapClassesKey.

How does it work?permalink

Patternlab will look for any "data key" added to the patternWrapClassesKey array and adds that date to the wrapper element classes.

Data key can be set inside the Markdown or JSON file of any pattern.

Example Configpermalink

"patternWrapClassesKey": ["theme-class"]

Use in Markdownpermalink

Usage Documenting Patterns

my-pattern.mdpermalink

---
theme-class: my-theme-class
---

Resultpermalink

<div class="pl-pattern-wrapper-element my-theme-class">...markup of pattern...</div>

Use in JSONpermalink

Usage Creating Pattern-specific Values

my-pattern.jsonpermalink

{
  "theme-class": "my-other-theme-class"
}

Resultpermalink

<div class="pl-pattern-wrapper-element my-other-theme-class">...markup of pattern...</div>

Pseudo-Patternspermalink

This will work with pseudo-patterns too (Using Pseudo-Patterns)

my-pattern~variant.jsonpermalink

{
  "theme-class": "my-variant-theme-class"
}

Resultpermalink

<div class="pl-pattern-wrapper-element my-variant-theme-class">...markup of pattern...</div>

Multiple entries in "patternWrapClassesKey"permalink

Will result in multiple classes in the wrapper div.

Example Configpermalink

"patternWrapClassesKey": ["theme-class", "other-class"]

my-pattern.jsonpermalink

{
  "theme-class": "theme-class",
  "other-class": "some-other-class"
}

Resultpermalink

<div class="pl-pattern-wrapper-element theme-class some-other-class">...markup of pattern...</div>