ui.SplitPanel
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Ein Widget mit zwei Feldern und einer Trennlinie dazwischen. Die Trennlinie kann gezogen werden, um die Größe der Bereiche anzupassen. Eines oder beide Felder können ui.Map-Objekte sein.
Standardmäßig wird das Layout mit einer Aufteilung von 50/50 initialisiert. Die Stile „width“ und „maxWidth“/„minWidth“ für die Bereiche steuern die Aufteilungsgröße für horizontale Ausrichtungen. Verwenden Sie für vertikale Elemente entsprechend „height“ (Höhe) und „max/minHeight“ (maximale/minimale Höhe). Sie können in Pixeln als „{n}px“ oder als Prozentsatz des enthaltenden SplitPanel als „{n}%“ angegeben werden.
Die angegebene Größe für das zweite Feld wird ignoriert, wenn die Größe des ersten Felds angegeben ist, da die Gesamtbreite des geteilten Felds unabhängig gesteuert wird. Für beide Bereiche können maximale und minimale Größen festgelegt werden.
| Nutzung | Ausgabe |
|---|
ui.SplitPanel(firstPanel, secondPanel, orientation, wipe, style) | ui.SplitPanel |
| Argument | Typ | Details |
|---|
firstPanel | ui.Panel, optional | Der linke oder obere Bereich. Standardmäßig wird eine neue Instanz von ui.Panel verwendet. |
secondPanel | ui.Panel, optional | Das untere oder rechte Feld. Standardmäßig wird eine neue Instanz von ui.Panel verwendet. |
orientation | String, optional | Entweder „horizontal“ oder „vertical“. Die Standardeinstellung ist „horizontal“. |
wipe | Boolesch, optional | Gibt an, ob der Wischeffekt aktiviert werden soll. Wenn dieser Modus aktiviert ist, nehmen beide Bereiche den gesamten verfügbaren Platz ein. Durch Ziehen der Trennlinie wird nicht die Größe der Bereiche festgelegt, sondern bestimmt, wie viel von jedem Bereich angezeigt wird. Dieser Effekt ist analog zu einem „Wipe-Übergang“. Dieser Modus ist nützlich, um zwei Karten zu vergleichen. Die Standardeinstellung ist "false". |
style | Objekt, optional | Ein Objekt mit zulässigen CSS-Stilen und den zugehörigen Werten, die für dieses Steuerfeld festgelegt werden sollen. Die Standardeinstellung ist ein leeres Objekt. |
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-07-26 (UTC).
[null,null,["Zuletzt aktualisiert: 2025-07-26 (UTC)."],[[["\u003cp\u003eThe \u003ccode\u003eui.SplitPanel\u003c/code\u003e widget divides a UI element into two resizable panels, horizontally or vertically.\u003c/p\u003e\n"],["\u003cp\u003ePanel sizes can be customized using width/height and min/max dimensions, expressed in pixels or percentages.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003ewipe\u003c/code\u003e option allows for a transition-like effect, ideal for comparing two map panels by overlaying them.\u003c/p\u003e\n"],["\u003cp\u003eThe split panel's default layout divides the space equally between the two panels.\u003c/p\u003e\n"],["\u003cp\u003eUsers can specify custom CSS styles to further customize the appearance of the \u003ccode\u003eui.SplitPanel\u003c/code\u003e.\u003c/p\u003e\n"]]],[],null,["# ui.SplitPanel\n\n\u003cbr /\u003e\n\nA widget containing two panels with a divider between them. The divider can be dragged, allowing the panels to be resized. One or both panels may be ui.Map objects.\n\n\u003cbr /\u003e\n\nBy default the layout initializes with a 50/50 split. The width and max/minWidth styles on the panels control the split sizing for horizontal orientations. Similarly, use height and max/minHeight for vertical. These can be given in pixels as '{n}px' or as a percentage of the containing SplitPanel as '{n}%'.\n\nNote that the given size for the second panel will be ignored if the first panel size is specified, since the overall width of the split panel is controlled independently. Max/min sizes may be set for both panels.\n\n| Usage | Returns |\n|--------------------------------------------------------------------------------------------|---------------|\n| `ui.SplitPanel(`*firstPanel* `, `*secondPanel* `, `*orientation* `, `*wipe* `, `*style*`)` | ui.SplitPanel |\n\n| Argument | Type | Details |\n|---------------|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `firstPanel` | ui.Panel, optional | The left or top panel. Defaults to a new instance of ui.Panel. |\n| `secondPanel` | ui.Panel, optional | The bottom or right panel. Defaults to a new instance of ui.Panel. |\n| `orientation` | String, optional | One of \"horizontal\" or \"vertical\". Defaults to \"horizontal\". |\n| `wipe` | Boolean, optional | Whether to enable the wiping effect. When this mode is enabled, both panels take up all available space, and dragging the divider doesn't set the size of the panels but rather determines how much of each panel is shown. This effect is analogous to a \"wipe transition\". This mode is useful for comparing two maps. Defaults to false. |\n| `style` | Object, optional | An object of allowed CSS styles with their values to be set for this panel. Defaults to an empty object. |"]]
