agorum.border

Das agorum.border-Layout stellt ein zentrales Element (immer vorhanden, center) und bis zu vier optionale Rand-Elemente (north, south, west, east) dar, die Sie einzeln in ihrer Größe verändern und sogar wegklappen können.

Die Randelemente einzeln sind in ihrer Höhe (north / south) und Breite (west / east) statisch. Das System gibt eventuelle Größenänderungen von außen direkt an das center-Element weiter.

Das Beispiel in dieser Dokumentation verdeutlicht die Aufteilung in die fünf Regionen.

Sie verwenden das border-Layout typischerweise an oberster Ebene einer Widget-Struktur, um die Darstellung in den Hauptinhalt (center) und zusätzliche Informationen / Bedienelemente zu gliedern.

Im Gegensatz zu den anderen Layout-Arten deklarieren Sie die Elemente des border-Layouts nicht per items, sondern ausschließlich per docked.

Events für agorum.border

Event	Beschreibung
collapsed	Nur bei Border-Layout, wenn etwas eingeklappt wurde (Parameter collapsible muss auf true stehen).
expanded	Nur bei Border-Layout, wenn etwas ausgeklappt wurde (Parameter collapsible muss auf true stehen).

Parameter

background (String)

Dieser Parameter kann folgende Werte annehmen:

• none
• dark
• light
• white
   

Beispiel

background: 'dark'

border (Boolean)

Wert	Beschreibung
true	Erzwingt die Darstellung eines Rahmens um das Widget.
false	Unterdrückt die Darstellung eines Rahmens um das Widget.

collapsible (Boolean)

Wert	Beschreibung
true	Bereich/ Widget ist ein- und ausklappbar. Es erscheint ein kleiner Pfeil zum Ein-/Ausklappen.
false (Standard)	Bereich/ Widget ist NICHT ein- und ausklappbar.

collapsed (Boolean)

Wert	Beschreibung
true	Bereich/ Widget ist eingeklappt.
false (Standard)	Bereich/ Widget ist ausgeklappt.

docked

Definiert zu einem Container zusätzliche Regionen, die das System am Rand des Containers platziert. Sie können pro Region ein weiteres Widget platzieren.

• center (Pflicht)
• north
• east
• south
• west

title (String, übersetzbar)

Erscheint als Überschrift über dem Widget, typischerweise für Container-Widgets.

Funktionen

keine

Beispiel

 

module.exports = {
  type: 'agorum.border',
  width: 600,
  height: 400,
  docked: {
    center: {
      type: 'agorum.textArea',
      text: 'center'
    },
    north: {
      type: 'agorum.textArea',
      text: 'north',
      height: 100
    },
    south: {
      type: 'agorum.textArea',
      text: 'south',
      height: 100
    },
    west: {
      type: 'agorum.textArea',
      text: 'west',
      width: 100
    },
    east: {
      type: 'agorum.textArea',
      text: 'east',
      width: 100
    }
  }
};