95 lines
5.8 KiB
XML
95 lines
5.8 KiB
XML
<layout>
|
|
<theme>
|
|
<var key="aqua1" value="#00AAFF" />
|
|
<var key="aqua2" value="#00CCFF" />
|
|
<var key="aqua3" value="#00FFFF" />
|
|
</theme>
|
|
|
|
<elements>
|
|
<rectangle width="750" height="550" color="#FFFFFF" flex_direction="column" overflow_y="scroll">
|
|
<div flex_direction="column" padding="16">
|
|
<label weight="bold" text="Try these environment variables:" />
|
|
<label text="TESTBED=bar" />
|
|
<label text="TESTBED=watch" />
|
|
<label text="TESTBED=dashboard" />
|
|
</div>
|
|
|
|
<div flex_direction="column">
|
|
<!-- 1/3 red rect -->
|
|
<rectangle padding="16" box_sizing="content_box" flex_wrap="wrap" gap="16" align_content="flex_start" color="#223344">
|
|
<rectangle color="#99AAFF" round="100%" width="128" height="48" align_items="center" justify_content="center" border="8" border_color="#FFFFFF">
|
|
<label text="I'm centered" color="#FF0000" weight="bold" />
|
|
</rectangle>
|
|
<div flex_direction="column">
|
|
<label text="I'm a text!" color="~aqua1" />
|
|
<label text="I'm a bold text!" color="~aqua2" weight="bold" />
|
|
<label text="I'm a BIG text!" color="~aqua3" weight="bold" size="20" />
|
|
</div>
|
|
<rectangle round="4" id="my_div_parent" color="#FFCC99" align_items="center" align_content="flex_start" justify_content="center" flex_wrap="wrap" gap="8" padding="16" border="2" border_color="#ffffff">
|
|
<!-- filled-in at runtime -->
|
|
</rectangle>
|
|
<rectangle width="400" round="8" padding="2" align_items="center" border_color="#ffffff">
|
|
<include src="testbed/icons.xml" />
|
|
</rectangle>
|
|
|
|
<!-- Embed sprites -->
|
|
<sprite width="64" height="64" src="raster.png" />
|
|
</rectangle>
|
|
<!-- 2/3 green rects -->
|
|
<div flex_direction="column">
|
|
<rectangle color="#44aa33" color2="#3344aa" round="4" gradient="radial" height="100%" border="2" border_color="#ffffff">
|
|
<div margin="16" width="100%" height="100%" align_items="center" justify_content="center" flex_wrap="wrap" align_content="center">
|
|
<rectangle width="64" height="64" color="#000000" />
|
|
<rectangle width="64" height="64" color="#002222" />
|
|
<rectangle width="64" height="64" color="#004444" />
|
|
<rectangle width="64" height="64" color="#006666" />
|
|
</div>
|
|
</rectangle>
|
|
<rectangle color="#aaff88" color2="#88aaff" round="4" gradient="vertical" height="100%">
|
|
<div margin="16" width="100%" height="100%" flex_wrap="wrap" gap="16" align_content="flex_start">
|
|
<rectangle width="64" height="32" color="#ff0000" />
|
|
<rectangle width="64" height="32" color="#ff0000" border="2" border_color="#000000" />
|
|
<rectangle width="64" height="32" color="#ff0000" border="4" border_color="#000000" />
|
|
<rectangle width="64" height="32" color="#ff0000" border="6" border_color="#000000" />
|
|
<rectangle width="64" height="32" color="#ff0000" border="8" border_color="#000000" />
|
|
<rectangle width="64" height="64" color="#000000" border="2" round="100%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="8" round="100%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="16" round="100%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="30" round="100%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="2" round="50%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="8" round="50%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="12" round="50%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="13" round="50%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="14" round="50%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="15" round="50%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="16.5" round="50%" border_color="#FFFF00" />
|
|
<rectangle width="64" height="64" color="#000000" border="30" round="50%" border_color="#FFFF00" />
|
|
<rectangle color="#000000">
|
|
<rectangle width="200" height="100" color="#ffffff" margin="2" />
|
|
</rectangle>
|
|
</div>
|
|
</rectangle>
|
|
</div>
|
|
<!-- 3/3 yellow rect -->
|
|
<rectangle color="#ffff99" flex_direction="column" padding="16">
|
|
<div height="100%" flex_direction="column">
|
|
<label text="Multi line test #1
This is aligned to the left." align="left" size="20" color="#330000" />
|
|
<rectangle width="100%" height="1" />
|
|
</div>
|
|
<div height="100%" flex_direction="column">
|
|
<label text="Multi line test #2
This is aligned to the right." align="right" size="20" color="#330000" />
|
|
<rectangle width="100%" height="1" />
|
|
</div>
|
|
<div height="100%" flex_direction="column">
|
|
<label text="Multi line test #3
This is aligned to the center.
The longer lines are still aligned to the center." align="center" size="20" color="#330000" />
|
|
<rectangle width="100%" height="1" />
|
|
</div>
|
|
<div height="100%" flex_direction="column">
|
|
<label text="Multi line test #4
This is justified alignment.
The longer lines are the same length as the shorter lines." align="justified" size="20" color="#330000" />
|
|
<rectangle width="100%" height="1" />
|
|
</div>
|
|
</rectangle>
|
|
</div>
|
|
</rectangle>
|
|
</elements>
|
|
</layout> |