You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/docs/src/docs/pattern-parameters.md
+1-94Lines changed: 1 addition & 94 deletions
Original file line number
Diff line number
Diff line change
@@ -11,97 +11,4 @@ sitemapPriority: '0.8'
11
11
sitemapChangefreq: 'monthly'
12
12
---
13
13
14
-
**Important:** Pattern parameters are supported by the Node Mustache PatternEngines. Other template languages provide better solutions to this problem.
15
-
16
-
Pattern parameters are a **simple** mechanism for replacing Mustache variables in an included pattern. They are limited to replacing variables in the included pattern and **only** the included pattern. They are especially useful when including a single pattern multiple times in a molecule, template, or page and you want to supply unique data to that pattern each time it's included. Pattern parameters **do not** currently support the following:
17
-
18
-
- sub-lists (_e.g. iteration of a section_),
19
-
- long strings of text (_can be unwieldy_)
20
-
- modifying/replacing variables in patterns included _within_ the targeted pattern
21
-
22
-
Pattern parameters are Pattern Lab-specific, have no relationship to Mustache, and are implemented outside of Mustache. Learn more about pattern parameters:
The attributes listed in the pattern parameters need to match Mustache variable names in your pattern. The values listed for each attribute will replace the Mustache variables. For example:
Again, pattern parameters are a simple find and replace of Mustache variables with the supplied values.
35
-
36
-
## <spanid="adding-pattern-parameters"></span>Adding Pattern Parameters to Your Pattern Partial
37
-
38
-
Let's look at a simple example for how we might use pattern parameters. First we'll set-up a pattern that might be included multiple times. We'll make it a simple "message" pattern with a single Mustache variable of `message`.
39
-
40
-
```html
41
-
<divclass="message">{% raw %}{{ message }}{% endraw %}</div>
42
-
```
43
-
44
-
We'll organize it under Atoms > Global and call it "message" so it'll have the pattern partial of `atoms-message`.
45
-
46
-
Now let's create a pattern that includes our message pattern partial multiple times. It might look like this.
47
-
48
-
```html
49
-
<divclass="main-container">
50
-
{% raw %}{{> atoms-message }}{% endraw %}
51
-
<div>
52
-
A bunch of extra information
53
-
</div>
54
-
{% raw %}{{> atoms-message }}{% endraw %}
55
-
</div>
56
-
```
57
-
58
-
Using `data.json` or a pattern-specific JSON file we wouldn't be able to supply separate messages to each pattern partial. For example, if we defined `message` in our `data.json` as "this is an alert" then "this is an alert" would show up twice when our parent pattern was rendered.
59
-
60
-
Instead we can use pattern parameters to supply unique messages for each instance. So let's show what that would look like:
61
-
62
-
```html
63
-
{% raw %}
64
-
<divclass="main-container">
65
-
{{> atoms-message(message: "this is an alert message") }}
66
-
<div>
67
-
A bunch of extra information
68
-
</div>
69
-
{{> atoms-message(message: "this is an informational message") }}
70
-
</div>
71
-
{% endraw %}
72
-
```
73
-
74
-
Now each pattern would have its very own message.
75
-
76
-
## <spanid="toggling-sections"></span>Toggling Sections with Pattern Parameters
77
-
78
-
While pattern parameters are not a one-to-one match for Mustache they do offer the ability to toggle sections of content. For example we might have the following in a generic header pattern called `organisms-header`:
79
-
80
-
```html
81
-
{% raw %}
82
-
<divclass="main-container">
83
-
{{# emergency }}
84
-
<divclass="alert">Emergency!!!</div>
85
-
{{/ emergency }}
86
-
<divclass="header">
87
-
... stuff ...
88
-
</div>
89
-
</div>
90
-
{% endraw %}
91
-
```
92
-
93
-
We call the header pattern in a template like so:
94
-
95
-
```
96
-
{% raw %}{{> organisms-header }}{% endraw %}
97
-
... stuff ...
98
-
```
99
-
100
-
By default, if we don't have an `emergency` attribute in our `data.json` or the pattern-specific JSON file for the template the emergency alert will never be rendered. Instead of modifying either of those two files we can use a boolean pattern param to show it instead like so:
101
-
102
-
```
103
-
{% raw %}{{> organisms-header(emergency: true) }}{% endraw %}
104
-
... stuff ...
105
-
```
106
-
107
-
Again, because pattern parameters aren't leveraging Mustache this may not fit the normal Mustache workflow. We still wanted to offer a way to quickly turn on and off sections of an included pattern.
14
+
Passing parameters parameters to included patterns are a **simple** mechanism for replacing variables in an included pattern, by each of the standard ways of how to do it either in handlebars ([Partial Parameters](https://handlebarsjs.com/guide/partials.html#partial-parameters)) or twig ([include with `with` keyword](https://twig.symfony.com/doc/3.x/tags/include.html#:~:text=You%20can%20add%20additional%20variables%20by%20passing%20them%20after%20the%20with%20keyword%3A)) template language. They are limited to replacing variables in the included pattern and **only** the included pattern. They are especially useful when including a single pattern multiple times in a molecule, template, or page and you want to supply unique data to that pattern each time it's included.
0 commit comments