examples/Interactive Widgets/Widget Alignment.ipynb

{
 "metadata": {
  "cell_tags": [
   [
    "<None>",
    null
   ]
  ],
  "name": "",
  "signature": "sha256:19f2a57c9ac75d472a9e403515009613fac3fbc733219f7fd4f39a0616ca619f"
 },
 "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"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Alignment"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "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:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(widgets.TextWidget(description=\"a:\"))\n",
      "display(widgets.TextWidget(description=\"aa:\"))\n",
      "display(widgets.TextWidget(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:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(widgets.TextWidget(description=\"a:\"))\n",
      "display(widgets.TextWidget(description=\"aa:\"))\n",
      "display(widgets.TextWidget(description=\"aaa:\"))\n",
      "display(widgets.TextWidget(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:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(widgets.TextWidget(description=\"a:\"))\n",
      "display(widgets.TextWidget(description=\"aa:\"))\n",
      "display(widgets.TextWidget(description=\"aaa:\"))\n",
      "display(widgets.TextWidget())"
     ],
     "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.\n",
      "The `hbox` and `vbox` CSS classes cause the `ContainerWidget` to horizontally or vertically align its children."
     ]
    },
    {
     "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",
      "    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",
      "    container = widgets.ContainerWidget()\n",
      "    container.set_css({\n",
      "        'background': '#999999',\n",
      "        'width': '100%',\n",
      "    })\n",
      "    display(container)\n",
      "    return container\n",
      "\n",
      "def fill_container(container):\n",
      "    components = []\n",
      "    for i in range(3):\n",
      "        components.append(widgets.LatexWidget(value=\"ABC\"[i]))\n",
      "        components[i].set_css(child_style)\n",
      "    container.children = components\n",
      "    \n",
      "container = make_container('VBox')\n",
      "container.add_class('vbox')\n",
      "fill_container(container)\n",
      "\n",
      "container = make_container('HBox')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "fill_container(container)\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "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."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "container = make_container('HBox Pack Start')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "container.add_class('start')\n",
      "fill_container(container)\n",
      "    \n",
      "container = make_container('HBox Pack Center')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "container.add_class('center')\n",
      "fill_container(container)\n",
      "    \n",
      "container = make_container('HBox Pack End')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "container.add_class('end')\n",
      "fill_container(container)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 6
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "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."
     ]
    },
    {
     "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())\n",
      "        components[i].set_css(child_style)\n",
      "        \n",
      "        label = widgets.LatexWidget(value=str(flexes[i]))\n",
      "        components[i].children = [label]\n",
      "    container.children = components\n",
      "        \n",
      "    for i in range(len(flexes)):\n",
      "        if flexes[i] == 0:\n",
      "            components[i].add_class('box-flex0')\n",
      "        elif flexes[i] == 1:\n",
      "            components[i].add_class('box-flex1')\n",
      "        elif flexes[i] == 2:\n",
      "            components[i].add_class('box-flex2')\n",
      "        \n",
      "container = make_container('Different Flex Configurations')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "fill_container(container, [0, 0, 0])\n",
      "        \n",
      "container = make_container('')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "fill_container(container, [0, 0, 1])\n",
      "        \n",
      "container = make_container('')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "fill_container(container, [0, 1, 1])\n",
      "        \n",
      "container = make_container('')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "fill_container(container, [0, 2, 2])\n",
      "        \n",
      "container = make_container('')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "fill_container(container, [0, 1, 2])\n",
      "        \n",
      "container = make_container('')\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "fill_container(container, [1, 1, 2])"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 7
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "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."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def fill_container(container):\n",
      "    components = []\n",
      "    for i in range(3):\n",
      "        components.append(widgets.LatexWidget(parent=container, value=\"ABC\"[i]))\n",
      "        components[i].set_css(child_style)\n",
      "        components[i].set_css('height', str((i+1) * 50) + 'px')\n",
      "    container.children = components\n",
      "\n",
      "container = make_container('HBox Align Start')\n",
      "container.remove_class('vbox')\n",
      "container.add_class(\"hbox\")\n",
      "container.add_class(\"align-start\")\n",
      "fill_container(container)\n",
      "    \n",
      "container = make_container('HBox Align Center')\n",
      "container.remove_class('vbox')\n",
      "container.add_class(\"hbox\")\n",
      "container.add_class(\"align-center\")\n",
      "fill_container(container)\n",
      "    \n",
      "container = make_container('HBox Align End')\n",
      "container.remove_class('vbox')\n",
      "container.add_class(\"hbox\")\n",
      "container.add_class(\"align-end\")\n",
      "fill_container(container)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 8
    },
    {
     "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."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "container = widgets.ContainerWidget()\n",
      "container.children=[widgets.FloatSliderWidget(orientation='vertical', description=str(i+1), value=50.0) \n",
      "                    for i in range(15)]\n",
      "display(container)\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 9
    }
   ],
   "metadata": {}
  }
 ]
}