Skip to content

Commit 750ff97

Browse files
mbektasmbektas
committed
small enhancements
1 parent 7dfb948 commit 750ff97

File tree

1 file changed

+17
-26
lines changed

1 file changed

+17
-26
lines changed

‎notebooks/03.Layout-and-Styling/03.01-widget-layout-and-styling.ipynb

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
{
22
"cells": [
3-
{
4-
"cell_type": "markdown",
5-
"metadata": {},
6-
"source": [
7-
"<!--NAVIGATION-->\n",
8-
"< [Contents](03.00-layout-and-styling-overview.ipynb) | [*OPTIONAL* - Widget label styling](03.02-OPTIONAL-widget-label-styling.ipynb) >"
9-
]
10-
},
113
{
124
"cell_type": "markdown",
135
"metadata": {},
@@ -23,15 +15,13 @@
2315
"cell_type": "markdown",
2416
"metadata": {},
2517
"source": [
26-
"## The `layout` attribute.\n",
18+
"## The `layout` attribute\n",
2719
"\n",
2820
"Jupyter interactive widgets have a `layout` attribute exposing a number of CSS properties that impact how widgets are laid out.\n",
2921
"\n",
30-
"### Exposed CSS properties\n",
22+
"### CSS properties exposed with `layout` attribute\n",
3123
"\n",
32-
"<div class=\"alert alert-info\" style=\"margin: 20px\">\n",
3324
"The following properties map to the values of the CSS properties of the same name (underscores being replaced with dashes), applied to the top DOM elements of the corresponding widget.\n",
34-
"</div>\n",
3525
"\n",
3626
"\n",
3727
"#### Sizes\n",
@@ -64,7 +54,7 @@
6454
"- `bottom`\n",
6555
"- `right`\n",
6656
"\n",
67-
"#### Image/media\n",
57+
"#### Image / media\n",
6858
"\n",
6959
"- `object_fit`\n",
7060
"- `object_position`\n",
@@ -189,7 +179,7 @@
189179
"metadata": {},
190180
"outputs": [],
191181
"source": [
192-
"b2.style.button_color = 'yellow'"
182+
"b2.style.button_color = 'orange'"
193183
]
194184
},
195185
{
@@ -239,8 +229,8 @@
239229
"outputs": [],
240230
"source": [
241231
"from ipywidgets import IntSlider\n",
242-
"s1 = IntSlider(description='Blue handle')\n",
243-
"s1.style.handle_color = 'lightblue'\n",
232+
"s1 = IntSlider(description='Red handle')\n",
233+
"s1.style.handle_color = 'red'\n",
244234
"s1"
245235
]
246236
},
@@ -349,6 +339,7 @@
349339
" \"\"\"Displays multiple widgets horizontally using the flexible box model.\"\"\"\n",
350340
" box = Box(*pargs, **kwargs)\n",
351341
" box.layout.display = 'flex'\n",
342+
" box.layout.flex_flow = 'row'\n",
352343
" box.layout.align_items = 'stretch'\n",
353344
" return box\n",
354345
"```\n",
@@ -380,7 +371,7 @@
380371
"source": [
381372
"from ipywidgets import Layout, Button, Box\n",
382373
"\n",
383-
"items_layout = Layout(width='auto') # override the default width of the button to 'auto' to let the button grow\n",
374+
"items_layout = Layout(width='auto') # override the default width of the button to 'auto' to let the button grow\n",
384375
"\n",
385376
"box_layout = Layout(display='flex',\n",
386377
" flex_flow='column', \n",
@@ -410,9 +401,9 @@
410401
"from ipywidgets import Layout, Button, HBox\n",
411402
"\n",
412403
"items = [\n",
413-
" Button(description='weight=1; 0%', layout=Layout(flex='1 1 0%', width='auto'), button_style='danger'),\n",
414-
" Button(description='weight=3; 0%', layout=Layout(flex='3 1 0%', width='auto'), button_style='danger'),\n",
415-
" Button(description='weight=1; 0%', layout=Layout(flex='1 1 0%', width='auto'), button_style='danger'),\n",
404+
" Button(description='weight=1', layout=Layout(flex='1 1 0%', width='auto'), button_style='danger'),\n",
405+
" Button(description='weight=3', layout=Layout(flex='3 1 0%', width='auto'), button_style='danger'),\n",
406+
" Button(description='weight=1', layout=Layout(flex='1 1 0%', width='auto'), button_style='danger'),\n",
416407
"]\n",
417408
"box_layout = Layout(align_items='stretch', width='70%')\n",
418409
"HBox(children=items, layout=box_layout)"
@@ -737,7 +728,7 @@
737728
"source": [
738729
"from ipywidgets import Layout, Button, Box\n",
739730
"\n",
740-
"items_layout = Layout(width='auto') # override the default width of the button to 'auto' to let the button grow\n",
731+
"items_layout = Layout(width='auto') # override the default width of the button to 'auto' to let the button grow\n",
741732
"\n",
742733
"box_layout = Layout(display='flex',\n",
743734
" flex_flow='column', \n",
@@ -1430,15 +1421,15 @@
14301421
" scatt = bq.Scatter(x=data[:, j], y=data[:, i], scales={'x': sc_x, 'y': sc_y})\n",
14311422
"\n",
14321423
" gs[i, j] = bq.Figure(marks=[scatt], layout=Layout(width='auto', height='auto'),\n",
1433-
" fig_margin=dict(top=5, bottom=5, left=5, right=5), background_style={'fill':'#f5f5ff'})\n",
1424+
" fig_margin=dict(top=5, bottom=5, left=5, right=5), background_style={'fill':'#e5e5ff'})\n",
14341425
" else:\n",
14351426
" sc_x = scales_x[j]\n",
14361427
" sc_y = bq.LinearScale()\n",
14371428
" \n",
14381429
" hist = bq.Hist(sample=data[:,i], scales={'sample': sc_x, 'count': sc_y})\n",
14391430
" \n",
14401431
" gs[i, j] = bq.Figure(marks=[hist], layout=Layout(width='auto', height='auto'),\n",
1441-
" fig_margin=dict(top=5, bottom=5, left=5, right=5), background_style={'fill':'#f5f5ff'})\n",
1432+
" fig_margin=dict(top=5, bottom=5, left=5, right=5), background_style={'fill':'#e5e5ff'})\n",
14421433
"gs"
14431434
]
14441435
},
@@ -1534,13 +1525,13 @@
15341525
" style=ButtonStyle(button_color='lightblue'))\n",
15351526
"main = Button(description='Main',\n",
15361527
" layout=Layout(width='auto', height='auto', grid_area='main'),\n",
1537-
" style=ButtonStyle(button_color='moccasin'))\n",
1528+
" style=ButtonStyle(button_color='lightgray'))\n",
15381529
"sidebar = Button(description='Sidebar',\n",
15391530
" layout=Layout(width='auto', height='auto', grid_area='sidebar'),\n",
15401531
" style=ButtonStyle(button_color='salmon'))\n",
15411532
"footer = Button(description='Footer',\n",
15421533
" layout=Layout(width='auto', height='auto', grid_area='footer'),\n",
1543-
" style=ButtonStyle(button_color='olive'))\n",
1534+
" style=ButtonStyle(button_color='orange'))\n",
15441535
"\n",
15451536
"GridBox(children=[header, main, sidebar, footer],\n",
15461537
" layout=Layout(\n",
@@ -1577,7 +1568,7 @@
15771568
"metadata": {},
15781569
"source": [
15791570
"<!--NAVIGATION-->\n",
1580-
"< [Layout and Styling of Jupyter widgets](03.00-layout-and-styling-overview.ipynb) | [*OPTIONAL* - Widget label styling](03.02-OPTIONAL-widget-label-styling.ipynb) >"
1571+
"< [Contents](03.00-layout-and-styling-overview.ipynb) | [*OPTIONAL* - Widget Label Styling](03.02-OPTIONAL-widget-label-styling.ipynb) >"
15811572
]
15821573
}
15831574
],

0 commit comments

Comments
 (0)