Part 5 - Alignment.ipynb
303 lines
| 9.5 KiB
| text/plain
|
TextLexer
|
r14323 | { | |
"metadata": { | |||
|
r14334 | "cell_tags": [ | |
[ | |||
"<None>", | |||
null | |||
] | |||
], | |||
|
r14323 | "name": "" | |
}, | |||
"nbformat": 3, | |||
"nbformat_minor": 0, | |||
"worksheets": [ | |||
{ | |||
"cells": [ | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"from IPython.html import widgets # Widget definitions\n", | |||
|
r14342 | "from IPython.display import display # Used to display widgets in the notebook" | |
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
|
r14342 | "outputs": [], | |
|
r14323 | "prompt_number": 1 | |
}, | |||
{ | |||
"cell_type": "heading", | |||
"level": 1, | |||
"metadata": {}, | |||
"source": [ | |||
"Alignment" | |||
] | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"Most widgets have a `description` property which allows a label for the widget to be defined. The label of the widget has a fixed minimum width. The text of the label is always right aligned and the widget is left aligned (as seen below) " | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"display(widgets.StringWidget(description=\"a:\"))\n", | |||
"display(widgets.StringWidget(description=\"aa:\"))\n", | |||
"display(widgets.StringWidget(description=\"aaa:\"))" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 2 | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"If a label is longer than the minimum width, the widget is shifted to the right (as seen below)." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"display(widgets.StringWidget(description=\"a:\"))\n", | |||
"display(widgets.StringWidget(description=\"aa:\"))\n", | |||
"display(widgets.StringWidget(description=\"aaa:\"))\n", | |||
"display(widgets.StringWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 3 | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"If a `description` is not set for the widget, the label is not displayed (as seen below)." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"display(widgets.StringWidget(description=\"a:\"))\n", | |||
"display(widgets.StringWidget(description=\"aa:\"))\n", | |||
"display(widgets.StringWidget(description=\"aaa:\"))\n", | |||
"display(widgets.StringWidget())" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 4 | |||
}, | |||
{ | |||
"cell_type": "heading", | |||
"level": 1, | |||
"metadata": {}, | |||
"source": [ | |||
"Custom Alignment" | |||
] | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"`ContainerWidget`s allow for custom alignment of widgets. The `hbox` and `vbox` methods (parameterless) cause the `ContainerWidget` to both horizontally and vertically align its children. The following example compares `vbox` to `hbox`." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"child_style = {\n", | |||
" 'background': '#77CC77',\n", | |||
" 'padding': '25px',\n", | |||
" 'margin': '5px',\n", | |||
" 'font-size': 'xx-large',\n", | |||
" 'color': 'white',\n", | |||
"}\n", | |||
"\n", | |||
"def make_container(title):\n", | |||
|
r14446 | " display(widgets.StringWidget(default_view_name='HTMLView', value='<h2><br>' + title + '</h2>'))\n", | |
|
r14323 | " container = widgets.ContainerWidget()\n", | |
" container.set_css('background', '#999999')\n", | |||
" display(container)\n", | |||
" return container\n", | |||
"\n", | |||
"def fill_container(container):\n", | |||
" components = []\n", | |||
" for i in range(3):\n", | |||
|
r14446 | " components.append(widgets.StringWidget(parent=container, default_view_name='HTMLView', value=\"ABC\"[i]))\n", | |
|
r14323 | " components[i].set_css(child_style)\n", | |
" display(components[i])\n", | |||
" \n", | |||
"container = make_container('VBox')\n", | |||
"container.vbox()\n", | |||
"fill_container(container)\n", | |||
"\n", | |||
"container = make_container('HBox')\n", | |||
"container.hbox()\n", | |||
"fill_container(container)\n" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 5 | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14334 | "The `ContainerWidget` `pack_start`, `pack_center`, and `pack_end` methods (parameterless) adjust the alignment of the widgets on the axis that they are being rendered on. Below is an example of the different alignments." | |
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
|
r14334 | "container = make_container('HBox Pack Start')\n", | |
|
r14323 | "container.hbox()\n", | |
|
r14334 | "container.pack_start()\n", | |
|
r14323 | "fill_container(container)\n", | |
" \n", | |||
|
r14334 | "container = make_container('HBox Pack Center')\n", | |
|
r14323 | "container.hbox()\n", | |
|
r14334 | "container.pack_center()\n", | |
|
r14323 | "fill_container(container)\n", | |
" \n", | |||
|
r14334 | "container = make_container('HBox Pack End')\n", | |
|
r14323 | "container.hbox()\n", | |
|
r14334 | "container.pack_end()\n", | |
|
r14323 | "fill_container(container)" | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 6 | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14336 | "The `ContainerWidget` `flex0`, `flex1`, and `flex2` methods (parameterless) modify the containers flexibility. Changing a container flexibility affects how and if the container will occupy the remaining space. Setting `flex0` has the same result as setting no flex. Below is an example of different flex configurations. The number on the boxes correspond to the applied flex." | |
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"def fill_container(container, flexes):\n", | |||
" components = []\n", | |||
" for i in range(len(flexes)):\n", | |||
" components.append(widgets.ContainerWidget(parent=container))\n", | |||
" components[i].set_css(child_style)\n", | |||
" \n", | |||
|
r14446 | " label = widgets.StringWidget(parent=components[i], default_view_name='HTMLView', value=str(flexes[i]))\n", | |
|
r14336 | " \n", | |
" if flexes[i] == 0:\n", | |||
" components[i].flex0()\n", | |||
" elif flexes[i] == 1:\n", | |||
" components[i].flex1()\n", | |||
" elif flexes[i] == 2:\n", | |||
" components[i].flex2()\n", | |||
" display(components[i])\n", | |||
" \n", | |||
"container = make_container('Different Flex Configurations')\n", | |||
"container.hbox()\n", | |||
"fill_container(container, [0, 0, 0])\n", | |||
" \n", | |||
"container = make_container('')\n", | |||
"container.hbox()\n", | |||
"fill_container(container, [0, 0, 1])\n", | |||
" \n", | |||
"container = make_container('')\n", | |||
"container.hbox()\n", | |||
"fill_container(container, [0, 1, 1])\n", | |||
" \n", | |||
"container = make_container('')\n", | |||
"container.hbox()\n", | |||
"fill_container(container, [0, 2, 2])\n", | |||
" \n", | |||
"container = make_container('')\n", | |||
"container.hbox()\n", | |||
"fill_container(container, [0, 1, 2])\n", | |||
" \n", | |||
"container = make_container('')\n", | |||
"container.hbox()\n", | |||
"fill_container(container, [1, 1, 2])" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 7 | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14334 | "The `ContainerWidget` `align_start`, `align_center`, and `align_end` methods (parameterless) adjust the alignment of the widgets on the axis perpindicular to the one that they are being rendered on. Below is an example of the different alignments." | |
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"def fill_container(container):\n", | |||
" components = []\n", | |||
" for i in range(3):\n", | |||
|
r14446 | " components.append(widgets.StringWidget(parent=container, default_view_name='HTMLView', value=\"ABC\"[i]))\n", | |
|
r14334 | " components[i].set_css(child_style)\n", | |
" components[i].set_css('height', str((i+1) * 50) + 'px')\n", | |||
" display(components[i])\n", | |||
"\n", | |||
"container = make_container('HBox Align Start')\n", | |||
"container.hbox()\n", | |||
"container.align_start()\n", | |||
"fill_container(container)\n", | |||
" \n", | |||
"container = make_container('HBox Align Center')\n", | |||
"container.hbox()\n", | |||
"container.align_center()\n", | |||
"fill_container(container)\n", | |||
" \n", | |||
"container = make_container('HBox Align End')\n", | |||
"container.hbox()\n", | |||
"container.align_end()\n", | |||
"fill_container(container)" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14336 | "prompt_number": 8 | |
|
r14334 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14323 | "By default the widget area is a `vbox`; however, there are many uses for a `hbox`. The example below uses a `hbox` to display a set of vertical sliders, like an equalizer." | |
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"container = widgets.ContainerWidget()\n", | |||
"container.hbox()\n", | |||
"for i in range(15):\n", | |||
" widgets.FloatRangeWidget(orientation='vertical', parent=container, description=str(i+1), value=50.0)\n", | |||
"display(container)" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14336 | "prompt_number": 9 | |
|
r14323 | } | |
], | |||
"metadata": {} | |||
} | |||
] | |||
} |