diff --git a/examples/widgets/Part 5 - Alignment.ipynb b/examples/widgets/Part 5 - Alignment.ipynb index 6ceb400..e734424 100644 --- a/examples/widgets/Part 5 - Alignment.ipynb +++ b/examples/widgets/Part 5 - Alignment.ipynb @@ -1,5 +1,11 @@ { "metadata": { + "cell_tags": [ + [ + "", + null + ] + ], "name": "" }, "nbformat": 3, @@ -22,70 +28,70 @@ "outputs": [ { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/bool.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/button.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/int_range.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int_range.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/int.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/string.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/selection.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/multicontainer.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/string.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/bool.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/float.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/container.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/selection.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/multicontainer.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/button.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float_range.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ - "$.getScript(\"../static/notebook/js/widgets/float_range.js\");" + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/container.js\");" ], "metadata": {}, "output_type": "display_data" @@ -221,26 +227,26 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "The `ContainerWidget` also supports `start`, `center`, and `end` methods (parameterless) that adjust the alignment of the widgets on the axis that they are being rendered on. Below is an example of the different alignments." + "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." ] }, { "cell_type": "code", "collapsed": false, "input": [ - "container = make_container('HBox Start')\n", + "container = make_container('HBox Pack Start')\n", "container.hbox()\n", - "container.start()\n", + "container.pack_start()\n", "fill_container(container)\n", " \n", - "container = make_container('HBox Center')\n", + "container = make_container('HBox Pack Center')\n", "container.hbox()\n", - "container.center()\n", + "container.pack_center()\n", "fill_container(container)\n", " \n", - "container = make_container('HBox End')\n", + "container = make_container('HBox Pack End')\n", "container.hbox()\n", - "container.end()\n", + "container.pack_end()\n", "fill_container(container)" ], "language": "python", @@ -252,6 +258,45 @@ "cell_type": "markdown", "metadata": {}, "source": [ + "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", + " components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value=\"ABC\"[i]))\n", + " 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": [], + "prompt_number": 7 + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ "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." ] }, @@ -268,7 +313,7 @@ "language": "python", "metadata": {}, "outputs": [], - "prompt_number": 7 + "prompt_number": 8 } ], "metadata": {}