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