"+ `Box` is always horizontal, whereas `FlexBox` has a configurable `Orientation`.\n",
"+ `Box` is always horizontal, whereas `FlexBox` has a configurable `Orientation`.\n",
"+ `FlexBox` is flexible, and the flexibility is determined by its `Flex` field (0 to 2).\n",
"+ `FlexBox` is flexible, and the flexibility is determined by its `Flex` field (0 to 2).\n",
"+ `FlexBox` also has explicit `Pack` and `Align` fields."
"+ `FlexBox` also has explicit `Pack` and `Align` fields.\n",
"\n",
"Let's see these differences in action:"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {
"collapsed": false,
"scrolled": true
},
"outputs": [
{
"data": {
"text/html": [
"<style>/*\n",
"Custom IHaskell CSS.\n",
"*/\n",
"\n",
"/* Styles used for the Hoogle display in the pager */\n",
".hoogle-doc {\n",
" display: block;\n",
" padding-bottom: 1.3em;\n",
" padding-left: 0.4em;\n",
"}\n",
".hoogle-code {\n",
" display: block;\n",
" font-family: monospace;\n",
" white-space: pre;\n",
"}\n",
".hoogle-text {\n",
" display: block;\n",
"}\n",
".hoogle-name {\n",
" color: green;\n",
" font-weight: bold;\n",
"}\n",
".hoogle-head {\n",
" font-weight: bold;\n",
"}\n",
".hoogle-sub {\n",
" display: block;\n",
" margin-left: 0.4em;\n",
"}\n",
".hoogle-package {\n",
" font-weight: bold;\n",
" font-style: italic;\n",
"}\n",
".hoogle-module {\n",
" font-weight: bold;\n",
"}\n",
".hoogle-class {\n",
" font-weight: bold;\n",
"}\n",
"\n",
"/* Styles used for basic displays */\n",
".get-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" display: block;\n",
" white-space: pre-wrap;\n",
"}\n",
"\n",
".show-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" margin-left: 1em;\n",
"}\n",
"\n",
".mono {\n",
" font-family: monospace;\n",
" display: block;\n",
"}\n",
"\n",
".err-msg {\n",
" color: red;\n",
" font-style: italic;\n",
" font-family: monospace;\n",
" white-space: pre;\n",
" display: block;\n",
"}\n",
"\n",
"#unshowable {\n",
" color: red;\n",
" font-weight: bold;\n",
"}\n",
"\n",
".err-msg.in.collapse {\n",
" padding-top: 0.7em;\n",
"}\n",
"\n",
"/* Code that will get highlighted before it is highlighted */\n",
".highlight-code {\n",
" white-space: pre;\n",
" font-family: monospace;\n",
"}\n",
"\n",
"/* Hlint styles */\n",
".suggestion-warning { \n",
" font-weight: bold;\n",
" color: rgb(200, 130, 0);\n",
"}\n",
".suggestion-error { \n",
" font-weight: bold;\n",
" color: red;\n",
"}\n",
".suggestion-name {\n",
" font-weight: bold;\n",
"}\n",
"</style><span class='err-msg'>No instance for (Data.Vinyl.Lens.RElem 'Orientation '[] (Data.Vinyl.TypeLevel.RIndex 'Orientation '[])) arising from a use of ‘setField’<br/>In the expression: setField box SOrientation VerticalOrientation<br/>In an equation for ‘it’: it = setField box SOrientation VerticalOrientation</span>"
],
"text/plain": [
"No instance for (Data.Vinyl.Lens.RElem 'Orientation '[] (Data.Vinyl.TypeLevel.RIndex 'Orientation '[])) arising from a use of ‘setField’\n",
"In the expression: setField box SOrientation VerticalOrientation\n",
"In an equation for ‘it’: it = setField box SOrientation VerticalOrientation"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"-- Trying to set orientation for Boxes\n",
"setField box SOrientation VerticalOrientation"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The errors means that the widget doesn't possess the `Orientation` property."
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"-- Trying to set orientation for FlexBox\n",
"setField flx SOrientation VerticalOrientation"
]
]
},
},
{
{
...
@@ -473,7 +618,7 @@
...
@@ -473,7 +618,7 @@
},
},
{
{
"cell_type": "code",
"cell_type": "code",
"execution_count": 9,
"execution_count": 7,
"metadata": {
"metadata": {
"collapsed": true
"collapsed": true
},
},
...
@@ -492,7 +637,7 @@
...
@@ -492,7 +637,7 @@
},
},
{
{
"cell_type": "code",
"cell_type": "code",
"execution_count": 13,
"execution_count": 8,
"metadata": {
"metadata": {
"collapsed": false
"collapsed": false
},
},
...
@@ -503,61 +648,6 @@
...
@@ -503,61 +648,6 @@
},
},
"metadata": {},
"metadata": {},
"output_type": "display_data"
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
}
}
],
],
"source": [
"source": [
...
@@ -576,7 +666,7 @@
...
@@ -576,7 +666,7 @@
"cell_type": "markdown",
"cell_type": "markdown",
"metadata": {},
"metadata": {},
"source": [
"source": [
"Both the widgets are similar, the only difference is in the orientation. `Accordion` is vertical, whereas `TabWidget` is horizontal."
"Both the widgets are similar, the only major difference is in the orientation. `Accordion` is vertical, whereas `TabWidget` is horizontal."