Merge pull request #182 from mwcraig/update-styling-8

Update styling tutorial notebooks with ipywidgets 8 notes

Author: mwcraig

notebooks/06.Layout/06.01-widget-layout-and-styling.ipynb

@@ -90,6 +90,15 @@
     "b3"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "b2.style.button_color = 'red'"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -201,7 +210,7 @@
     "<details>\n",
     "<summary><strong>Box model</strong></summary>\n",
     "\n",
-    "- `border` \n",
+    "- `border` -- changing in `ipywidgets 8`; will have four new properties `border_left`, `border_right`, `border_top` and `border_bottom`, to better match what CSS provides. `border` will still be available as a shortcut, but will not set a `border` CSS property.\n",
     "- `margin`\n",
     "- `padding`\n",
     "\n",
@@ -336,7 +345,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "b1.layout. # fill this in, might take more than one line"
+    "b1.layout. # fill this in, might take more than one line\n"
    ]
   },
   {
@@ -674,7 +683,10 @@
     "                         layout=Layout(width='auto', height='auto'))\n",
     "min_slider = FloatSlider(min=-1, max=10, description=\"Min: \",\n",
     "                         layout=Layout(width='auto', height='auto'))\n",
-    "app = TwoByTwoLayout(top_left=min_slider,\n",
+    "\n",
+    "# Set up two sliders and a graph. The \"max\" slider sets the upper limit for the \"min\" \n",
+    "# slider, and the value of the \"min\" slider sets the upper limit for the \"max\" slider.\n",
+    "bqfig = TwoByTwoLayout(top_left=min_slider,\n",
     "                     bottom_left=max_slider, \n",
     "                     bottom_right=fig,\n",
     "                     align_items=\"center\", \n",
@@ -686,7 +698,7 @@
     "jslink((max_slider, 'min'), (min_slider, 'value'))\n",
     "\n",
     "max_slider.value = 1.5\n",
-    "app"
+    "bqfig"
    ]
   },
   {
@@ -786,7 +798,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "# %load solutions/applayout-no-sides.py"
+    "# %load solutions/applayout-no-sides.py\n"
    ]
   },
   {
@@ -876,7 +888,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "# %load solutions/slider-bqplot-sliders-app.py"
+    "# %load solutions/slider-bqplot-sliders-app.py\n"
    ]
   },
   {
@@ -1087,7 +1099,7 @@
    "outputs": [],
    "source": [
     "GridBox(children=[Button(description=str(i), layout=Layout(width='auto', height='auto'),\n",
-    "                         style=ButtonStyle(button_color='darkseagreen')) for i in range(12)\n",
+    "                         style=ButtonStyle(button_color='darkseagreen')) for i in range(7)\n",
     "                 ],\n",
     "        layout=Layout(\n",
     "            width='50%',\n",
@@ -1211,7 +1223,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.10"
+   "version": "3.9.13"
   }
  },
  "nbformat": 4,

notebooks/06.Layout/06.03-more-flexbox-layout.ipynb

@@ -327,7 +327,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "from ipywidgets import Layout, Button, Box, Label\n",
+    "from ipywidgets import Layout, Button, VBox, Label\n",
     "\n",
     "item_layout = Layout(height='100px', min_width='40px')\n",
     "items = [Button(layout=item_layout, description=str(i), button_style='warning') for i in range(40)]\n",