Innehållsförteckning

Genom att märka upp h2:or på sidan kan man välja ut vilka rubriker som ska finnas med i innehållsförteckningen.

Innehållsförteckningen finns ej implementerad i designsystemet eftersom det inte finns någon högerspalt på den här webbplatsen.

Läs mer om komponenten

Välja ut h2:or

Markera en rubrik som har eller ska ha rubriknivå 2 och välj formatmallen "Innehållsförteckning". Rubriken får en svag kantlinje för att visa att den är utvald att visas i innehållsförteckningen. Kantlinjen visas bara i redaktörsläget.

Sätt upp funktionen på en annan webbplats

Steg 1 - Skapa en formatmall

Döp formatmallen till "Innehållsförteckning"
Ge formatmallen samma egenskaper som formatmallen för primär h2. Länkfärger, storlek osv.
Lägg till en css-regel som gör att alla h2:or med vår nya formatmallen får en outline, men bara när man är i redaktörsläge "sv-editing-mode"


.sv-editing-mode .sv-font-innehallsforteckning {
   outline: 8px solid rgba(13, 33, 114, 0.4);
}

Steg 2 - Dekoration för mittenspalt

För att appen ska kunna vara sticky i desktop måste den högra spalten ha samma höjd som mittenspalten. Appen räknar ut höjden genom att hämta ut DOM-elementet för mittspalten.

Skapa en css-regel och fäst den på spalten för mittenspalten. Detta klassnamn kommer senare att användas i ett fritextfält i appens globala inställningar.

Steg 3 - Globala inställningar

Välj formatmallen "Innehållsföteckning" som du skapade tidigare
Välj vilken formatmall länkarna ska ha
Skriv i klassnamnet för css-regeln som är fäst på mittenspalt som du skapade tidigare
Skriv i klassnamnet för dekorationen "Extra viktig information". Dekorationen "Extra viktig information" finns ej implenterad på alla webbplaster. Lämna detta fält tomt om så är fallet.

Steg 4 - Placera ut appen

Appen behöver läggas till på 2 ställen

Desktop

Lägg till en instans av appen i högerspalten.
Öppna inställningarna och välj "Desktop" i inställningen "Välj vilket läge appen ska användas i"
Öppna egenskaper för modulen och välj att dölja modulen i brytpunkterna för telefon och surfplatta under "Responsiv webb"

Mobil

Lägg till en instans av appen i innehållsytan "Mittenspalt" efter textmodulen för rubrik.
Nåla fast modulen.
Öppna inställningarna och välj "Mobil" i inställningen "Välj vilket läge appen ska användas i"
Öppna egenskaper för modulen och välj att endast visa modulen i brytpunkterna för telefon och surfplatta under "Responsiv webb"