ui.SplitPanel
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Một tiện ích chứa hai bảng có một đường phân cách ở giữa. Bạn có thể kéo đường phân chia để thay đổi kích thước các bảng. Một hoặc cả hai bảng điều khiển có thể là đối tượng ui.Map.
Theo mặc định, bố cục sẽ khởi tạo với tỷ lệ phân chia là 50/50. Các kiểu chiều rộng và max/minWidth trên các bảng điều khiển sẽ kiểm soát kích thước phân chia cho hướng ngang. Tương tự, hãy sử dụng chiều cao và max/minHeight cho hướng dọc. Bạn có thể chỉ định các giá trị này bằng pixel dưới dạng "{n}px" hoặc bằng tỷ lệ phần trăm của SplitPanel chứa dưới dạng "{n}%".
Xin lưu ý rằng kích thước đã cho của bảng điều khiển thứ hai sẽ bị bỏ qua nếu bạn chỉ định kích thước bảng điều khiển đầu tiên, vì chiều rộng tổng thể của bảng điều khiển phân chia được kiểm soát độc lập. Bạn có thể đặt kích thước tối đa/tối thiểu cho cả hai bảng điều khiển.
| Cách sử dụng | Giá trị trả về |
|---|
ui.SplitPanel(firstPanel, secondPanel, orientation, wipe, style) | ui.SplitPanel |
| Đối số | Loại | Thông tin chi tiết |
|---|
firstPanel | ui.Panel, không bắt buộc | Bảng điều khiển bên trái hoặc trên cùng. Mặc định là một phiên bản mới của ui.Panel. |
secondPanel | ui.Panel, không bắt buộc | Bảng điều khiển dưới cùng hoặc bên phải. Mặc định là một phiên bản mới của ui.Panel. |
orientation | Chuỗi, không bắt buộc | Một trong hai giá trị "horizontal" (ngang) hoặc "vertical" (dọc). Giá trị mặc định là "horizontal". |
wipe | Boolean, không bắt buộc | Chọn có bật hiệu ứng xoá hay không. Khi chế độ này được bật, cả hai bảng điều khiển sẽ chiếm toàn bộ không gian có sẵn và việc kéo đường phân chia không đặt kích thước của các bảng điều khiển mà xác định lượng nội dung của mỗi bảng điều khiển được hiển thị. Hiệu ứng này tương tự như "hiệu ứng chuyển cảnh xoá". Chế độ này hữu ích khi bạn muốn so sánh hai bản đồ. Giá trị mặc định là false. |
style | Đối tượng, không bắt buộc | Một đối tượng gồm các kiểu CSS được phép có giá trị được đặt cho bảng điều khiển này. Giá trị mặc định là một đối tượng trống. |
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-26 UTC.
[null,null,["Cập nhật lần gần đây nhất: 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. |"]]
