Show More
@@ -1,775 +1,774 b'' | |||
|
1 | 1 | { |
|
2 | 2 | "cells": [ |
|
3 | 3 | { |
|
4 | 4 | "cell_type": "markdown", |
|
5 | 5 | "metadata": {}, |
|
6 | 6 | "source": [ |
|
7 | 7 | "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" |
|
8 | 8 | ] |
|
9 | 9 | }, |
|
10 | 10 | { |
|
11 | 11 | "cell_type": "code", |
|
12 | 12 | "execution_count": null, |
|
13 | 13 | "metadata": { |
|
14 | 14 | "collapsed": false |
|
15 | 15 | }, |
|
16 | 16 | "outputs": [], |
|
17 | 17 | "source": [ |
|
18 | 18 | "%%html\n", |
|
19 | 19 | "<style>\n", |
|
20 | 20 | ".example-container { background: #999999; padding: 2px; min-height: 100px; }\n", |
|
21 | 21 | ".example-container.sm { min-height: 50px; }\n", |
|
22 | 22 | ".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n", |
|
23 | 23 | ".example-box.med { width: 65px; height: 65px; } \n", |
|
24 | 24 | ".example-box.lrg { width: 80px; height: 80px; } \n", |
|
25 | 25 | "</style>" |
|
26 | 26 | ] |
|
27 | 27 | }, |
|
28 | 28 | { |
|
29 | 29 | "cell_type": "code", |
|
30 | 30 | "execution_count": null, |
|
31 | 31 | "metadata": { |
|
32 | 32 | "collapsed": false |
|
33 | 33 | }, |
|
34 | 34 | "outputs": [], |
|
35 | 35 | "source": [ |
|
36 | 36 | "from IPython.html import widgets\n", |
|
37 | 37 | "from IPython.display import display" |
|
38 | 38 | ] |
|
39 | 39 | }, |
|
40 | 40 | { |
|
41 | 41 | "cell_type": "markdown", |
|
42 | 42 | "metadata": { |
|
43 | 43 | "slideshow": { |
|
44 | 44 | "slide_type": "slide" |
|
45 | 45 | } |
|
46 | 46 | }, |
|
47 | 47 | "source": [ |
|
48 | 48 | "# Widget Styling" |
|
49 | 49 | ] |
|
50 | 50 | }, |
|
51 | 51 | { |
|
52 | 52 | "cell_type": "markdown", |
|
53 | 53 | "metadata": {}, |
|
54 | 54 | "source": [ |
|
55 | 55 | "## Basic styling" |
|
56 | 56 | ] |
|
57 | 57 | }, |
|
58 | 58 | { |
|
59 | 59 | "cell_type": "markdown", |
|
60 | 60 | "metadata": {}, |
|
61 | 61 | "source": [ |
|
62 | 62 | "The widgets distributed with IPython can be styled by setting the following traits:\n", |
|
63 | 63 | "\n", |
|
64 | 64 | "- width \n", |
|
65 | 65 | "- height \n", |
|
66 | 66 | "- fore_color \n", |
|
67 | 67 | "- back_color \n", |
|
68 | 68 | "- border_color \n", |
|
69 | 69 | "- border_width \n", |
|
70 | 70 | "- border_style \n", |
|
71 | 71 | "- font_style \n", |
|
72 | 72 | "- font_weight \n", |
|
73 | 73 | "- font_size \n", |
|
74 | 74 | "- font_family \n", |
|
75 | 75 | "\n", |
|
76 | 76 | "The example below shows how a `Button` widget can be styled:" |
|
77 | 77 | ] |
|
78 | 78 | }, |
|
79 | 79 | { |
|
80 | 80 | "cell_type": "code", |
|
81 | 81 | "execution_count": null, |
|
82 | 82 | "metadata": { |
|
83 | 83 | "collapsed": false |
|
84 | 84 | }, |
|
85 | 85 | "outputs": [], |
|
86 | 86 | "source": [ |
|
87 | 87 | "button = widgets.Button(\n", |
|
88 | 88 | " description='Hello World!',\n", |
|
89 | 89 | " width=100, # Integers are interpreted as pixel measurements.\n", |
|
90 | 90 | " height='2em', # em is valid HTML unit of measurement.\n", |
|
91 | 91 | " color='lime', # Colors can be set by name,\n", |
|
92 | 92 | " background_color='#0022FF', # and also by color code.\n", |
|
93 | 93 | " border_color='red')\n", |
|
94 | 94 | "display(button)" |
|
95 | 95 | ] |
|
96 | 96 | }, |
|
97 | 97 | { |
|
98 | 98 | "cell_type": "markdown", |
|
99 | 99 | "metadata": { |
|
100 | 100 | "slideshow": { |
|
101 | 101 | "slide_type": "slide" |
|
102 | 102 | } |
|
103 | 103 | }, |
|
104 | 104 | "source": [ |
|
105 | 105 | "## Parent/child relationships" |
|
106 | 106 | ] |
|
107 | 107 | }, |
|
108 | 108 | { |
|
109 | 109 | "cell_type": "markdown", |
|
110 | 110 | "metadata": {}, |
|
111 | 111 | "source": [ |
|
112 | 112 | "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." |
|
113 | 113 | ] |
|
114 | 114 | }, |
|
115 | 115 | { |
|
116 | 116 | "cell_type": "code", |
|
117 | 117 | "execution_count": null, |
|
118 | 118 | "metadata": { |
|
119 | 119 | "collapsed": false |
|
120 | 120 | }, |
|
121 | 121 | "outputs": [], |
|
122 | 122 | "source": [ |
|
123 | 123 | "from IPython.display import display\n", |
|
124 | 124 | "\n", |
|
125 | 125 | "float_range = widgets.FloatSlider()\n", |
|
126 | 126 | "string = widgets.Text(value='hi')\n", |
|
127 | 127 | "container = widgets.Box(children=[float_range, string])\n", |
|
128 | 128 | "\n", |
|
129 | 129 | "container.border_color = 'red'\n", |
|
130 | 130 | "container.border_style = 'dotted'\n", |
|
131 | 131 | "container.border_width = 3\n", |
|
132 | 132 | "display(container) # Displays the `container` and all of it's children." |
|
133 | 133 | ] |
|
134 | 134 | }, |
|
135 | 135 | { |
|
136 | 136 | "cell_type": "markdown", |
|
137 | 137 | "metadata": {}, |
|
138 | 138 | "source": [ |
|
139 | 139 | "### After the parent is displayed" |
|
140 | 140 | ] |
|
141 | 141 | }, |
|
142 | 142 | { |
|
143 | 143 | "cell_type": "markdown", |
|
144 | 144 | "metadata": { |
|
145 | 145 | "slideshow": { |
|
146 | 146 | "slide_type": "slide" |
|
147 | 147 | } |
|
148 | 148 | }, |
|
149 | 149 | "source": [ |
|
150 | 150 | "Children **can be added to parents** after the parent has been displayed. The **parent is responsible for rendering its children**." |
|
151 | 151 | ] |
|
152 | 152 | }, |
|
153 | 153 | { |
|
154 | 154 | "cell_type": "code", |
|
155 | 155 | "execution_count": null, |
|
156 | 156 | "metadata": { |
|
157 | 157 | "collapsed": false |
|
158 | 158 | }, |
|
159 | 159 | "outputs": [], |
|
160 | 160 | "source": [ |
|
161 | 161 | "container = widgets.Box()\n", |
|
162 | 162 | "container.border_color = 'red'\n", |
|
163 | 163 | "container.border_style = 'dotted'\n", |
|
164 | 164 | "container.border_width = 3\n", |
|
165 | 165 | "display(container)\n", |
|
166 | 166 | "\n", |
|
167 | 167 | "int_range = widgets.IntSlider()\n", |
|
168 | 168 | "container.children=[int_range]" |
|
169 | 169 | ] |
|
170 | 170 | }, |
|
171 | 171 | { |
|
172 | 172 | "cell_type": "markdown", |
|
173 | 173 | "metadata": { |
|
174 | 174 | "slideshow": { |
|
175 | 175 | "slide_type": "slide" |
|
176 | 176 | } |
|
177 | 177 | }, |
|
178 | 178 | "source": [ |
|
179 | 179 | "## Fancy boxes" |
|
180 | 180 | ] |
|
181 | 181 | }, |
|
182 | 182 | { |
|
183 | 183 | "cell_type": "markdown", |
|
184 | 184 | "metadata": {}, |
|
185 | 185 | "source": [ |
|
186 |
"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 |
|
|
186 | "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 can **call `set_title`**." | |
|
187 | 187 | ] |
|
188 | 188 | }, |
|
189 | 189 | { |
|
190 | 190 | "cell_type": "markdown", |
|
191 | 191 | "metadata": {}, |
|
192 | 192 | "source": [ |
|
193 | 193 | "### Accordion" |
|
194 | 194 | ] |
|
195 | 195 | }, |
|
196 | 196 | { |
|
197 | 197 | "cell_type": "code", |
|
198 | 198 | "execution_count": null, |
|
199 | 199 | "metadata": { |
|
200 | 200 | "collapsed": false |
|
201 | 201 | }, |
|
202 | 202 | "outputs": [], |
|
203 | 203 | "source": [ |
|
204 | 204 | "name1 = widgets.Text(description='Location:')\n", |
|
205 | 205 | "zip1 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", |
|
206 | 206 | "page1 = widgets.Box(children=[name1, zip1])\n", |
|
207 | 207 | "\n", |
|
208 | 208 | "name2 = widgets.Text(description='Location:')\n", |
|
209 | 209 | "zip2 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", |
|
210 | 210 | "page2 = widgets.Box(children=[name2, zip2])\n", |
|
211 | 211 | "\n", |
|
212 | 212 | "accord = widgets.Accordion(children=[page1, page2])\n", |
|
213 | 213 | "display(accord)\n", |
|
214 | 214 | "\n", |
|
215 | 215 | "accord.set_title(0, 'From')\n", |
|
216 | 216 | "accord.set_title(1, 'To')" |
|
217 | 217 | ] |
|
218 | 218 | }, |
|
219 | 219 | { |
|
220 | 220 | "cell_type": "markdown", |
|
221 | 221 | "metadata": { |
|
222 | 222 | "slideshow": { |
|
223 | 223 | "slide_type": "slide" |
|
224 | 224 | } |
|
225 | 225 | }, |
|
226 | 226 | "source": [ |
|
227 | 227 | "### TabWidget" |
|
228 | 228 | ] |
|
229 | 229 | }, |
|
230 | 230 | { |
|
231 | 231 | "cell_type": "code", |
|
232 | 232 | "execution_count": null, |
|
233 | 233 | "metadata": { |
|
234 | 234 | "collapsed": false |
|
235 | 235 | }, |
|
236 | 236 | "outputs": [], |
|
237 | 237 | "source": [ |
|
238 | 238 | "name = widgets.Text(description='Name:')\n", |
|
239 | 239 | "color = widgets.Dropdown(description='Color:', values=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])\n", |
|
240 | 240 | "page1 = widgets.Box(children=[name, color])\n", |
|
241 | 241 | "\n", |
|
242 | 242 | "age = widgets.IntSlider(description='Age:', min=0, max=120, value=50)\n", |
|
243 | 243 | "gender = widgets.RadioButtons(description='Gender:', values=['male', 'female'])\n", |
|
244 | 244 | "page2 = widgets.Box(children=[age, gender])\n", |
|
245 | 245 | "\n", |
|
246 | 246 | "tabs = widgets.Tab(children=[page1, page2])\n", |
|
247 | 247 | "display(tabs)\n", |
|
248 | 248 | "\n", |
|
249 | 249 | "tabs.set_title(0, 'Name')\n", |
|
250 | 250 | "tabs.set_title(1, 'Details')" |
|
251 | 251 | ] |
|
252 | 252 | }, |
|
253 | 253 | { |
|
254 | 254 | "cell_type": "markdown", |
|
255 | 255 | "metadata": { |
|
256 | 256 | "slideshow": { |
|
257 | 257 | "slide_type": "slide" |
|
258 | 258 | } |
|
259 | 259 | }, |
|
260 | 260 | "source": [ |
|
261 | 261 | "### Popup" |
|
262 | 262 | ] |
|
263 | 263 | }, |
|
264 | 264 | { |
|
265 | 265 | "cell_type": "markdown", |
|
266 | 266 | "metadata": {}, |
|
267 | 267 | "source": [ |
|
268 | 268 | "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**. " |
|
269 | 269 | ] |
|
270 | 270 | }, |
|
271 | 271 | { |
|
272 | 272 | "cell_type": "code", |
|
273 | 273 | "execution_count": null, |
|
274 | 274 | "metadata": { |
|
275 | 275 | "collapsed": false |
|
276 | 276 | }, |
|
277 | 277 | "outputs": [], |
|
278 | 278 | "source": [ |
|
279 | 279 | "counter = widgets.IntText(description='Counter:')\n", |
|
280 | 280 | "popup = widgets.Popup(children=[counter], description='Popup Demo', button_text='Popup Button')\n", |
|
281 | 281 | "display(popup)" |
|
282 | 282 | ] |
|
283 | 283 | }, |
|
284 | 284 | { |
|
285 | 285 | "cell_type": "code", |
|
286 | 286 | "execution_count": null, |
|
287 | 287 | "metadata": { |
|
288 | 288 | "collapsed": false |
|
289 | 289 | }, |
|
290 | 290 | "outputs": [], |
|
291 | 291 | "source": [ |
|
292 | 292 | "counter.value += 1" |
|
293 | 293 | ] |
|
294 | 294 | }, |
|
295 | 295 | { |
|
296 | 296 | "cell_type": "code", |
|
297 | 297 | "execution_count": null, |
|
298 | 298 | "metadata": { |
|
299 | 299 | "collapsed": false |
|
300 | 300 | }, |
|
301 | 301 | "outputs": [], |
|
302 | 302 | "source": [] |
|
303 | 303 | }, |
|
304 | 304 | { |
|
305 | 305 | "cell_type": "code", |
|
306 | 306 | "execution_count": null, |
|
307 | 307 | "metadata": { |
|
308 | 308 | "collapsed": false |
|
309 | 309 | }, |
|
310 | 310 | "outputs": [], |
|
311 | 311 | "source": [] |
|
312 | 312 | }, |
|
313 | 313 | { |
|
314 | 314 | "cell_type": "code", |
|
315 | 315 | "execution_count": null, |
|
316 | 316 | "metadata": { |
|
317 | 317 | "collapsed": false |
|
318 | 318 | }, |
|
319 | 319 | "outputs": [], |
|
320 | 320 | "source": [] |
|
321 | 321 | }, |
|
322 | 322 | { |
|
323 | 323 | "cell_type": "code", |
|
324 | 324 | "execution_count": null, |
|
325 | 325 | "metadata": { |
|
326 | 326 | "collapsed": false |
|
327 | 327 | }, |
|
328 | 328 | "outputs": [], |
|
329 | 329 | "source": [] |
|
330 | 330 | }, |
|
331 | 331 | { |
|
332 | 332 | "cell_type": "code", |
|
333 | 333 | "execution_count": null, |
|
334 | 334 | "metadata": { |
|
335 | 335 | "collapsed": false |
|
336 | 336 | }, |
|
337 | 337 | "outputs": [], |
|
338 | 338 | "source": [] |
|
339 | 339 | }, |
|
340 | 340 | { |
|
341 | 341 | "cell_type": "code", |
|
342 | 342 | "execution_count": null, |
|
343 | 343 | "metadata": { |
|
344 | 344 | "collapsed": false |
|
345 | 345 | }, |
|
346 | 346 | "outputs": [], |
|
347 | 347 | "source": [] |
|
348 | 348 | }, |
|
349 | 349 | { |
|
350 | 350 | "cell_type": "code", |
|
351 | 351 | "execution_count": null, |
|
352 | 352 | "metadata": { |
|
353 | 353 | "collapsed": false |
|
354 | 354 | }, |
|
355 | 355 | "outputs": [], |
|
356 | 356 | "source": [] |
|
357 | 357 | }, |
|
358 | 358 | { |
|
359 | 359 | "cell_type": "code", |
|
360 | 360 | "execution_count": null, |
|
361 | 361 | "metadata": { |
|
362 | 362 | "collapsed": false |
|
363 | 363 | }, |
|
364 | 364 | "outputs": [], |
|
365 | 365 | "source": [] |
|
366 | 366 | }, |
|
367 | 367 | { |
|
368 | 368 | "cell_type": "code", |
|
369 | 369 | "execution_count": null, |
|
370 | 370 | "metadata": { |
|
371 | 371 | "collapsed": false |
|
372 | 372 | }, |
|
373 | 373 | "outputs": [], |
|
374 | 374 | "source": [] |
|
375 | 375 | }, |
|
376 | 376 | { |
|
377 | 377 | "cell_type": "code", |
|
378 | 378 | "execution_count": null, |
|
379 | 379 | "metadata": { |
|
380 | 380 | "collapsed": false |
|
381 | 381 | }, |
|
382 | 382 | "outputs": [], |
|
383 | 383 | "source": [] |
|
384 | 384 | }, |
|
385 | 385 | { |
|
386 | 386 | "cell_type": "code", |
|
387 | 387 | "execution_count": null, |
|
388 | 388 | "metadata": { |
|
389 | 389 | "collapsed": false |
|
390 | 390 | }, |
|
391 | 391 | "outputs": [], |
|
392 | 392 | "source": [] |
|
393 | 393 | }, |
|
394 | 394 | { |
|
395 | 395 | "cell_type": "code", |
|
396 | 396 | "execution_count": null, |
|
397 | 397 | "metadata": { |
|
398 | 398 | "collapsed": false |
|
399 | 399 | }, |
|
400 | 400 | "outputs": [], |
|
401 | 401 | "source": [] |
|
402 | 402 | }, |
|
403 | 403 | { |
|
404 | 404 | "cell_type": "code", |
|
405 | 405 | "execution_count": null, |
|
406 | 406 | "metadata": { |
|
407 | 407 | "collapsed": false |
|
408 | 408 | }, |
|
409 | 409 | "outputs": [], |
|
410 | 410 | "source": [] |
|
411 | 411 | }, |
|
412 | 412 | { |
|
413 | 413 | "cell_type": "code", |
|
414 | 414 | "execution_count": null, |
|
415 | 415 | "metadata": { |
|
416 | 416 | "collapsed": false |
|
417 | 417 | }, |
|
418 | 418 | "outputs": [], |
|
419 | 419 | "source": [] |
|
420 | 420 | }, |
|
421 | 421 | { |
|
422 | 422 | "cell_type": "code", |
|
423 | 423 | "execution_count": null, |
|
424 | 424 | "metadata": { |
|
425 | 425 | "collapsed": false |
|
426 | 426 | }, |
|
427 | 427 | "outputs": [], |
|
428 | 428 | "source": [ |
|
429 | 429 | "counter.value += 1" |
|
430 | 430 | ] |
|
431 | 431 | }, |
|
432 | 432 | { |
|
433 | 433 | "cell_type": "code", |
|
434 | 434 | "execution_count": null, |
|
435 | 435 | "metadata": { |
|
436 | 436 | "collapsed": false |
|
437 | 437 | }, |
|
438 | 438 | "outputs": [], |
|
439 | 439 | "source": [ |
|
440 | 440 | "popup.close()" |
|
441 | 441 | ] |
|
442 | 442 | }, |
|
443 | 443 | { |
|
444 | 444 | "cell_type": "markdown", |
|
445 | 445 | "metadata": { |
|
446 | 446 | "slideshow": { |
|
447 | 447 | "slide_type": "slide" |
|
448 | 448 | } |
|
449 | 449 | }, |
|
450 | 450 | "source": [ |
|
451 | 451 | "# Alignment" |
|
452 | 452 | ] |
|
453 | 453 | }, |
|
454 | 454 | { |
|
455 | 455 | "cell_type": "markdown", |
|
456 | 456 | "metadata": {}, |
|
457 | 457 | "source": [ |
|
458 | 458 | "Most widgets have a **`description` attribute**, which allows a label for the widget to be defined.\n", |
|
459 | 459 | "The label of the widget **has a fixed minimum width**.\n", |
|
460 | 460 | "The text of the label is **always right aligned and the widget is left aligned**:" |
|
461 | 461 | ] |
|
462 | 462 | }, |
|
463 | 463 | { |
|
464 | 464 | "cell_type": "code", |
|
465 | 465 | "execution_count": null, |
|
466 | 466 | "metadata": { |
|
467 | 467 | "collapsed": false |
|
468 | 468 | }, |
|
469 | 469 | "outputs": [], |
|
470 | 470 | "source": [ |
|
471 | 471 | "display(widgets.Text(description=\"a:\"))\n", |
|
472 | 472 | "display(widgets.Text(description=\"aa:\"))\n", |
|
473 | 473 | "display(widgets.Text(description=\"aaa:\"))" |
|
474 | 474 | ] |
|
475 | 475 | }, |
|
476 | 476 | { |
|
477 | 477 | "cell_type": "markdown", |
|
478 | 478 | "metadata": { |
|
479 | 479 | "slideshow": { |
|
480 | 480 | "slide_type": "slide" |
|
481 | 481 | } |
|
482 | 482 | }, |
|
483 | 483 | "source": [ |
|
484 | 484 | "If a **label is longer** than the minimum width, the **widget is shifted to the right**:" |
|
485 | 485 | ] |
|
486 | 486 | }, |
|
487 | 487 | { |
|
488 | 488 | "cell_type": "code", |
|
489 | 489 | "execution_count": null, |
|
490 | 490 | "metadata": { |
|
491 | 491 | "collapsed": false |
|
492 | 492 | }, |
|
493 | 493 | "outputs": [], |
|
494 | 494 | "source": [ |
|
495 | 495 | "display(widgets.Text(description=\"a:\"))\n", |
|
496 | 496 | "display(widgets.Text(description=\"aa:\"))\n", |
|
497 | 497 | "display(widgets.Text(description=\"aaa:\"))\n", |
|
498 | 498 | "display(widgets.Text(description=\"aaaaaaaaaaaaaaaaaa:\"))" |
|
499 | 499 | ] |
|
500 | 500 | }, |
|
501 | 501 | { |
|
502 | 502 | "cell_type": "markdown", |
|
503 | 503 | "metadata": { |
|
504 | 504 | "slideshow": { |
|
505 | 505 | "slide_type": "slide" |
|
506 | 506 | } |
|
507 | 507 | }, |
|
508 | 508 | "source": [ |
|
509 | 509 | "If a `description` is **not set** for the widget, the **label is not displayed**:" |
|
510 | 510 | ] |
|
511 | 511 | }, |
|
512 | 512 | { |
|
513 | 513 | "cell_type": "code", |
|
514 | 514 | "execution_count": null, |
|
515 | 515 | "metadata": { |
|
516 | 516 | "collapsed": false |
|
517 | 517 | }, |
|
518 | 518 | "outputs": [], |
|
519 | 519 | "source": [ |
|
520 | 520 | "display(widgets.Text(description=\"a:\"))\n", |
|
521 | 521 | "display(widgets.Text(description=\"aa:\"))\n", |
|
522 | 522 | "display(widgets.Text(description=\"aaa:\"))\n", |
|
523 | 523 | "display(widgets.Text())" |
|
524 | 524 | ] |
|
525 | 525 | }, |
|
526 | 526 | { |
|
527 | 527 | "cell_type": "markdown", |
|
528 | 528 | "metadata": { |
|
529 | 529 | "slideshow": { |
|
530 | 530 | "slide_type": "slide" |
|
531 | 531 | } |
|
532 | 532 | }, |
|
533 | 533 | "source": [ |
|
534 | 534 | "## Flex boxes" |
|
535 | 535 | ] |
|
536 | 536 | }, |
|
537 | 537 | { |
|
538 | 538 | "cell_type": "markdown", |
|
539 | 539 | "metadata": {}, |
|
540 | 540 | "source": [ |
|
541 | 541 | "Widgets can be aligned using the `FlexBox`, `HBox`, and `VBox` widgets." |
|
542 | 542 | ] |
|
543 | 543 | }, |
|
544 | 544 | { |
|
545 | 545 | "cell_type": "markdown", |
|
546 | 546 | "metadata": { |
|
547 | 547 | "slideshow": { |
|
548 | 548 | "slide_type": "slide" |
|
549 | 549 | } |
|
550 | 550 | }, |
|
551 | 551 | "source": [ |
|
552 | 552 | "### Application to widgets" |
|
553 | 553 | ] |
|
554 | 554 | }, |
|
555 | 555 | { |
|
556 | 556 | "cell_type": "markdown", |
|
557 | 557 | "metadata": {}, |
|
558 | 558 | "source": [ |
|
559 | 559 | "Widgets display vertically by default:" |
|
560 | 560 | ] |
|
561 | 561 | }, |
|
562 | 562 | { |
|
563 | 563 | "cell_type": "code", |
|
564 | 564 | "execution_count": null, |
|
565 | 565 | "metadata": { |
|
566 | 566 | "collapsed": false |
|
567 | 567 | }, |
|
568 | 568 | "outputs": [], |
|
569 | 569 | "source": [ |
|
570 | 570 | "buttons = [widgets.Button(description=str(i)) for i in range(3)]\n", |
|
571 | 571 | "display(*buttons)" |
|
572 | 572 | ] |
|
573 | 573 | }, |
|
574 | 574 | { |
|
575 | 575 | "cell_type": "markdown", |
|
576 | 576 | "metadata": { |
|
577 | 577 | "slideshow": { |
|
578 | 578 | "slide_type": "slide" |
|
579 | 579 | } |
|
580 | 580 | }, |
|
581 | 581 | "source": [ |
|
582 | 582 | "### Using hbox" |
|
583 | 583 | ] |
|
584 | 584 | }, |
|
585 | 585 | { |
|
586 | 586 | "cell_type": "markdown", |
|
587 | 587 | "metadata": {}, |
|
588 | 588 | "source": [ |
|
589 | 589 | "To make widgets display horizontally, you need to **child them to a `HBox` widget**." |
|
590 | 590 | ] |
|
591 | 591 | }, |
|
592 | 592 | { |
|
593 | 593 | "cell_type": "code", |
|
594 | 594 | "execution_count": null, |
|
595 | 595 | "metadata": { |
|
596 | 596 | "collapsed": false |
|
597 | 597 | }, |
|
598 | 598 | "outputs": [], |
|
599 | 599 | "source": [ |
|
600 | 600 | "container = widgets.HBox(children=buttons)\n", |
|
601 | 601 | "display(container)" |
|
602 | 602 | ] |
|
603 | 603 | }, |
|
604 | 604 | { |
|
605 | 605 | "cell_type": "markdown", |
|
606 | 606 | "metadata": {}, |
|
607 | 607 | "source": [ |
|
608 | 608 | "By setting the width of the container to 100% and its `pack` to `center`, you can center the buttons." |
|
609 | 609 | ] |
|
610 | 610 | }, |
|
611 | 611 | { |
|
612 | 612 | "cell_type": "code", |
|
613 | 613 | "execution_count": null, |
|
614 | 614 | "metadata": { |
|
615 | 615 | "collapsed": false |
|
616 | 616 | }, |
|
617 | 617 | "outputs": [], |
|
618 | 618 | "source": [ |
|
619 | 619 | "container.width = '100%'\n", |
|
620 | 620 | "container.pack = 'center'" |
|
621 | 621 | ] |
|
622 | 622 | }, |
|
623 | 623 | { |
|
624 | 624 | "cell_type": "markdown", |
|
625 | 625 | "metadata": { |
|
626 | 626 | "slideshow": { |
|
627 | 627 | "slide_type": "slide" |
|
628 | 628 | } |
|
629 | 629 | }, |
|
630 | 630 | "source": [ |
|
631 | 631 | "## Visibility" |
|
632 | 632 | ] |
|
633 | 633 | }, |
|
634 | 634 | { |
|
635 | 635 | "cell_type": "markdown", |
|
636 | 636 | "metadata": {}, |
|
637 | 637 | "source": [ |
|
638 | 638 | "Sometimes it is necessary to **hide or show widgets** in place, **without having to re-display** the widget.\n", |
|
639 | 639 | "The `visible` property of widgets can be used to hide or show **widgets that have already been displayed** (as seen below). The `visible` property can be:\n", |
|
640 | 640 | "* `True` - the widget is displayed\n", |
|
641 | 641 | "* `False` - the widget is hidden, and the empty space where the widget would be is collapsed\n", |
|
642 | 642 | "* `None` - the widget is hidden, and the empty space where the widget would be is shown" |
|
643 | 643 | ] |
|
644 | 644 | }, |
|
645 | 645 | { |
|
646 | 646 | "cell_type": "code", |
|
647 | 647 | "execution_count": null, |
|
648 | 648 | "metadata": { |
|
649 | 649 | "collapsed": false |
|
650 | 650 | }, |
|
651 | 651 | "outputs": [], |
|
652 | 652 | "source": [ |
|
653 | 653 | "w1 = widgets.Latex(value=\"First line\")\n", |
|
654 | 654 | "w2 = widgets.Latex(value=\"Second line\")\n", |
|
655 | 655 | "w3 = widgets.Latex(value=\"Third line\")\n", |
|
656 | 656 | "display(w1, w2, w3)" |
|
657 | 657 | ] |
|
658 | 658 | }, |
|
659 | 659 | { |
|
660 | 660 | "cell_type": "code", |
|
661 | 661 | "execution_count": null, |
|
662 | 662 | "metadata": { |
|
663 | 663 | "collapsed": true |
|
664 | 664 | }, |
|
665 | 665 | "outputs": [], |
|
666 | 666 | "source": [ |
|
667 | 667 | "w2.visible=None" |
|
668 | 668 | ] |
|
669 | 669 | }, |
|
670 | 670 | { |
|
671 | 671 | "cell_type": "code", |
|
672 | 672 | "execution_count": null, |
|
673 | 673 | "metadata": { |
|
674 | 674 | "collapsed": false |
|
675 | 675 | }, |
|
676 | 676 | "outputs": [], |
|
677 | 677 | "source": [ |
|
678 | 678 | "w2.visible=False" |
|
679 | 679 | ] |
|
680 | 680 | }, |
|
681 | 681 | { |
|
682 | 682 | "cell_type": "code", |
|
683 | 683 | "execution_count": null, |
|
684 | 684 | "metadata": { |
|
685 | 685 | "collapsed": false |
|
686 | 686 | }, |
|
687 | 687 | "outputs": [], |
|
688 | 688 | "source": [ |
|
689 | 689 | "w2.visible=True" |
|
690 | 690 | ] |
|
691 | 691 | }, |
|
692 | 692 | { |
|
693 | 693 | "cell_type": "markdown", |
|
694 | 694 | "metadata": { |
|
695 | 695 | "slideshow": { |
|
696 | 696 | "slide_type": "slide" |
|
697 | 697 | } |
|
698 | 698 | }, |
|
699 | 699 | "source": [ |
|
700 | 700 | "### Another example" |
|
701 | 701 | ] |
|
702 | 702 | }, |
|
703 | 703 | { |
|
704 | 704 | "cell_type": "markdown", |
|
705 | 705 | "metadata": {}, |
|
706 | 706 | "source": [ |
|
707 | 707 | "In the example below, a form is rendered, which conditionally displays widgets depending on the state of other widgets. Try toggling the student checkbox." |
|
708 | 708 | ] |
|
709 | 709 | }, |
|
710 | 710 | { |
|
711 | 711 | "cell_type": "code", |
|
712 | 712 | "execution_count": null, |
|
713 | 713 | "metadata": { |
|
714 | 714 | "collapsed": false |
|
715 | 715 | }, |
|
716 | 716 | "outputs": [], |
|
717 | 717 | "source": [ |
|
718 | 718 | "form = widgets.VBox()\n", |
|
719 | 719 | "first = widgets.Text(description=\"First Name:\")\n", |
|
720 | 720 | "last = widgets.Text(description=\"Last Name:\")\n", |
|
721 | 721 | "\n", |
|
722 | 722 | "student = widgets.Checkbox(description=\"Student:\", value=False)\n", |
|
723 | 723 | "school_info = widgets.VBox(visible=False, children=[\n", |
|
724 | 724 | " widgets.Text(description=\"School:\"),\n", |
|
725 | 725 | " widgets.IntText(description=\"Grade:\", min=0, max=12)\n", |
|
726 | 726 | " ])\n", |
|
727 | 727 | "\n", |
|
728 | 728 | "pet = widgets.Text(description=\"Pet's Name:\")\n", |
|
729 | 729 | "form.children = [first, last, student, school_info, pet]\n", |
|
730 | 730 | "display(form)\n", |
|
731 | 731 | "\n", |
|
732 | 732 | "def on_student_toggle(name, value):\n", |
|
733 | 733 | " if value:\n", |
|
734 | 734 | " school_info.visible = True\n", |
|
735 | 735 | " else:\n", |
|
736 | 736 | " school_info.visible = False\n", |
|
737 | 737 | "student.on_trait_change(on_student_toggle, 'value')\n" |
|
738 | 738 | ] |
|
739 | 739 | }, |
|
740 | 740 | { |
|
741 | 741 | "cell_type": "markdown", |
|
742 | 742 | "metadata": {}, |
|
743 | 743 | "source": [ |
|
744 | 744 | "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" |
|
745 | 745 | ] |
|
746 | 746 | } |
|
747 | 747 | ], |
|
748 | 748 | "metadata": { |
|
749 | 749 | "cell_tags": [ |
|
750 | 750 | [ |
|
751 | 751 | "<None>", |
|
752 | 752 | null |
|
753 | 753 | ] |
|
754 | 754 | ], |
|
755 | 755 | "kernelspec": { |
|
756 | "display_name": "Python 2", | |
|
756 | "display_name": "IPython (Python 2)", | |
|
757 | 757 | "name": "python2" |
|
758 | 758 | }, |
|
759 | 759 | "language_info": { |
|
760 | 760 | "codemirror_mode": { |
|
761 | 761 | "name": "ipython", |
|
762 | 762 | "version": 2 |
|
763 | 763 | }, |
|
764 | 764 | "file_extension": ".py", |
|
765 | 765 | "mimetype": "text/x-python", |
|
766 | 766 | "name": "python", |
|
767 | 767 | "nbconvert_exporter": "python", |
|
768 | 768 | "pygments_lexer": "ipython2", |
|
769 |
"version": "2.7. |
|
|
770 |
} |
|
|
771 | "signature": "sha256:198630bf2c2eb00401b60a395ebc75049099864b62f0faaf416da02f9808c40b" | |
|
769 | "version": "2.7.6" | |
|
770 | } | |
|
772 | 771 | }, |
|
773 | 772 | "nbformat": 4, |
|
774 | 773 | "nbformat_minor": 0 |
|
775 | 774 | } No newline at end of file |
General Comments 0
You need to be logged in to leave comments.
Login now