Layout

Det er muligt at styre placeringen af alle funktionerne i og omkring kortet via layout-objektet i map-konfigurationen. layout fordeler kontroller i navngivne slots (paneler), der kan placeres til venstre, højre, over eller under kortet — eller flyde oven på det. På mobile enheder skifter layoutet automatisk til en bundmenu. Se eksempel her.

"layout": {
  "appMode": true,
  "appBreakpoint": 820,
  "slots": {
    "left": {
      "header": "Søgning",
      "icon": "search",
      "controls": ["search"],
      "activateButton": { "icon": "search", "title": "Søg" }
    }
  }
}

Options

defaultSlot

• Type: string
• Default: "left"

Fallback-slot, der bruges, når en kontrol beder om et ukendt slot-navn. Gyldige værdier: "left", "right", "top", "bottom", "float-left", "float-right", "float-top", "float-bottom".

appMode

• Type: boolean
• Default: true

Når true (standard) skifter layoutet til en bundmenu på touch-enheder. Sæt til false for altid at bruge desktop-panellayoutet.

appBreakpoint

• Type: number
• Default: 1024

Viewport-bredde (px), under hvilken app-tilstand aktiveres uanset touch-detektion.

leftWidth

• Type: string | number

CSS-bredde på venstre panel, f.eks. "320px". Styrer størrelsen på de fastgjorte paneler globalt. Individuelle slots kan tilsidesætte med width.

rightWidth

• Type: string | number

CSS-bredde på højre panel. Styrer størrelsen på de fastgjorte paneler globalt. Individuelle slots kan tilsidesætte med width.

topHeight

• Type: string | number

CSS-højde på toppen panel. Styrer størrelsen på de fastgjorte paneler globalt. Individuelle slots kan tilsidesætte med height.

bottomHeight

• Type: string | number

CSS-højde på bundpanelet. Styrer størrelsen på de fastgjorte paneler globalt. Individuelle slots kan tilsidesætte med height.

slots

En slot er et navngivet panel, der kan indeholde en eller flere kontroller. De gyldige slot-navne er:

Slot	Placering
left	Fastgjort til venstre for kortet
right	Fastgjort til højre for kortet
top	Fastgjort over kortet
bottom	Fastgjort under kortet
float-left	Flyder oven på kortet, venstre side
float-right	Flyder oven på kortet, højre side
float-top	Flyder oven på kortet, øverst
float-bottom	Flyder oven på kortet, nederst

Slot-konfigurationen angives under slots med slot-navnet som nøgle:

"slots": {
  "left": {
    "controls": [
      "search"
    ]
  },
  "right": {
    "tabs": [
      {
        "label": "Kortlag",
        "controls": [
          "layerswitch"
        ]
      }
    ]
  }
}

Slots options

header

• Type: string

Tekst vist i panelets overskriftsbjælke. Når header er angivet (eller når icon er konfigureret på slotten), vises en topbjælke med tekst, ikon og en luk-knap. Udelad header (og icon) for et rent panel uden overskrift. Hvis header ikke er angivet, bruges label som overskriftstekst.

icon

• Type: string

Google Material Icons-symbolnavn vist i overskriften og i bundmenuns navigationsknap, f.eks. "search", "layers", "tune".

float

• Type: boolean
• Default: false

Gør panelet til et overlay oven på kortet i stedet for at placere det ved siden af kortet i et grid-layout. Kombiner med position for at styre placeringen.

position

• Type: string
• Eksempler: "center", "left", "right"

Vandret/lodret placering af et flydende panel. Tilføjer CSS-klassen sw-slot-position-{value} til panelet. Kræver at float: true er sat.

"top": {
  "float": true,
  "position": "center",
  "controls": ["search"]
}

expanded

• Type: boolean
• Default: false

Bestemmer om panelet starter åbent, når det har en activateButton. Ignoreres, hvis der ikke er nogen activateButton.

controls

• Type: string[]

ID'er på de kontroller, der skal vises fladt i panelets krop. Brug tabs i stedet, hvis du ønsker et fanebaseret layout.

width

• Type: string | number

CSS-bredde-tilsidesættelse for dette panel — tilsidesætter den globale leftWidth/rightWidth.

height

• Type: string | number

CSS-højde-tilsidesættelse for dette panel — tilsidesætter den globale topHeight/bottomHeight.

tabs

• Type: array

Fanebaseret layout: flere faner, der hver har sine egne kontroller. Kan ikke kombineres med controls på samme slot.

"right": {
  "tabs": [
    { "label": "Kortlag", "icon": "stacks", "controls": ["layerswitch"] },
    { "label": "Filter",  "icon": "tune",   "controls": ["filter"] }
  ]
}

Hver fane har følgende egenskaber:

label

• Type: string

Tekst vist på faneknappen.

icon

• Type: string

Google Material Icons-symbolnavn vist på faneknappen.

controls

• Type: string[] (påkrævet)

ID'er på de kontroller, der renderes inde i fanen. Rækkefølgen bestemmer visningsrækkefølgen.

active

• Type: boolean
• Default: false

Angiver om denne fane er den aktive standardfane. Hvis ikke angivet, er den første fane aktiv.

activateButton

• Type: object

Tilføjer en kortknap, der åbner og lukker panelet. Knappen placeres i kortets knapbjælke.

"activateButton": {
  "icon": "child_care",
  "title": "Folkeskoler",
  "index": 10
}

activateButton.icon

• Type: string

Google Material Icons-symbolnavn vist på knappen.

activateButton.title

• Type: string

Tooltip og aria-label for knappen.

activateButton.className

• Type: string

Ekstra CSS-klasse(r) tilføjet til knap-elementet.

activateButton.html

• Type: string

Rå HTML til knappens indhold. Bruges i stedet for icon, når intet ikon er angivet.

activateButton.index

• Type: number

Sorteringsorden for knappen i kortets knapbjælke. Lavere tal vises først.