{ "metadata": { "name": "" }, "nbformat": 3, "nbformat_minor": 0, "worksheets": [ { "cells": [ { "cell_type": "code", "collapsed": false, "input": [ "from IPython.html import widgets # Widget definitions\n", "from IPython.display import display # Used to display widgets in the notebook\n", "\n", "# Enable widgets in this notebook\n", "widgets.init_widget_js()" ], "language": "python", "metadata": {}, "outputs": [ { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/bool.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/int_range.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/int.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/selection.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/string.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/float.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/container.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/multicontainer.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/button.js\");" ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"../static/notebook/js/widgets/float_range.js\");" ], "metadata": {}, "output_type": "display_data" } ], "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", " display(widgets.StringWidget(default_view_name='LabelView', value='