Søg i Septima Widget K

Swipe ​

Sammenlign to lag i kortet vha. "Swipe" funktionen.

Options ​

Herunder findes en beskrivelse af de enkelte egenskaber, der kan sættes på funktionen.

disable ​

  • Type: boolean
  • Default: false

Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol.

css ​

  • Type: string | string[]

Angiv en sti til en css-fil, der skal loades efter denne kontrol. Herved vil det være muligt at lave en brugertilpasset style af kontrollen.

className ​

  • Type: string

Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden.

translations ​

  • Type: object

Det er muligt at styre alle tekster i Septima Widget. Det gøres på de enkelte komponenter vha. et translations objekt. Det er muligt blot at overskrive en enkelt tekst eller angive et helt nyt sprog. Herunder ses hvilke teskter, der er default for denne komponent.

Vis tekster
json
{
  "da-DK": {
    "search": "Søg",
    "close": "Luk",
    "noresults": "Ingen resultater",
    "matches": "matcher",
    "dodetails": "Se detaljer"
  },
  "en-US": {
    "search": "Search",
    "close": "Close",
    "noresults": "No results",
    "matches": "matches",
    "dodetails": "Show details"
  }
}

activateButton ​

  • Type: object

Skjul baggrundskortvælgeren fra start men gør det muligt for brugeren vise lagvælgeren vha. en knap i kortet. "activateButton" kan indeholde "title", "className" og "html", der alle er optionelle. De har alle en brugbar default værdi. "title" bruges til at angive en tekst, der vises når musen holdes over knappen (kan også angives vha. translations). "className" tilføjer en CSS-klasse til selve knappen. "html" erstatter indholdet af kanppen med det, der er angivet her. På denne måde er det muligt f.eks. at skifte ikon på knappen. Her er et eksempel på, hvordan "activateButton" kan angives:

json
"activateButton": {
  "title": "Vis baggrundskortvælger",
  "className": "my-style",
  "html": "<i class='mdi mdi-format-list-bulleted-type'></i>"
}

buttonIndex ​

  • Type: number
  • Default: 0

Hvis der er flere kompoenter med knapper i kortet, så bliver de tilføjet i en tilfældig rækkefølge. Ved at angive buttonIdex er det muligt at bestemme rækkefølgen. Laveste index kommer først. Hvis to knapper har samme index vil det være tilfældigt hvilken der kommer færst.

left ​

  • Type: string[]

Angiv en liste med id'er på udvalgte lag, der skal vises til venstre når lagene sammenlignes. Dette kræver, at der er angivet et id på alle lagene. Hvis der angives mere en ét lag, vil brugeren få mulighed for at skifte hvilket lag, der skal vises til venstre. Lagene kan angives på denne måde: ["lag1","lag2"].

Bemærk at ét og kun ét af de valgte lag skal have "visible": true.

  • Type: string[]

Angiv en liste med id'er på udvalgte lag, der skal vises til højre når lagene sammenlignes. Dette kræver, at der er angivet et id på alle lagene. Hvis der angives mere en ét lag, vil brugeren få mulighed for at skifte hvilket lag, der skal vises til venstre. Lagene kan angives på denne måde: ["lag3","lag4"].

Bemærk at ét og kun ét af de valgte lag skal have "visible": true.

position ​

  • Type: number
  • Default: 0.5

Angiv placeringe af bjælken, der kan trækkes i. 0 er helt til vesntre, mens 1 er helt til højre. Angiv et tal imellem 0 og 1.

orientation ​

  • Type: string
  • Default: vertical

Retningen på bjælken. Kan have værdien vertical eller horizontal.

Eksempler ​

Eksempler, der bruger denne komponent: