Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0b2167a
commit 49d1777
Showing
1 changed file
with
25 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,51 @@ | ||
| # Abe block each | ||
| # Type _each_ | ||
|
|
||
| > group elements | ||
| > Group elements. | ||
| ###Basic example | ||
| ## Basic example | ||
|
|
||
| ```html | ||
| {{#each myblock}} | ||
| <div> | ||
| {{abe type='text' key='myblock.text' desc='text item of the block'}} | ||
| </div> | ||
| <img src="{{abe type='image' key='myblock.image' desc='image item of the block'}}" /> | ||
|
|
||
| <button> | ||
| {{abe type='text' key='button' desc='this button label is not part of this each statement'}} | ||
| </button> | ||
| <div> | ||
| {{abe type='text' key='myblock.text' desc='text item of the block'}} | ||
| </div> | ||
| <img src="{{abe type='image' key='myblock.image' desc='image item of the block'}}" /> | ||
| <button> | ||
| {{abe type='text' key='button' desc='this button label is not part of this each statement'}} | ||
| </button> | ||
| {{/each}} | ||
| ``` | ||
|
|
||
| *Result :* | ||
| *Result:* | ||
|
|
||
|  | ||
|
|
||
| We have now a block each myblock that can be repeated as many time as we want with the '+' icon | ||
| We have now a block each myblock that can be repeated as many time as we want with the '+' icon. | ||
|
|
||
| Notice that since the <button> doesn't have ```key='myblock.button'``` but instead ```key='button'``` it won't be part of the each statement | ||
| Notice that since the `<button>` doesn't have `key='myblock.button'` but instead `key='button'` it won't be part of the each statement. | ||
|
|
||
| When the input button will have some content, any item each from myblock will have the same text for the element button | ||
| When the input button will have some content, any item each from `myblock` will have the same text for the element button. | ||
|
|
||
| Use case : | ||
| Use case: | ||
|
|
||
| Each statement are usefull for exemple for Carousel, list of element with un unknow number of item etc ... | ||
| Each statement are usefull for exemple for Carousel, list of element with un unknow number of item, etc. | ||
|
|
||
|
|
||
| ###Grouped element | ||
| ## Grouped element | ||
|
|
||
| Sometime we want to have a group of element but not inside of each statement because this group won't be repeated. | ||
|
|
||
| To do that, just use the same syntaxe as each block element but without wrapping them inside {{#each}} ... {{/each}} tag | ||
| To do that, just use the same syntaxe as each block element but without wrapping them inside `{{#each}} ... {{/each}}` tag: | ||
|
|
||
| ```html | ||
| <div> | ||
| {{abe type='text' key='myblock.text' groupdesc='description for my group' desc='text item of the block'}} | ||
| </div> | ||
| <img src="{{abe type='image' key='myblock.image' groupdesc='description for my group' desc='image item of the block'}}" /> | ||
| <div> | ||
| {{abe type='text' key='myblock.text' groupdesc='description for my group' desc='text item of the block'}} | ||
| </div> | ||
| <img src="{{abe type='image' key='myblock.image' groupdesc='description for my group' desc='image item of the block'}}" /> | ||
| ``` | ||
|
|
||
| Notice groupdesc attribut that is use to write a description for our single grouped element | ||
| Notice `groupdesc` attribut that is use to write a description for our single grouped element. | ||
|
|
||
| *Result :* | ||
| *Result:* | ||
|
|
||
|  | ||
|  |