<x-dart-flex-root-container>
<x-view-stack
id="target"
percent-width="{{100.0}}"
percent-height="{{100.0}}">
<x-view-stack-element
x-id="layoutView"
id="view-1"
list-name="Layout swapper"
percent-width="{{100.0}}"
percent-height="{{100.0}}">
<x-h-group
align="left"
percent-width="{{100.0}}"
height="{{20}}">
<x-rich-text
width="{{160}}"
text="Swap the layout!"
align="center">
</x-rich-text>
<x-combo-box
x-id="layoutSelector"
width="{{120}}"
height="{{20}}"
label-function="{{
(Map item) => item['label']
}}"
x-data-provider="{{
new ListCollection(
source: [
{'label':'tile group', 'value':new TileLayout()},
{'label':'horizontal group', 'value':new HorizontalLayout()},
{'label':'vertical group', 'value':new VerticalLayout()}
]
)
}}">
</x-combo-box>
</x-h-group>
<x-h-group
align="left"
percent-width="{{100.0}}"
height="{{20}}">
<x-rich-text
width="{{160}}"
text="Change the gap!"
align="center">
</x-rich-text>
<x-slider
x-id="gapSelector"
min="{{0}}"
max="{{50}}"
step="{{1}}"
value="{{10}}"
width="{{120}}"
height="{{20}}">
</x-slider>
</x-h-group>
<x-group
x-id="imageGroup"
layout="{{new TileLayout()}}"
percent-width="{{100.0}}"
percent-height="{{100.0}}">
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
<x-image
width="{{100}}"
height="{{100}}"
source="dartlang.png">
</x-image>
</x-group>
</x-view-stack-element>
<x-view-stack-element
x-id="dataGridView"
id="view-2"
list-name="Dart full list issues grid"
percent-width="{{100.0}}"
percent-height="{{100.0}}">
<x-data-grid
x-id="issuesGrid"
percent-width="{{100.0}}"
percent-height="{{100.0}}"
header-height="{{40}}"
row-height="{{60}}"
column-spacing="{{0}}"
row-spacing="{{0}}">
</x-data-grid>
</x-view-stack-element>
<x-view-stack-element
x-id="layoutViewCode"
id="view-1-code"
list-name="web_ui code"
percent-width="{{100.0}}"
percent-height="{{100.0}}">
<x-rich-text
percent-width="{{100.0}}"
percent-height="{{100.0}}"
text="{{layoutViewCodePage}}">
</x-rich-text>
</x-view-stack-element>
<x-view-stack-element
x-id="dataGridViewCode"
id="view-2-code"
list-name="web_ui code"
percent-width="{{100.0}}"
percent-height="{{100.0}}">
<x-rich-text
percent-width="{{100.0}}"
percent-height="{{100.0}}"
text="{{dataGridViewCodePage}}">
</x-rich-text>
</x-view-stack-element>
</x-view-stack>
</x-dart-flex-root-container>