Part 5 - Alignment.ipynb
330 lines
| 10.1 KiB
| text/plain
|
TextLexer
|
r14323 | { | |
"metadata": { | |||
|
r14334 | "cell_tags": [ | |
[ | |||
"<None>", | |||
null | |||
] | |||
], | |||
|
r14323 | "name": "" | |
}, | |||
"nbformat": 3, | |||
"nbformat_minor": 0, | |||
"worksheets": [ | |||
{ | |||
"cells": [ | |||
{ | |||
|
r14724 | "cell_type": "markdown", | |
"metadata": {}, | |||
"source": [ | |||
"[< Back to Part 4](Part 4 - Styles.ipynb) or [Index](index.ipynb)" | |||
] | |||
}, | |||
{ | |||
|
r14323 | "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": [ | |||
|
r14798 | "Most widgets have a `description` attribute, which allows a label for the widget to be defined.\n", | |
"The label of the widget has a fixed minimum width.\n", | |||
"The text of the label is always right aligned and the widget is left aligned:" | |||
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
|
r14834 | "display(widgets.TextWidget(description=\"a:\"))\n", | |
"display(widgets.TextWidget(description=\"aa:\"))\n", | |||
"display(widgets.TextWidget(description=\"aaa:\"))" | |||
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14834 | "prompt_number": 2 | |
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14798 | "If a label is longer than the minimum width, the widget is shifted to the right:" | |
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
|
r14834 | "display(widgets.TextWidget(description=\"a:\"))\n", | |
"display(widgets.TextWidget(description=\"aa:\"))\n", | |||
"display(widgets.TextWidget(description=\"aaa:\"))\n", | |||
"display(widgets.TextWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))" | |||
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14834 | "prompt_number": 3 | |
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14798 | "If a `description` is not set for the widget, the label is not displayed:" | |
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
|
r14834 | "display(widgets.TextWidget(description=\"a:\"))\n", | |
"display(widgets.TextWidget(description=\"aa:\"))\n", | |||
"display(widgets.TextWidget(description=\"aaa:\"))\n", | |||
"display(widgets.TextWidget())" | |||
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14834 | "prompt_number": 4 | |
|
r14323 | }, | |
{ | |||
"cell_type": "heading", | |||
"level": 1, | |||
"metadata": {}, | |||
"source": [ | |||
"Custom Alignment" | |||
] | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14798 | "`ContainerWidget`s allow for custom alignment of widgets.\n", | |
"The `hbox` and `vbox` CSS classes cause the `ContainerWidget` to horizontally or vertically align its children." | |||
|
r14323 | ] | |
}, | |||
{ | |||
"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", | |||
|
r14720 | " header = widgets.LatexWidget(value=title) \n", | |
" display(header)\n", | |||
" header.set_css({\n", | |||
" 'font-size': '30pt',\n", | |||
" 'margin-top': '40pt',\n", | |||
" 'margin-bottom': '20pt',\n", | |||
" })\n", | |||
" \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", | |||
|
r14720 | " components.append(widgets.LatexWidget(value=\"ABC\"[i]))\n", | |
|
r14323 | " components[i].set_css(child_style)\n", | |
|
r14505 | " container.children = components\n", | |
|
r14323 | " \n", | |
"container = make_container('VBox')\n", | |||
|
r14720 | "container.add_class('vbox')\n", | |
|
r14323 | "fill_container(container)\n", | |
"\n", | |||
"container = make_container('HBox')\n", | |||
|
r14720 | "container.add_class('hbox')\n", | |
|
r14323 | "fill_container(container)\n" | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14834 | "prompt_number": 5 | |
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14798 | "The `start`, `center`, and `end` classes adjust the alignment of the widgets on the axis where they are being rendered.\n", | |
"Below is an example of the different alignments." | |||
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
|
r14334 | "container = make_container('HBox Pack Start')\n", | |
|
r14720 | "container.add_class('hbox')\n", | |
"container.add_class('start')\n", | |||
|
r14323 | "fill_container(container)\n", | |
" \n", | |||
|
r14334 | "container = make_container('HBox Pack Center')\n", | |
|
r14720 | "container.add_class('hbox')\n", | |
"container.add_class('center')\n", | |||
|
r14323 | "fill_container(container)\n", | |
" \n", | |||
|
r14334 | "container = make_container('HBox Pack End')\n", | |
|
r14720 | "container.add_class('hbox')\n", | |
"container.add_class('end')\n", | |||
|
r14323 | "fill_container(container)" | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 6 | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14724 | "The `box-flex0`, `box-flex1`, and `box-flex2` DOM classes modify the container's flexibility. Changing a container flexibility affects how and if the container will occupy the remaining space. Applying `box-flex0` has the same result as not applying flex. Below is an example of different flex configurations. The number on the boxes correspond to the applied flex." | |
|
r14336 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"def fill_container(container, flexes):\n", | |||
" components = []\n", | |||
" for i in range(len(flexes)):\n", | |||
|
r14720 | " components.append(widgets.ContainerWidget())\n", | |
|
r14336 | " components[i].set_css(child_style)\n", | |
" \n", | |||
|
r14720 | " label = widgets.LatexWidget(value=str(flexes[i]))\n", | |
" components[i].children = [label]\n", | |||
" container.children = components\n", | |||
|
r14336 | " \n", | |
|
r14720 | " for i in range(len(flexes)):\n", | |
|
r14336 | " if flexes[i] == 0:\n", | |
|
r14720 | " components[i].add_class('box-flex0')\n", | |
|
r14336 | " elif flexes[i] == 1:\n", | |
|
r14720 | " components[i].add_class('box-flex1')\n", | |
|
r14336 | " elif flexes[i] == 2:\n", | |
|
r14720 | " components[i].add_class('box-flex2')\n", | |
|
r14336 | " \n", | |
"container = make_container('Different Flex Configurations')\n", | |||
|
r14720 | "container.add_class('hbox')\n", | |
|
r14336 | "fill_container(container, [0, 0, 0])\n", | |
" \n", | |||
"container = make_container('')\n", | |||
|
r14720 | "container.add_class('hbox')\n", | |
|
r14336 | "fill_container(container, [0, 0, 1])\n", | |
" \n", | |||
"container = make_container('')\n", | |||
|
r14720 | "container.add_class('hbox')\n", | |
|
r14336 | "fill_container(container, [0, 1, 1])\n", | |
" \n", | |||
"container = make_container('')\n", | |||
|
r14720 | "container.add_class('hbox')\n", | |
|
r14336 | "fill_container(container, [0, 2, 2])\n", | |
" \n", | |||
"container = make_container('')\n", | |||
|
r14720 | "container.add_class('hbox')\n", | |
|
r14336 | "fill_container(container, [0, 1, 2])\n", | |
" \n", | |||
"container = make_container('')\n", | |||
|
r14720 | "container.add_class('hbox')\n", | |
|
r14336 | "fill_container(container, [1, 1, 2])" | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14720 | "prompt_number": 7 | |
|
r14336 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14724 | "The `align_start`, `align_center`, and `align_end` DOM classes 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." | |
|
r14334 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"def fill_container(container):\n", | |||
" components = []\n", | |||
" for i in range(3):\n", | |||
|
r14720 | " components.append(widgets.LatexWidget(parent=container, value=\"ABC\"[i]))\n", | |
|
r14334 | " components[i].set_css(child_style)\n", | |
" components[i].set_css('height', str((i+1) * 50) + 'px')\n", | |||
|
r14505 | " container.children = components\n", | |
|
r14334 | "\n", | |
"container = make_container('HBox Align Start')\n", | |||
|
r14720 | "container.add_class(\"hbox\")\n", | |
"container.add_class(\"align-start\")\n", | |||
|
r14334 | "fill_container(container)\n", | |
" \n", | |||
"container = make_container('HBox Align Center')\n", | |||
|
r14720 | "container.add_class(\"hbox\")\n", | |
"container.add_class(\"align-center\")\n", | |||
|
r14334 | "fill_container(container)\n", | |
" \n", | |||
"container = make_container('HBox Align End')\n", | |||
|
r14720 | "container.add_class(\"hbox\")\n", | |
"container.add_class(\"align-end\")\n", | |||
|
r14334 | "fill_container(container)" | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14720 | "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", | |||
|
r14720 | "container.children=[widgets.FloatSliderWidget(orientation='vertical', description=str(i+1), value=50.0) \n", | |
|
r14505 | " for i in range(15)]\n", | |
|
r14720 | "display(container)\n", | |
"container.add_class('hbox')" | |||
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14720 | "prompt_number": 9 | |
|
r14724 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"In [Part 6](Part 6 - Custom Widget.ipynb) of this [series](index.ipynb), you will learn how to create your own custom widget." | |||
] | |||
|
r14323 | } | |
], | |||
"metadata": {} | |||
} | |||
] | |||
} |