@forsakringskassan/docs-live-example

live-example är en Vue-komponent som används för att presentera ett levande exempel samt tillhörande markup för att reproducera exemplet.

Komponenten består av tre ytor:

- exempelyta: innehåller det kompilerade exemplet.
- kontrollyta: innehåller de inmatningsfält som används för att konfigurera exemplet.
- kodyta: visar HTML-markup och Vue-template för exemplet (om Vue-komponenter används).

Eftersom live-example kompileras i runtime så kan man direkt modifiera exemplet och den markup som visas genom att använda de inmatningsfält som lagts till i kontrollytan.

Användning

Installera paketet genom att köra:

npm install --save-dev @forsakringskassan/docs-live-example

Om du använder html-validate bör du även uppdatera din .htmlvalidate.json med följande rader för att registrera live-example elementet:

``json
"extends": [
"@forsakringskassan/docs-live-example/htmlvalidate:recommended",
],
"plugins": [
"@forsakringskassan/docs-live-example/htmlvalidate"
],
`

$3

#### template

För att generera ett exempel så används template för att skicka in markup.

#### components (optional)

De Vue-komponenter som används i markup som skickas in till template måste läggas till i components.

#### livedata (optional)

Om exemplet behöver spara ett värde (till exempel v-model) så skickas detta in genom livedata.

#### livemethods (optional)

Om exemplet behöver köra en metod så skickas detta in genom livemethods.

#### forceSingleColumn (optional)

Om exemplets exempelyta hindras av kontrollytan i den högra kolumnen går det att ange forceSingleColumn för att forcera exemplet att visas i en kolumn.

$3

För att skapa ett konfigurerbart exempel börjar vi med att skapa en ny komponent AwesomeComponentLiveExample.vue.
Vi rekommenderar att använda LiveExample som suffix på alla live-exempel.

Följande boilerplate kan användas:

`vue static



`

För att skapa en inställning lägger vi först in komponenter:

`diff

+
+
+ div
+ p
+ em
+
+
+ Use placeholder text
+

`

`diff
data() {
- return {};
+ return {
+ tagName: "div",
+ placeholderText: false,
+ };
},
`

Därefter kan vi modifiera template att nyttja inställningar:

`diff
template(): string {
- return / HTML /

;
+ const { tagName, placeholderText } = this;
+ const message = placeholderText ? "Lorem ipsum dolor sit amet" : "Hello World!" ;
+ return / HTML / <${tagName}>${message} ;
},
`

Det går också med fördel att använda createElement (se beskrivning längre ner):

`diff
template(): string {
- return / HTML /

;
+ const { tagName, placeholderText } = this;
+ const message = placeholderText ? "Lorem ipsum dolor sit amet" : "Hello World!" ;
+ return createElement(tagName, message);
},
`

Resultatet:

`vue live-example



`

createElement

A helper function to render the markup for the live example.

`ts
createElement(tagName);
createElement(tagName, content);
createElement(tagName, attributes);
createElement(tagName, attributes, content);
`

Create markup for a simple element:

`ts
createElement("div");
//