Vad är det här?
Här samlar vi demo-komponenter som används i Komponentbibliotek.
JSFiddle är en extern tjänst som används för att skapa demo sidorna.
Observera |
---|
Sidorna inkluderas med Include Page macrot under respektive varumärkes komponentbibliotek. Observer att om sidordning eller namn på undersidorna här så kan länken brytas och demon visas inte längre. Om det händer gå in på sidan i komponentbiblioteket och sök fram sidan i Include Page redigeringen på nytt. |
Gör så här
Skapa ett konto på jsfiddle.net
Skapa en fork (kopia) från https://jsfiddle.net/bergsvik/w5t3fc87/
Uppdatera namn på din Fiddle under Fiddle Meta spara och klicka på Set as base så att den senaste versionen går att komma åt utan att ange versionsnummer.
I Confluense gå in på sidan Boilerplate och klicka på Copy för att duplicera sidan. Döp om sidan.
Öppna iframe macro och uppdatera Lägg in iframe macrot och uppdatera fyll i URL med rätt ID från jsfiddle.net komponenten så .
Exempelvis: om URL till JSFiddle är https://jsfiddle.net/bergsvik/w5t3fc87/ blir inbäddningslänken //jsfiddle.net/w5t3fc87/embedded/result,html,resources/ anpassa delen med result,html,resources om du exempelvis vill inkludera css eller js (JavaScript).Ta sidans ID från Confluense och lägg in i JSFiddle som hänvisning. Exempelvis i beskrivningen under Fiddle Meta. Lägg gärna med hela länken till Confluense sidan i kod-exemplets kommentar. Använd denna mall för kommentaren<!--
Link:
https://inera.atlassian.net/wiki/spaces/USI/pages/CONFLUENCE_PAGE_ID/DNA: HTML|2c4ce95d-7bb0-43bb-a3e1-d4371522949d
-->
Använd macront Include Page för att länka in JSFiddle sidan på komponenten (komponenternas) sidor för de olika varumärkena.
- Komponentbibliotek Inera
Använd eventuellt macrot Include Page för att länka in jsFiddle sidan på komponenten (komponenternas) sidor för de olika varumärkena. Eller bädda in iframe direkt på komponenten.
Länka CSS
Om du vill lägga in temaväljaren i jsFiddle för att växla mellan produktions-css på de olika sajterna så lägger du in denna länk under Resources: https://cdn.jsdelivr.net/gh/berra/loadstylesheet@master/css_theme_loader.js
För att koppla en JsFiddle till en stylesheet så lägg in denna kod under javascript fliken.
Kodblock | ||
---|---|---|
| ||
window.useStylesheet = "inera"; |
Lägga till ny sajt/tema
När vi behöver lägga till ett nytt tema till exemplen globalt så görs det i css_theme_loader på inera-core-css repot i listan som heter cssList. Objektets nyckel är det som används tillsammans med useStylesheet från jsfiddle.
Kodblock | ||
---|---|---|
| ||
umo: {
name: "umo",
path: "https://www.umo.se/build/umo/static/stylesheets/app.css",
preload: "https://www.umo.se/build/umo/static/stylesheets/preload.css",
}, |
Resurser
På Bitbucket finns resurser dels css_theme_loader.js men också några andra statiska resurser som vi inte kommer åt antingen pga. cors problem (font ikoner 1177) eller att resurserna kräver auktorisering (css på rgswebb). Behöver du redigera något eller vill komplettera med resurser så skapa en pull request till inera-core-css repot.
För att leverera resurserna med rätt mimetype till jsfiddle använder vi https://raw.githack.com/ som är en gratis cdn tjänst som kan leverera statiska resurser från BitBucket.
Ladda in övriga typsnitt
Vi har font-resurser tillgängliga på Bitbucket under projektet gemensam-css. Vi kan därför använda dessa resurser genom tjänsten githack.
Inter UI:
https://bb.githack.com/ineraservices/css-gemensamt/raw/develop/static/fonts/interui/inter-ui.cssOpen sans:
https://bb.githack.com/ineraservices/css-gemensamt/raw/develop/static/fonts/open-sans/open-sans.css
Komponenter
Underordnade sidor (visning av underordnade) |
---|