From bc2b043dff163bdb393016b08e585a258d651db1 2014-01-16 10:56:58 From: Jonathan Frederic Date: 2014-01-16 10:56:58 Subject: [PATCH] Added flex properties example to alignment tutorial. --- diff --git a/examples/widgets/Part 5 - Alignment.ipynb b/examples/widgets/Part 5 - Alignment.ipynb index e734424..4462e3e 100644 --- a/examples/widgets/Part 5 - Alignment.ipynb +++ b/examples/widgets/Part 5 - Alignment.ipynb @@ -258,6 +258,62 @@ "cell_type": "markdown", "metadata": {}, "source": [ + "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", + " label = widgets.StringWidget(parent=components[i], default_view_name='LabelView', value=str(flexes[i]))\n", + " \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": [ "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." ] }, @@ -291,7 +347,7 @@ "language": "python", "metadata": {}, "outputs": [], - "prompt_number": 7 + "prompt_number": 8 }, { "cell_type": "markdown", @@ -313,7 +369,7 @@ "language": "python", "metadata": {}, "outputs": [], - "prompt_number": 8 + "prompt_number": 9 } ], "metadata": {}