Nested StackPanels combined with setting style for the individual items provide a very flexible way to manage page layout.
Below, a horizontal stackpanel with a light grey background contains three vertical stackpanels, each containing a varying number of divs which have been styled to have slightly different sizes and colors.
Some divs have p elements containing text, with different padding and margins defined.
:Class StackPanelAdvanced : MiPageSample
⍝
⍝
rect←{r⊣(r←New _.div).style←2↓∊'; height: ' 'px; width: ' 'px; background-color:',⍪⍕¨⍵}
⍝
addstyle←{⍺.style,←'; ',⍵} ⍝
∇ Compose;blue;green;red
:Access Public
intro←'Nested StackPanels combined with setting style for the individual items '
intro,←'provide a very flexible way to manage page layout.'
Add _.p intro
intro←'Below, a horizontal stackpanel with a light grey background contains three '
intro,←'vertical stackpanels, each containing a varying number of divs which have been '
intro,←'styled to have slightly different sizes and colors.'
Add _.p intro
intro←'Some divs have p elements containing text, with different padding and margins defined.'
Add _.p intro
⍝
rects←rect¨(20 200 '#922')(30 250 '#944')(55 175 '#922')
rects[3]addstyle'padding: 10px;'
rects[3].Add _.span'padding 10px'
(red←'red'New _.StackPanel rects).style←'background-color: #C99;'
⍝
rects←rect¨(40 120 '#494')(105 180 '#696')
rects[1]addstyle'margin: 5px;'
rects[1].Add _.span'margins 5px'
(green←'green'New _.StackPanel rects).style←'background-color: #9C9;'
⍝
rects←rect¨(30 180 '#669')(45 100 '#449')(25 120 '#669')(55 170 '#449')
rects[4].Add _.span'no padding or margins'
(blue←'blue'New _.StackPanel rects).style←'background-color: #99C;'
⍝
(outer←'outer'Add _.StackPanel(red green blue)).Horizontal←1
outer.style←'background-color: #AAA; height: 190px;'
∇
:EndClass