Gå til hovedinnhold
MALER

Portal B2B

beta
@entur/layout/beta
v3.4.2

Mal for B2B-portaler med valgfri statuslinje, sidefelt og hovedinnhold.

Oversikt

Template.Portal er en ferdig mal for B2B-portaler. Den gir en todelt layout med fast sidefelt til venstre og hovedinnhold til høyre, samt en valgfri statuslinje øverst. Malen dekker det typiske grunnoppsettet i Enturs B2B-produkter og er designet for å brukes sammen med SideNavigation fra @entur/menu.

Oppbygning

Template.Portal

Rotkomponenten lager et CSS-grid med to kolonner og full visningshøyde (100vh). Første kolonne er sidefeltet med bredde styrt av --eds-sidebar-width, andre kolonne fyller resten av tilgjengelig plass.

Template.Portal.StatusBar

Valgfri seksjon som spenner over hele bredden øverst i portalen, over både sidefelt og hovedinnhold. Brukes typisk til miljøindikator som viser om brukeren er i dev, staging eller produksjon.

Template.Portal.Sidebar

Vertikalt fleksområde som rendres som <aside> med kontrastfarge. Inneholder valgfrie seksjoner i rekkefølge:

  • Logo — Produktlogo, lenker typisk til startsiden.
  • User — Brukerindikator med innlogget bruker.
  • Data — Ev. miljøvelger og/eller datasettvelger.
  • Navigation — Hovednavigasjon, ment å brukes med SideNavigation.
  • Footer — Statisk støtteinformasjon nederst.

Template.Portal.Main

Hovedinnholdsområdet som rendres som <main>. Spenner fra andre kolonne til slutten av gridet og har konfigurerbar padding.

Når skal malen brukes?

Bruk Template.Portal i:

  • B2B-verktøy og produkter med sidebar-navigasjon
  • Løsninger med fast sidenavigasjon og skiftende hovedinnhold
  • Produkter som trenger miljøindikator, brukerinfo og/eller datasettvelger i sidefeltet

Unngå malen når:

  • Løsningen har få navigasjonselementer (færre enn 5) — vurder topbar i stedet
  • Siden er en enkel landingsside uten behov for persistent navigasjon

Installasjon

1# Installer den vanlige layout-pakken fra npm
2# _ikke_ @entur/layout/beta
3npm install @entur/layout

Importer komponenter og stiler

React

1import { Template } from '@entur/layout/beta';

CSS

1@import '@entur/layout/beta/styles';

Grunnleggende bruk

1<Template.Portal>
2  <Template.Portal.Sidebar>
3    <Template.Portal.Sidebar.Logo>
4      ENTUR Produktlogo
5    </Template.Portal.Sidebar.Logo>
6    <Template.Portal.Sidebar.Navigation>
7      {/* SideNavigation-komponent */}
8    </Template.Portal.Sidebar.Navigation>
9  </Template.Portal.Sidebar>
10  <Template.Portal.Main>
11    {/* Hovedinnhold */}
12  </Template.Portal.Main>
13</Template.Portal>

Tilpasse HTML-elementer

Bruk as-prop for å endre HTML-element på en hvilken som helst komponent:

1<Template.Portal.Main as="section">
2  {/* Rendres som <section> i stedet for <main> */}
3</Template.Portal.Main>

Komponenter

Template.Portal

Malen bygges opp av slot-komponenter som plasseres som barn av Template.Portal. Template.Portal skal ta hele skjermens størrelse, dvs. høyde på 100dvh og bredde 100dvw. Alle støtter as-prop for å endre HTML-element.

Template.Portal.Main

Hovedinnholdsområdet til høyre for sidefeltet. Har konfigurerbar padding via CSS-variabelen --eds-portal-main-padding. Rendres som <main>.

Template.Portal.Sidebar

Venstre sidefelt med kontrastfarge som inneholder navigasjon og støtteinformasjon. Har en contrast-prop (standard true) for å slå av/på kontrastbakgrunnen. Rendres som <aside>.

Template.Portal.Sidebar.Logo

Lenker typisk til startsiden.Produktlogo øverst i sidefeltet. Lenker typisk til startsiden.

Template.Portal.Sidebar.User

Viser informasjon om innlogget bruker.

Template.Portal.Sidebar.Data

Plass til datasettvelger eller annen kontekstvelger.

Template.Portal.Sidebar.Navigation

Hovednavigasjonen i sidefeltet. Fyller tilgjengelig plass mellom de andre seksjonene. Rendres som <nav>.

Template.Portal.Sidebar.Footer

Statisk innhold nederst i sidefeltet, f.eks. støttelenker eller versjonsinfo. Rendres som <footer>.

Template.Portal.Statusbar

Valgfri linje som spenner over hele bredden øverst i portalen. Brukes typisk til miljøindikator (dev/staging/prod).

Tilgjengelighet

Malen bruker semantiske HTML-elementer som standard for å sikre god tilgjengelighet:

  • Sidefeltet rendres som <aside> (landmark-rolle complementary)
  • Hovedinnhold rendres som <main> (landmark-rolle main)
  • Navigasjon rendres som <nav> (landmark-rolle navigation)
  • Footer rendres som <footer> (landmark-rolle contentinfo)

Disse elementene gir skjermlesere og andre hjelpeteknologier tydelige landemerker for navigering.Tilgjengelighet

Malen bruker semantiske HTML-elementer som standard for å sikre god tilgjengelighet:

  • Sidefeltet rendres som <aside> (landmark-rolle complementary)
  • Hovedinnhold rendres som <main> (landmark-rolle main)
  • Navigasjon rendres som <nav> (landmark-rolle navigation)
  • Footer rendres som <footer> (landmark-rolle contentinfo)

Disse elementene gir skjermlesere og andre hjelpeteknologier tydelige landemerker for navigering.