ui.SplitPanel
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
วิดเจ็ตที่มี 2 แผงโดยมีเส้นแบ่งคั่นกลาง คุณลากเส้นแบ่งเพื่อปรับขนาดแผงได้ แผงใดแผงหนึ่งหรือทั้ง 2 แผงอาจเป็นออบเจ็กต์ ui.Map
โดยค่าเริ่มต้น เลย์เอาต์จะเริ่มต้นด้วยการแยก 50/50 รูปแบบความกว้างและ max/minWidth ในแผงจะควบคุมการปรับขนาดการแยกสำหรับการวางแนวนอน ในทำนองเดียวกัน ให้ใช้ความสูงและ max/minHeight สำหรับแนวตั้ง โดยระบุเป็นพิกเซลได้ในรูปแบบ "{n}px" หรือเป็นเปอร์เซ็นต์ของ SplitPanel ที่มีในรูปแบบ "{n}%"
โปรดทราบว่าระบบจะไม่สนใจขนาดที่ระบุสำหรับแผงที่ 2 หากมีการระบุขนาดแผงแรก เนื่องจากความกว้างโดยรวมของแผงที่แยกจะได้รับการควบคุมแยกกัน คุณอาจตั้งค่าขนาดสูงสุด/ต่ำสุดสำหรับทั้ง 2 แผง
| การใช้งาน | การคืนสินค้า |
|---|
ui.SplitPanel(firstPanel, secondPanel, orientation, wipe, style) | ui.SplitPanel |
| อาร์กิวเมนต์ | ประเภท | รายละเอียด |
|---|
firstPanel | ui.Panel, ไม่บังคับ | แผงด้านซ้ายหรือด้านบน ค่าเริ่มต้นจะเป็นอินสแตนซ์ใหม่ของ ui.Panel |
secondPanel | ui.Panel, ไม่บังคับ | แผงด้านล่างหรือด้านขวา ค่าเริ่มต้นจะเป็นอินสแตนซ์ใหม่ของ ui.Panel |
orientation | สตริง ไม่บังคับ | โดยอาจเป็น "horizontal" หรือ "vertical" ค่าเริ่มต้นคือ "แนวนอน" |
wipe | บูลีน ไม่บังคับ | จะเปิดใช้เอฟเฟกต์การลบหรือไม่ เมื่อเปิดใช้โหมดนี้ แผงทั้ง 2 จะใช้พื้นที่ว่างทั้งหมด และการลากเส้นแบ่งจะไม่เป็นการกำหนดขนาดของแผง แต่จะเป็นการกำหนดว่าแผงแต่ละแผงจะแสดงมากน้อยเพียงใด เอฟเฟกต์นี้คล้ายกับ "การเปลี่ยนฉากแบบเช็ด" โหมดนี้มีประโยชน์ในการเปรียบเทียบแผนที่ 2 แผนที่ ค่าเริ่มต้นคือ false |
style | ออบเจ็กต์ (ไม่บังคับ) | ออบเจ็กต์ของรูปแบบ CSS ที่อนุญาตพร้อมค่าที่จะตั้งค่าสำหรับแผงนี้ ค่าเริ่มต้นจะเป็นออบเจ็กต์ที่ว่างเปล่า |
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 UTC
[null,null,["อัปเดตล่าสุด 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. |"]]
