Container-Widget

Mit Container-Widgets können Sie Bereiche definieren, die Widgets enthalten. Diese Container haben die unterschiedlichsten Abbildungen, in denen Sie die Widgets positionieren.

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' // Standard: none

border (Boolean)

Wert	Beschreibung
true	Erzwingt die Darstellung eines Rahmens um das Widget (sofern unterstützt).
false	Unterdrückt die Darstellung eines Rahmens um das Widget (sofern unterstützt).

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.

 

items (Array)

Enthält weitere Widgets (Standard: []).

Gilt nicht für agorum.border.

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.

• top
• right
• bottom
• left

title (String, übersetzbar)

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

Funktionen

---

keine

Beispiel für docked

---

 

 

module.exports = {
  type: 'agorum.border',
  width: 600,
  height: 400,
  docked: {
    top: {
      type: 'agorum.toolBar',
      items: [
        {
          type: 'agorum.button',
          text: 't'
        }
      ]
    },
    bottom: {
      type: 'agorum.toolBar',
      items: [
        {
          type: 'agorum.button',
          text: 'b'
        }
      ]
    },
    left: {
      type: 'agorum.toolBar',
      items: [
        {
          type: 'agorum.button',
          text: 'l'
        }
      ]
    },
    right: {
      type: 'agorum.toolBar',
      items: [
        {
          type: 'agorum.button',
          text: 'r'
        }
      ]
    },
    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
    }
  }
};