##// END OF EJS Templates
Added flex properties example to alignment tutorial.
Jonathan Frederic -
Show More
@@ -258,6 +258,62 b''
258 258 "cell_type": "markdown",
259 259 "metadata": {},
260 260 "source": [
261 "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."
262 ]
263 },
264 {
265 "cell_type": "code",
266 "collapsed": false,
267 "input": [
268 "def fill_container(container, flexes):\n",
269 " components = []\n",
270 " for i in range(len(flexes)):\n",
271 " components.append(widgets.ContainerWidget(parent=container))\n",
272 " components[i].set_css(child_style)\n",
273 " \n",
274 " label = widgets.StringWidget(parent=components[i], default_view_name='LabelView', value=str(flexes[i]))\n",
275 " \n",
276 " if flexes[i] == 0:\n",
277 " components[i].flex0()\n",
278 " elif flexes[i] == 1:\n",
279 " components[i].flex1()\n",
280 " elif flexes[i] == 2:\n",
281 " components[i].flex2()\n",
282 " display(components[i])\n",
283 " \n",
284 "container = make_container('Different Flex Configurations')\n",
285 "container.hbox()\n",
286 "fill_container(container, [0, 0, 0])\n",
287 " \n",
288 "container = make_container('')\n",
289 "container.hbox()\n",
290 "fill_container(container, [0, 0, 1])\n",
291 " \n",
292 "container = make_container('')\n",
293 "container.hbox()\n",
294 "fill_container(container, [0, 1, 1])\n",
295 " \n",
296 "container = make_container('')\n",
297 "container.hbox()\n",
298 "fill_container(container, [0, 2, 2])\n",
299 " \n",
300 "container = make_container('')\n",
301 "container.hbox()\n",
302 "fill_container(container, [0, 1, 2])\n",
303 " \n",
304 "container = make_container('')\n",
305 "container.hbox()\n",
306 "fill_container(container, [1, 1, 2])"
307 ],
308 "language": "python",
309 "metadata": {},
310 "outputs": [],
311 "prompt_number": 7
312 },
313 {
314 "cell_type": "markdown",
315 "metadata": {},
316 "source": [
261 317 "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."
262 318 ]
263 319 },
@@ -291,7 +347,7 b''
291 347 "language": "python",
292 348 "metadata": {},
293 349 "outputs": [],
294 "prompt_number": 7
350 "prompt_number": 8
295 351 },
296 352 {
297 353 "cell_type": "markdown",
@@ -313,7 +369,7 b''
313 369 "language": "python",
314 370 "metadata": {},
315 371 "outputs": [],
316 "prompt_number": 8
372 "prompt_number": 9
317 373 }
318 374 ],
319 375 "metadata": {}
General Comments 0
You need to be logged in to leave comments. Login now