![]() ![]() This is fine for a couple of columns and simple widgets only, since on a small smartphone screen, you will rapidly get out of room. If you don't specify any width or breakpoints, the column will spread evenly on the row, without wrapping. * Note that the sidebar will potentially be displayed and has a width of 260px Smaller/regular tablets (iPad, iPad Mini.) in landscape mode* Smaller tablets (Nexus 7.) in portrait mode The breakpoints work like this: the width property of the column is the default width that will be applied for the smallest screen, then xsmall, small, medium, large, xlarge width will apply on wider screens appropriately: Property ![]() Using code, you can quickly duplicate the breakpoints for similar columns. These are controlled using the parameters on the column ( oh-grid-col) components - you can configure them in the Design tab with the Column Options menu entries, or in YAML with the Code tab or a "Edit YAML" options on a parent component. However, when you choose to keep control of the layout by making use of rows and columns, you need to take extra care about the responsive breakpoints. If you plan to share the UI you built, you can expect them to access it with mobile devices rather than desktop computers.įor cells and masonry, you don't have to worry about it, it will be handled for you. With that in mind, it is advisable to build the page for the narrow screens first, and then make sure it expands gracefully to the wider ones, instead of thinking the other way around. Sometimes, it will be on a phone, and other times on a bigger screen. ![]() When you're designing a responsive layout page, it's important to remember how this page will be used. The masonry container will decide how many columns it has based on the screen width, and will try to arrange the widgets automatically to form a compact layout. In a row, you may add columns which will spread across the row, possibly wrapping their contents to another row (but still within the same oh-grid-row).Įach column can host one widget from the standard standalone widget library, or a personal one. In a cell container, you may add widgets from the standard cell widget library (or personal widgets, provided they're based on a oh-cell widget or derivative). In every block there could be an arbitrary set of rows or cells containers. # Responsive Layout Pages # Anatomy of a Responsive Layout PageĪ Responsive Layout page can host one or multiple blocks, optionally followed by a masonry layout. Note that the type cannot be changed afterwards. When you first create a layout you are asked which type of layout you want to create. They are used to design a panel-like page for a specific screen size and are most suitable for static interfaces like wall mounted tablets. Within Responsive Layouts you can choose among several types of arrangements, based on whether you want to control the layout completely, or let the container decide where to place the widgets.įixed Grid Layouts allow you to create a Layout Page where elements have predefined positions and sizes. They automatically adjust to the device's screen and thus can be used as general interface from all devices. Responsive Layouts are the main layouts in openHAB and recommended for most uses. You can choose between two different basic types of layouts: Layout Pages are used in the main web user interface to display widgets in an organized manner. Advanced Functionality and Administrative Tasks. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |