Prosessveiviser

Prosessveiviser for ? vise enkle, trinnvise prosesser horisontalt eller vertikalt.

Hvis du skal visualisere enkle, trinnvise prosesser, kan du bruke denne komponenten. Legg til class="steps-guide" over punktliste, se koden nedenfor.

For ? f? vertikal visning, m? du legge til -vertical p? komponentkoden. Innholdet i boksen er tittel med lenke og eventuelt en ledetekst/br?dtekst i tillegg. Default er en lenke p? hele boksen, men du kan ogs? ha en lenke p? tittel og en i br?dteksten ved ? legge p? innstillingen "no-box-link".

For ? markere aktiv steg hvis du ogs? skal vise den p? sidene i stegene, kan du legge til class="steps-guide-active" p? <li>-en som er aktiv.

Kode for prosessveiviser-komponenten

Komponenten kan b?de brukes horisontalt og vertikalt. Den kan ha lenke p? hele boksen, eller kun p? tittellenke og lenke i br?dtekst i boksen. Se eksempler p? de ulike versjonene nedenfor.

Horisontal: steps-guide (med undertekst)

  • F?r du s?ker
    • Husk ? sjekke om du faktisk kan noe om forskning. Har du de riktige papirene?
  • S?knad
    • En annen tekst her, den er kanskje litt kortere, hvem vet?
  • Kontrakt og oppstart
    • En annen tekst her, den er kanskje litt kortere, hvem vet?
  • Gjennomf?ring
    • En annen tekst her, den er kanskje litt kortere, hvem vet?
<ul class="steps-guide">
<li><a href="/">F?r du s?ker</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om forskning. Har du de riktige papirene?</li></ul>
</li>
<li><a href="/">S?knad</a>
<ul><li>En annen tekst her, den er kanskje litt kortere, hvem vet?</li></ul>
</li>
<li><a href="/">Kontrakt og oppstart</a>
<ul><li>En annen tekst her, den er kanskje litt kortere, hvem vet?</li></ul>
</li>
<li><a href="/">Gjennomf?ring</a>
<ul><li>En annen tekst her, den er kanskje litt kortere, hvem vet?</li></ul>
</li>
</ul>

Horisontal: steps-guide (uten undertekst)

<ul class="steps-guide">
<li><a href="/">F?r du s?ker</a></li>
<li><a href="/">S?knad</a></li>
<li><a href="/">Kontrakt og oppstart</a></li>
<li><a href="/">Gjennomf?ring</a></li>
</ul>

Fem bokser, kun for fullbreddesider (med undertekst)

Siden denne kun fungerer for fullbreddesider er eksempelet som vises nedenfor et skjermbilde av en fullbreddeside.

Eksempel p? prosessveiviseren i bruk for fullbreddesider. 

<ul class="steps-guide steps-guide-five-columns">
<li><a href="/">F?r du s?ker</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om forskning. Har du de riktige papirene?</li></ul>
</li>
<li><a href="/">S?knad</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om forskning.</li></ul>
</li>
<li><a href="/">Kontrakt og oppstart</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om forskning.</li></ul>
</li>
<li><a href="/">Gjennomf?ring</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om forskning.</li></ul>
</li>
<li><a href="/">Etterarbeid</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om forskning.</li></ul>
</li>
</ul>

Fem bokser, kun for fullbreddesider (uten undertekst)

Siden denne kun fungerer for fullbreddesider er eksempelet som vises nedenfor et skjermbilde av en fullbreddeside.

Eksempel p? prosessveiviseren i bruk for fullbreddesider. 

<ul class="steps-guide steps-guide-five-columns">
<li><a href="/">F?r du s?ker</a></li>
<li><a href="/">S?knad</a></li>
<li><a href="/">Kontrakt og oppstart</a></li>
<li><a href="/">Gjennomf?ring</a></li>
<li><a href="/">Etterarbeid</a></li>
</ul>

Vertikal: steps-guide-vertical (med undertekst)

  • F?r du s?ker
    • Husk ? sjekke om du faktisk kan noe om forskning. Har du de riktige papirene?
  • S?knad
    • Husk ? sjekke om du faktisk kan noe om forskning.
  • Kontrakt og oppstart
    • Husk ? sjekke om du faktisk kan noe om forskning.
  • Gjennomf?ring
    • Husk ? sjekke om du faktisk kan noe om forskning.
  • Etterarbeid
    • Husk ? sjekke om du faktisk kan noe om forskning.
<ul class="steps-guide-vertical">
<li><a href="/">F?r du s?ker</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om forskning. Har du de riktige papirene?</li>
</ul>
</li>
<li><a href="/">S?knad</a>
<ul><li>Husk ? sjekke om du&nbsp;faktisk kan noe om forskning.</li></ul>
</li>
<li><a href="/">Kontrakt og oppstart</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om&nbsp;forskning.</li></ul>
</li>
<li><a href="/">Gjennomf?ring</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om forskning.</li></ul>
</li>
<li><a href="/">Etterarbeid</a>
<ul><li>Husk ? sjekke om du faktisk kan noe om forskning.</li></ul>
</li>
</ul>

Vertikal: steps-guide-vertical (uten undertekst)

<ul class="steps-guide-vertical">
<li><a href="/">F?r du s?ker</a></li>
<li><a href="/">S?knad</a></li>
<li><a href="/">Kontrakt og&nbsp;oppstart</a></li>
<li><a href="/">Gjennomf?ring</a></li>
<li><a href="/">Etterarbeid</a></li>
</ul>

Uten lenke p? boksen: steps-guide-no-box-link (med undertekst)

  • F?r du s?ker
    • Husk ? sjekke om du faktisk kan noe om forskning. Har du de riktige papirene?
  • S?knad
    • En annen tekst her, den er kanskje litt kortere, hvem vet?
  • Kontrakt og oppstart
    • En annen tekst her, den er kanskje litt kortere, hvem vet?
  • Gjennomf?ring
    • En annen tekst her, den er kanskje litt kortere, hvem vet?
<ul class="steps-guide steps-guide-no-box-link">
<li><a href=".">F?r du s?ker</a>
<ul><li>Husk ? sjekke om du <a href=".">faktisk</a> kan noe om forskning. Har du de riktige papirene?</li></ul>
</li>
<li><a href=".">S?knad</a>
<ul><li>En annen tekst her, den er kanskje litt kortere, hvem vet?</li></ul>
</li><li><a href=".">Kontrakt og oppstart</a>
<ul><li>En annen tekst her, den er kanskje litt kortere, hvem vet?</li></ul>
</li>
<li><a href=".">Gjennomf?ring</a>
<ul><li>En annen tekst her, den er kanskje litt kortere, hvem vet?</li></ul>
</li>
</ul>

Uten lenke p? boksen: steps-guide-no-box-link (uten undertekst)

<ul class="steps-guide steps-guide-no-box-link">
<li><a href="/">F?r du s?ker</a></li>
<li><a href="/">S?knad</a></li>
<li><a href="/">Kontrakt og&nbsp;oppstart</a></li>
<li><a href="/">Gjennomf?ring</a></li>
<li><a href="/">Etterarbeid</a></li>
</ul>

Markér hvor du er i prosessen: steps-guide-active

Sett inn <li class="steps-guide-active"> p? det trinnet du vil ha markert.

  • F?r du s?ker
    • Husk ? sjekke om du faktisk kan noe om forskning. Har du de riktige papirene?
  • S?knad
    • En annen tekst her, den er kanskje litt kortere, hvem vet?
  • Kontrakt og oppstart
    • En annen tekst her, den er kanskje litt kortere, hvem vet?
  • Gjennomf?ring
    • En annen tekst her, den er kanskje litt kortere, hvem vet?

Beholde visualisering selv uten lenke p? trinn

En type bruk av prosessveiviseren kan kreve at ett eller flere trinn ikke skal ha lenke f?r etter et visst steg. Uten lenke vil ikke komponenten stile dine punkter slik du forventer.

L?sningen er ? legge til en <span> p? det aktuelle trinnet:

<ul class="steps-guide">
<li><a href="/">F?r du s?ker</a></li>
<li><a href="/">S?knad</a></li>
<li><span>Kontrakt og oppstart</span></li>
<li><span>Gjennomf?ring</span></li>
<li><span>Etterarbeid</span></li>
</ul>

Eksempler p? bruk med ulike sidebreddetyper

Publisert 14. nov. 2017 13:18 - Sist endret 23. okt. 2022 10:26
Del p? e-post