Core examples.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipymaterialui as mui\n",
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "text1 = \"Jupyter\"\n",
    "text2 = \"Jupyter Widgets\"\n",
    "text3 = \"Material UI\"\n",
    "text4 = \"React\"\n",
    "texts = [text1, text2, text3, text4]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "chip = mui.Chip(label=text1)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "chip"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# the baseclass is just a \n",
    "chips = [mui.Chip(label=text) for text in texts]\n",
    "chips_div = mui.Html(tag='div', children=chips)\n",
    "chips_div"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "out = widgets.Output()\n",
    "b = mui.Button(children=text2)\n",
    "@out.capture()\n",
    "def click(button, event, data):\n",
    "    print(text3)\n",
    "b.on_event('onClick', click)\n",
    "widgets.VBox([b, out])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# seems like the checkbox does not support children\n",
    "checkbox_mui = mui.Checkbox(checked=True, description=text4)\n",
    "checkbox_classic = widgets.Checkbox(description=text1)\n",
    "widgets.jslink((checkbox_mui, 'checked'), (checkbox_classic, 'value'))\n",
    "widgets.VBox([checkbox_classic, checkbox_mui])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle_button = mui.ToggleButton(children=text2, selected=True, value='dummy')\n",
    "widgets.jslink((toggle_button, 'selected'), (checkbox_classic, 'value'))\n",
    "toggle_button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "menuitems = [\n",
    "    mui.MenuItem(children=text1, value='1'),\n",
    "    mui.MenuItem(children=text2, value='2'),\n",
    "    mui.MenuItem(children=text3, value='3')\n",
    "]\n",
    "menu = mui.Menu(children=menuitems)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Nice looking lists, the 3rd acting like a button\n",
    "list_items = [\n",
    "    mui.ListItem(children=[mui.ListItemText(primary=text1, secondary=text3)], divider=True),\n",
    "    mui.ListItem(children=[mui.ListItemText(primary=text2, secondary=text4)], divider=True),\n",
    "    mui.ListItem(children=[mui.ListItemText(primary=text3, secondary=text1)], divider=True, button=True),\n",
    "    mui.ListItem(children=[mui.ListItemText(primary=text4, secondary=text2)], divider=True)\n",
    "]\n",
    "mui.List(children=list_items)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# For the moment only list items can be used for popup menus\n",
    "# This needs a more generic solution?\n",
    "list_item_text = mui.ListItemText(primary=text4, secondary=text1, button=True)\n",
    "list_item = mui.ListItem(children=[list_item_text], button=True, menu=menu)\n",
    "list_item"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Unlike standard ipywidgets (controls) values can be often be widgets\n",
    "toggle_buttons = [\n",
    "    mui.ToggleButton(children='v1', value=chips[0]),\n",
    "    mui.ToggleButton(children='v2', value=chips[1]),\n",
    "    mui.ToggleButton(children='v3', value=chips[2]),\n",
    "    mui.ToggleButton(children='v4', value=chips[3]),\n",
    "]\n",
    "toggle_button_group = mui.ToggleButtonGroup(\n",
    "    value=[chips[2]],\n",
    "    children=toggle_buttons,\n",
    "    exclusive=False)\n",
    "toggle_button_group"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# these values can be jslinked, to create dynamic layout easy\n",
    "div = mui.Html(tag='div')\n",
    "widgets.jslink((toggle_button_group, 'value'), (div, 'children'))\n",
    "div"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "div.children = [chips[2]]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# similar for an exclusive toggle button\n",
    "toggle_buttons = [\n",
    "    mui.ToggleButton(children='v1', value=chips[0]),\n",
    "    mui.ToggleButton(children='v2', value=chips[1]),\n",
    "    mui.ToggleButton(children='v3', value=chips[2]),\n",
    "    mui.ToggleButton(children='v4', value=chips[3]),\n",
    "]\n",
    "toggle_button_group = mui.ToggleButtonGroup(\n",
    "    value=chips[2],\n",
    "    children=toggle_buttons,\n",
    "    exclusive=True)\n",
    "toggle_button_group"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# here we use the convenience attribute 'child'\n",
    "div = mui.Html(tag='div')\n",
    "widgets.jslink((toggle_button_group, 'value'), (div, 'children'))\n",
    "div"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Most controls, like select come without a label\n",
    "menu_items = [\n",
    "    mui.MenuItem(children=text1, value=chips[0]),\n",
    "    mui.MenuItem(children=text2, value=chips[1]),\n",
    "    mui.MenuItem(children=text3, value=chips[2])\n",
    "]\n",
    "# No selection is equivalent to '' (idea: use None for Python and undefined in js)\n",
    "select = mui.Select(value='', children=menu_items, multiple=False)\n",
    "select"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Using it in combination with InputLabel and FormControl\n",
    "input_label = mui.InputLabel(children='Text value', placeholder='lala')\n",
    "# style is a dict with css key/values\n",
    "form_control = mui.FormControl(children=[input_label, select], style_={'width': '198px'})\n",
    "form_control"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Select can also be used to select multiple values\n",
    "# values can be heterogeneous, ints, floats, strings, or widgets are supported\n",
    "menu_items = [\n",
    "    mui.MenuItem(children=text1, value=0),\n",
    "    mui.MenuItem(children=text2, value='1'),\n",
    "    mui.MenuItem(children=text3, value=3.14)\n",
    "]\n",
    "select_multiple = mui.Select(value=['1', 3.14], children=menu_items, multiple=True, style_={'width': '248px'})\n",
    "menu = mui.Menu(children=menuitems)\n",
    "input_label = mui.InputLabel(children='Selection')\n",
    "form_control = mui.FormControl(children=[input_label, select_multiple])\n",
    "form_control"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "select_multiple.value = []\n",
    "input_label.description = 'New selection'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "text_field = mui.TextField(placeholder='e.g. Maarten Breddels', label='Name')\n",
    "text_field"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Tabs/Tab in MaterialUI are only the 'header' of tabs, use the .value together with \n",
    "# jslink and a Div widget to implement a real tab\n",
    "tabs = mui.Tabs(children=[mui.Tab(label='Tab: ' +chip.label, value=chip) for chip in chips], value=chips[2])\n",
    "tabs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tabDiv = mui.Html(tag='div')\n",
    "widgets.jslink((tabs, 'value'), (tabDiv, 'children'))\n",
    "tabDiv"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# putting this together with some Div placeholders\n",
    "divs = [mui.Html(tag='div', children=text) for text in texts]\n",
    "tabs = mui.Tabs(children=[mui.Tab(label='Tab: ' +text, value=div) for div, text in zip(divs, texts)], value=divs[1])\n",
    "div = mui.Html(tag='div')\n",
    "widgets.jslink((tabs, 'value'),(div, 'children'))\n",
    "mui.Html(tag='div', children=[tabs, div])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# again, styling with style dict\n",
    "for k, color in enumerate('red green blue orange'.split()):\n",
    "    divs[k].style_ = {'color': color}\n",
    "#     tabs.children[k].style = {'backgroundColor': color}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "switch = mui.Switch(checked=False)\n",
    "switch"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "switch.checked"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "switch.checked = False"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "switch_form = mui.FormControlLabel(control=switch, label='Multiple selection')\n",
    "switch_form"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Select can also be used to select multiple values\n",
    "# values can be heterogeneous, ints, floats, strings, or widgets are supported\n",
    "menu_items = [\n",
    "    mui.MenuItem(children=switch_form, button=False),\n",
    "    mui.MenuItem(children=text1, value=0),\n",
    "    mui.MenuItem(children=text2, value='1'),\n",
    "    mui.MenuItem(children=text3, value=3.14)\n",
    "]\n",
    "select_multiple = mui.Select(value=['1', 3.14], children=menu_items, multiple=True, style_={'width': '248px'})\n",
    "menu = mui.Menu(children=menu_items)\n",
    "input_label = mui.InputLabel(children='Selection')\n",
    "form_control = mui.FormControl(children=[input_label, select_multiple])\n",
    "form_control"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "menuitems = [\n",
    "    mui.MenuItem(children=switch_form),\n",
    "    mui.MenuItem(children=text1),\n",
    "    mui.MenuItem(children=text2),\n",
    "    mui.MenuItem(children=text3)\n",
    "]\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# For the moment only list items can be used for popup menus\n",
    "# This needs a more generic solution?\n",
    "def toggle_menu(widget, event, data):\n",
    "    menu2.open_ = not menu2.open_\n",
    "\n",
    "for item in menuitems:\n",
    "    item.on_event('onClick', toggle_menu)\n",
    "    \n",
    "list_item_text = mui.ListItemText(primary=text4, secondary=text1, button=True)\n",
    "list_item = mui.ListItem(children=[list_item_text], button=True)\n",
    "list_item.on_event('onClick', toggle_menu)\n",
    "\n",
    "menu2 = mui.Menu(anchor_el=list_item, keep_mounted=True, open_=False, children=menuitems)\n",
    "menu2.on_event('onClose', toggle_menu)\n",
    "mui.List(children=[list_item, menu2])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}