Skip to content

Commit 4e6f8c5

Browse files
authored
Merge pull request #76 from cossssmin/master
docs: update readme.md
2 parents 7b4db25 + 517d096 commit 4e6f8c5

File tree

1 file changed

+100
-0
lines changed

1 file changed

+100
-0
lines changed

README.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,35 @@ else
173173
p Foo is probably just foo in the end.
174174
```
175175

176+
#### `conditionalTags`
177+
178+
Type: `array`\
179+
Default: `['if', 'elseif', 'else']`
180+
181+
You can define custom tag names to use for creating a conditional.
182+
183+
Example:
184+
185+
```js
186+
conditionalTags: ['when', 'elsewhen', 'otherwise']
187+
```
188+
189+
```html
190+
<when condition="foo === 'bar'">
191+
<p>Foo really is bar! Revolutionary!</p>
192+
</when>
193+
194+
<elsewhen condition="foo === 'wow'">
195+
<p>Foo is wow, oh man.</p>
196+
</elsewhen>
197+
198+
<otherwise>
199+
<p>Foo is probably just foo in the end.</p>
200+
</otherwise>
201+
```
202+
203+
Note: tag names must be in the exact order as the default ones.
204+
176205
### Switch statement
177206

178207
Switch statements act like streamline conditionals. They are useful for when you want to compare a single variable against a series of constants.
@@ -201,6 +230,35 @@ locals: { foo: 'foo' }
201230

202231
Anything in the `expression` attribute is evaluated directly as an expressions.
203232

233+
#### `switchTags`
234+
235+
Type: `array`\
236+
Default: `['switch', 'case', 'default']`
237+
238+
You can define custom tag names to use when creating a switch.
239+
240+
Example:
241+
242+
```js
243+
switchTags: ['clause', 'when', 'fallback']
244+
```
245+
246+
```html
247+
<clause expression="foo">
248+
<when n="'bar'">
249+
<p>Foo really is bar! Revolutionary!</p>
250+
</when>
251+
<when n="'wow'">
252+
<p>Foo is wow, oh man.</p>
253+
</when>
254+
<fallback>
255+
<p>Foo is probably just foo in the end.</p>
256+
</fallback>
257+
</clause>
258+
```
259+
260+
Note: tag names must be in the exact order as the default ones.
261+
204262
### Loops
205263

206264
You can use the `each` tag to build loops. It works with both arrays and objects. For example:
@@ -246,6 +304,27 @@ The value of the `loop` attribute is not a pure expressions evaluation, and it d
246304

247305
So you don't need to declare all the available variables (in this case, the index is skipped), and the expressions after `in` doesn't need to be a local variable, it can be any expressions.
248306

307+
#### `loopTags`
308+
309+
Type: `array`\
310+
Default: `['each']`
311+
312+
You can define custom tag names to use for creating loops:
313+
314+
Example:
315+
316+
```js
317+
loopTags: ['each', 'for']
318+
```
319+
320+
You can now also use the `<for>` tag when writing a loop:
321+
322+
```html
323+
<for loop="item in [1,2,3]">
324+
<p>{{ item }}</p>
325+
</for>
326+
```
327+
249328
#### Loop meta
250329

251330
Inside a loop, you have access to a special `loop` object, which contains information about the loop currently being executed:
@@ -297,6 +376,27 @@ locals: {
297376
</div>
298377
```
299378

379+
#### `scopeTags`
380+
381+
Type: `array`\
382+
Default: `['scope']`
383+
384+
You can define a custom tag name to use for creating scopes:
385+
386+
Example:
387+
388+
```js
389+
scopeTags: ['context']
390+
```
391+
392+
You can now also use the `<context>` tag when writing a scope:
393+
394+
```html
395+
<context with="author">
396+
<include src="components/profile.html"></include>
397+
</context>
398+
```
399+
300400
### Ignored tag
301401

302402
Anything inside this tag will not be parsed, allowing you to output delimiters and anything the plugin would normally parse, in their original form.

0 commit comments

Comments
 (0)