Per la gestione della pattern library (e più in generale per la raccolta della documentazione dell’intero Design System) utilizziamo Fractal.
Su Bitbucket è disponibile un boilerplate Tangible che comprende un’installazione di Fractal 1.0 e il collegamento al tema di Fractal personalizzato Tangible.
In Fractal come linguaggio di templating utilizziamo Handlebars.
npm-install
guadare questa pagina.Spesso potrebbe bastare rimuovere la cartella `node_modules` e reinstallare con `npm-install`
Come istanziare un componente nel config.json
Nel file json:
"context": {
"items": [
{
"componentName": "\\@my-component"
}
]
}
Nel file .hbs
{{#each items}}
{{render componentName }}
{{/each}}
Come istanziare un componente tramite @partial-block
Nel file .hbs del “componente principale”
<div class=“c-main-component”> {{#> @partial-block }} <h1>Bla bla bla</h1> <h2>Lorem ipsum</h2> <p>Here goes some text</p> {{/ @partial-block }} </div>
Nella pagina/componente che chiamerà il “componente principale”
{{#> @componentName foo }} <h1>Title</h1> <h2>Subtitle</h2> <p>This is the description</p> {{/@componentName}}
Questo approccio risulta molto utile in casi in cui si voglia poter scrivere all’interno di un componente qualsiasi tipo di contenuto preservando la modularità di esso.
Per capire a pieno il concetto, si noti l’esempio di “componente principale” qui e la sua applicazione in pagina qui.

Modificato da ila 08/11/2019 - 10:39