Show More
Widget Styling.ipynb
736 lines
| 17.5 KiB
| text/plain
|
TextLexer
Jonathan Frederic
|
r14323 | { | |
"metadata": { | |||
Jonathan Frederic
|
r14342 | "cell_tags": [ | |
[ | |||
"<None>", | |||
null | |||
] | |||
], | |||
Jonathan Frederic
|
r17726 | "kernelspec": { | |
"codemirror_mode": { | |||
"name": "python", | |||
"version": 2 | |||
}, | |||
"display_name": "Python 2", | |||
"language": "python", | |||
"name": "python2" | |||
}, | |||
Brian E. Granger
|
r16098 | "name": "", | |
Jonathan Frederic
|
r17946 | "signature": "sha256:8bb091be85fd5e7f76082b1b4b98cddec92a856334935ac2c702fe5ec03f6eff" | |
Jonathan Frederic
|
r14323 | }, | |
"nbformat": 3, | |||
"nbformat_minor": 0, | |||
"worksheets": [ | |||
{ | |||
"cells": [ | |||
{ | |||
Jonathan Frederic
|
r17501 | "cell_type": "markdown", | |
"metadata": {}, | |||
"source": [ | |||
"[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" | |||
] | |||
}, | |||
{ | |||
Jonathan Frederic
|
r14323 | "cell_type": "code", | |
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17491 | "%%html\n", | |
"<style>\n", | |||
".example-container { background: #999999; padding: 2px; min-height: 100px; }\n", | |||
".example-container.sm { min-height: 50px; }\n", | |||
".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n", | |||
".example-box.med { width: 65px; height: 65px; } \n", | |||
".example-box.lrg { width: 80px; height: 80px; } \n", | |||
"</style>" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"from IPython.html import widgets\n", | |||
Jonathan Frederic
|
r17726 | "from IPython.display import display" | |
Jonathan Frederic
|
r17491 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
Jonathan Frederic
|
r17509 | "cell_type": "heading", | |
Jonathan Frederic
|
r17726 | "level": 1, | |
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "Widget Styling" | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
Jonathan Frederic
|
r17509 | "cell_type": "heading", | |
Jonathan Frederic
|
r17726 | "level": 2, | |
Jonathan Frederic
|
r17491 | "metadata": {}, | |
Jonathan Frederic
|
r17509 | "source": [ | |
Jonathan Frederic
|
r17726 | "Basic styling" | |
Jonathan Frederic
|
r17509 | ] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "The widgets distributed with IPython can be styled by setting the following traits:\n", | |
"\n", | |||
"- width \n", | |||
"- height \n", | |||
"- fore_color \n", | |||
"- back_color \n", | |||
"- border_color \n", | |||
"- border_width \n", | |||
"- border_style \n", | |||
"- font_style \n", | |||
"- font_weight \n", | |||
"- font_size \n", | |||
"- font_family \n", | |||
"\n", | |||
"The example below shows how a `Button` widget can be styled:" | |||
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "button = widgets.Button(\n", | |
" description='Hello World!',\n", | |||
" width=100, # Integers are interpreted as pixel measurements.\n", | |||
" height='2em', # em is valid HTML unit of measurement.\n", | |||
Jonathan Frederic
|
r17946 | " color='lime', # Colors can be set by name,\n", | |
" background_color='#0022FF', # and also by color code.\n", | |||
Jonathan Frederic
|
r17726 | " border_color='red')\n", | |
"display(button)" | |||
Jonathan Frederic
|
r17491 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "heading", | |||
Jonathan Frederic
|
r17501 | "level": 2, | |
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r17491 | "source": [ | |
Jonathan Frederic
|
r17501 | "Parent/child relationships" | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "To display widget A inside widget B, widget A must be a child of widget B. Widgets that can contain other widgets have a **`children` attribute**. This attribute can be **set via a keyword argument** in the widget's constructor **or after construction**. Calling display on an **object with children automatically displays those children**, too." | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"from IPython.display import display\n", | |||
"\n", | |||
Jonathan Frederic
|
r17726 | "float_range = widgets.FloatSlider()\n", | |
"string = widgets.Text(value='hi')\n", | |||
"container = widgets.Box(children=[float_range, string])\n", | |||
Jonathan Frederic
|
r17491 | "\n", | |
Jonathan Frederic
|
r17726 | "container.border_color = 'red'\n", | |
"container.border_style = 'dotted'\n", | |||
"container.border_width = 3\n", | |||
Jonathan Frederic
|
r17491 | "display(container) # Displays the `container` and all of it's children." | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17510 | }, | |
{ | |||
"cell_type": "heading", | |||
"level": 3, | |||
"metadata": {}, | |||
"source": [ | |||
"After the parent is displayed" | |||
] | |||
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "markdown", | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r17491 | "source": [ | |
Jonathan Frederic
|
r17509 | "Children **can be added to parents** after the parent has been displayed. The **parent is responsible for rendering its children**." | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "container = widgets.Box()\n", | |
"container.border_color = 'red'\n", | |||
"container.border_style = 'dotted'\n", | |||
"container.border_width = 3\n", | |||
Jonathan Frederic
|
r17491 | "display(container)\n", | |
"\n", | |||
Jonathan Frederic
|
r17726 | "int_range = widgets.IntSlider()\n", | |
Jonathan Frederic
|
r17491 | "container.children=[int_range]" | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "heading", | |||
"level": 2, | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r17491 | "source": [ | |
Jonathan Frederic
|
r17726 | "Fancy boxes" | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "If you need to display a more complicated set of widgets, there are **specialized containers** that you can use. To display **multiple sets of widgets**, you can use an **`Accordion` or a `Tab` in combination with one `Box` per set of widgets** (as seen below). The \"pages\" of these widgets are their children. To set the titles of the pages, one must **call `set_title` after the widget has been displayed**." | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "heading", | |||
"level": 3, | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "Accordion" | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "name1 = widgets.Text(description='Location:')\n", | |
"zip1 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", | |||
"page1 = widgets.Box(children=[name1, zip1])\n", | |||
Jonathan Frederic
|
r17491 | "\n", | |
Jonathan Frederic
|
r17726 | "name2 = widgets.Text(description='Location:')\n", | |
"zip2 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", | |||
"page2 = widgets.Box(children=[name2, zip2])\n", | |||
Jonathan Frederic
|
r17491 | "\n", | |
Jonathan Frederic
|
r17726 | "accord = widgets.Accordion(children=[page1, page2])\n", | |
Jonathan Frederic
|
r17491 | "display(accord)\n", | |
"\n", | |||
"accord.set_title(0, 'From')\n", | |||
"accord.set_title(1, 'To')" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "heading", | |||
"level": 3, | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r17491 | "source": [ | |
"TabWidget" | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "name = widgets.Text(description='Name:')\n", | |
"color = widgets.Dropdown(description='Color:', values=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])\n", | |||
"page1 = widgets.Box(children=[name, color])\n", | |||
Jonathan Frederic
|
r17491 | "\n", | |
Jonathan Frederic
|
r17726 | "age = widgets.IntSlider(description='Age:', min=0, max=120, value=50)\n", | |
"gender = widgets.RadioButtons(description='Gender:', values=['male', 'female'])\n", | |||
"page2 = widgets.Box(children=[age, gender])\n", | |||
Jonathan Frederic
|
r17491 | "\n", | |
Jonathan Frederic
|
r17726 | "tabs = widgets.Tab(children=[page1, page2])\n", | |
Jonathan Frederic
|
r17491 | "display(tabs)\n", | |
"\n", | |||
"tabs.set_title(0, 'Name')\n", | |||
"tabs.set_title(1, 'Details')" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "heading", | |||
"level": 3, | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r17491 | "source": [ | |
Jonathan Frederic
|
r17726 | "Popup" | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "Unlike the other two special containers, the `Popup` is only **designed to display one set of widgets**. The `Popup` can be used to **display widgets outside of the widget area**. " | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "counter = widgets.IntText(description='Counter:')\n", | |
"popup = widgets.Popup(children=[counter], description='Popup Demo', button_text='Popup Button')\n", | |||
Jonathan Frederic
|
r17491 | "display(popup)" | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"counter.value += 1" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"counter.value += 1" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"popup.close()" | |||
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "heading", | |||
"level": 1, | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r14323 | "source": [ | |
Jonathan Frederic
|
r17491 | "Alignment" | |
Jonathan Frederic
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17509 | "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**:" | |||
Jonathan Frederic
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "display(widgets.Text(description=\"a:\"))\n", | |
"display(widgets.Text(description=\"aa:\"))\n", | |||
"display(widgets.Text(description=\"aaa:\"))" | |||
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r14323 | "source": [ | |
Jonathan Frederic
|
r17509 | "If a **label is longer** than the minimum width, the **widget is shifted to the right**:" | |
Jonathan Frederic
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "display(widgets.Text(description=\"a:\"))\n", | |
"display(widgets.Text(description=\"aa:\"))\n", | |||
"display(widgets.Text(description=\"aaa:\"))\n", | |||
"display(widgets.Text(description=\"aaaaaaaaaaaaaaaaaa:\"))" | |||
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r14323 | "source": [ | |
Jonathan Frederic
|
r17509 | "If a `description` is **not set** for the widget, the **label is not displayed**:" | |
Jonathan Frederic
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "display(widgets.Text(description=\"a:\"))\n", | |
"display(widgets.Text(description=\"aa:\"))\n", | |||
"display(widgets.Text(description=\"aaa:\"))\n", | |||
"display(widgets.Text())" | |||
Jonathan Frederic
|
r17491 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "heading", | |||
"level": 2, | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r17491 | "source": [ | |
Jonathan Frederic
|
r17726 | "Flex boxes" | |
Jonathan Frederic
|
r17510 | ] | |
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "Widgets can be aligned using the `FlexBox`, `HBox`, and `VBox` widgets." | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "heading", | |||
"level": 3, | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r17491 | "source": [ | |
"Application to widgets" | |||
] | |||
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "Widgets display vertically by default:" | |
Jonathan Frederic
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "buttons = [widgets.Button(description=str(i)) for i in range(3)]\n", | |
"display(*buttons)" | |||
Jonathan Frederic
|
r17491 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
Jonathan Frederic
|
r17509 | "cell_type": "heading", | |
"level": 3, | |||
"metadata": { | |||
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
"source": [ | |||
"Using hbox" | |||
] | |||
}, | |||
{ | |||
Jonathan Frederic
|
r17491 | "cell_type": "markdown", | |
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "To make widgets display horizontally, you need to **child them to a `HBox` widget**." | |
Jonathan Frederic
|
r17491 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "container = widgets.HBox(children=buttons)\n", | |
"display(container)" | |||
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17726 | "By setting the width of the container to 100% and its `pack` to `center`, you can center the buttons." | |
Jonathan Frederic
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "container.width = '100%'\n", | |
"container.pack = 'center'" | |||
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "heading", | |||
"level": 2, | |||
Jonathan Frederic
|
r17509 | "metadata": { | |
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
Jonathan Frederic
|
r17491 | "source": [ | |
"Visibility" | |||
] | |||
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17509 | "Sometimes it is necessary to **hide or show widgets** in place, **without having to re-display** the widget.\n", | |
"The `visibility` property of widgets can be used to hide or show **widgets that have already been displayed** (as seen below)." | |||
Jonathan Frederic
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "string = widgets.Latex(value=\"Hello World!\")\n", | |
Jonathan Frederic
|
r17491 | "display(string) " | |
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"string.visible=False" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"string.visible=True" | |||
Jonathan Frederic
|
r14323 | ], | |
Jonathan Frederic
|
r17491 | "language": "python", | |
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r14323 | }, | |
{ | |||
Jonathan Frederic
|
r17509 | "cell_type": "heading", | |
"level": 3, | |||
"metadata": { | |||
"slideshow": { | |||
"slide_type": "slide" | |||
} | |||
}, | |||
"source": [ | |||
"Another example" | |||
] | |||
}, | |||
{ | |||
Jonathan Frederic
|
r14323 | "cell_type": "markdown", | |
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17491 | "In the example below, a form is rendered, which conditionally displays widgets depending on the state of other widgets. Try toggling the student checkbox." | |
Jonathan Frederic
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jonathan Frederic
|
r17726 | "form = widgets.VBox()\n", | |
"first = widgets.Text(description=\"First Name:\")\n", | |||
"last = widgets.Text(description=\"Last Name:\")\n", | |||
Jonathan Frederic
|
r17491 | "\n", | |
Jonathan Frederic
|
r17726 | "student = widgets.Checkbox(description=\"Student:\", value=False)\n", | |
"school_info = widgets.VBox(visible=False, children=[\n", | |||
" widgets.Text(description=\"School:\"),\n", | |||
" widgets.IntText(description=\"Grade:\", min=0, max=12)\n", | |||
Jonathan Frederic
|
r17491 | " ])\n", | |
Jonathan Frederic
|
r14323 | "\n", | |
Jonathan Frederic
|
r17726 | "pet = widgets.Text(description=\"Pet's Name:\")\n", | |
Jonathan Frederic
|
r17491 | "form.children = [first, last, student, school_info, pet]\n", | |
"display(form)\n", | |||
Jonathan Frederic
|
r14323 | "\n", | |
Jonathan Frederic
|
r17491 | "def on_student_toggle(name, value):\n", | |
" if value:\n", | |||
" school_info.visible = True\n", | |||
" else:\n", | |||
" school_info.visible = False\n", | |||
"student.on_trait_change(on_student_toggle, 'value')\n" | |||
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r17515 | "outputs": [] | |
Jonathan Frederic
|
r17491 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
Jonathan Frederic
|
r17501 | "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" | |
Jonathan Frederic
|
r17491 | ] | |
Jonathan Frederic
|
r14323 | } | |
], | |||
"metadata": {} | |||
} | |||
] | |||
} |