Grid Layout
Grid
need to give initial size but new rows are added automatically
- add components
- by coordinates
- component may occupy multiple cells
- by cursor left-to-right top-to-bottom
- by coordinates
insert / delete rows / columns
adjustments
- margins
- cell spacing
- component alignment
- sizing / expansion
- components can have both horizontal / vertical expand ratio
- undefined - size to fit
How to (maybe out of book)
Border
.v-gridlayout-gridexpandratio { background: blue; /* Creates a "border" around the grid. */ margin: 10px; /* Empty space around the layout. */ } /* Add padding through which the background color shows. */ .v-gridlayout-gridexpandratio .v-gridlayout-margin { padding: 2px; } /* Add cell borders and make the cell backgrounds white. * Warning: This depends heavily on the HTML structure. */ .v-gridlayout-gridexpandratio > div > div > div { padding: 2px; /* Layout background will show through. */ background: white; /* The cells will be colored white. */ } /* Components inside the layout are a safe way to style cells. */ .v-gridlayout-gridexpandratio .v-label { text-align: left; background: #ffffc0; /* Pale yellow */
}
above is example from book, does not seem to work, maybe out of dated. checking page now style name is different. it's safer to use a panel, I think
Or - put a Panel inside layout and set panel border (this could be easier)
Or - not even need to put a Panel inside, just a Label has style too!