examples/Examples.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets\n",
    "import ipyvuetify as v\n",
    "from threading import Timer\n",
    "\n",
    "lorum_ipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "count = 0\n",
    "\n",
    "def on_click(widget, event, data):\n",
    "    global count\n",
    "    count += 1\n",
    "    button1.children=['button ' + str(count)]\n",
    "\n",
    "button1 = v.Btn(children=['button'])\n",
    "button1.on_event('click', on_click)\n",
    "\n",
    "v.Layout(class_='pa-2', children=[button1])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "v.Layout(children=[\n",
    "    v.Btn(color='primary', class_='ma-2', children=['primary']),\n",
    "    v.Btn(color='error', class_='ma-2', children=['error']),\n",
    "    v.Btn(color='pink lighten-4', class_='ma-2', children=['custom']),\n",
    "    v.Btn(color='#654321', dark=True, class_='ma-2', children=['hex']),\n",
    "    v.Btn(color='#654321', disabled=True, class_='ma-2', children=['disabled']),\n",
    "\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "v.Layout(children=[\n",
    "    v.Btn(color='primary', text=True, class_='ma-2', children=['flat']),\n",
    "    v.Btn(color='primary', text=True, disabled=True, class_='ma-2', children=['flat']),\n",
    "    v.Btn(color='primary', rounded=True, class_='ma-2', children=['rounded']),\n",
    "    v.Btn(color='primary', rounded=True, class_='ma-2', disabled=True, children=['rounded']),\n",
    "    v.Btn(color='primary', depressed=True, class_='ma-2', children=['depressed']),\n",
    "    v.Btn(color='primary', icon=True, class_='ma-2', children=[v.Icon(children=['thumb_up'])]),\n",
    "    v.Btn(color='primary', outline=True, class_='ma-2', children=['outline']),\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "v.Layout(children=[\n",
    "    v.Btn(color='primary', small=True, class_='ma-2', children=['small']),\n",
    "    v.Btn(color='primary', class_='ma-2', children=['normal']),\n",
    "    v.Btn(color='primary', class_='ma-2', large=True, children=['large']),\n",
    "    v.Btn(color='primary', class_='ma-2', small=True, fab=True, children=[v.Icon(children=['edit'])]),\n",
    "    v.Btn(color='primary', class_='ma-2', fab=True, children=[v.Icon(children=['edit'])]),\n",
    "    v.Btn(color='primary', class_='ma-2', fab=True, large=True, children=[v.Icon(children=['edit'])]),\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def toggleLoading():\n",
    "    button2.loading = not button2.loading\n",
    "    button2.disabled = button2.loading\n",
    "\n",
    "def on_loader_click(*args):\n",
    "    toggleLoading()\n",
    "    Timer(2.0, toggleLoading).start()\n",
    "    \n",
    "button2 = v.Btn(loading=False, class_='ma-2', children=['loader'])\n",
    "button2.on_event('click', on_loader_click)\n",
    "\n",
    "v.Layout(children=[button2])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle_single = v.BtnToggle(v_model=2, class_='mr-3', children=[\n",
    "    v.Btn(text=True, children=[v.Icon(children=['format_align_left'])]),\n",
    "    v.Btn(text=True, children=[v.Icon(children=['format_align_center'])]),\n",
    "    v.Btn(text=True, children=[v.Icon(children=['format_align_right'])]),\n",
    "    v.Btn(text=True, children=[v.Icon(children=['format_align_justify'])]),\n",
    "])\n",
    "\n",
    "toggle_multi = v.BtnToggle(v_model=[0,2], multiple=True, children=[\n",
    "    v.Btn(text=True, children=[v.Icon(children=['format_bold'])]),\n",
    "    v.Btn(text=True, children=[v.Icon(children=['format_italic'])]),\n",
    "    v.Btn(text=True, children=[v.Icon(children=['format_underline'])]),\n",
    "    v.Btn(text=True, children=[v.Icon(children=['format_color_fill'])]),\n",
    "])\n",
    "\n",
    "v.Layout(children=[\n",
    "    toggle_single,\n",
    "    toggle_multi,\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "v.Layout(children=[\n",
    "    v.Btn(color='primary', class_='ma-2', children=[\n",
    "        v.Icon(left=True, children=['fingerprint']),\n",
    "        'Icon left'\n",
    "    ]),\n",
    "    v.Btn(color='primary', class_='ma-2', children=[\n",
    "        'Icon right',\n",
    "        v.Icon(right=True, children=['fingerprint']),\n",
    "    ]),\n",
    "    v.Tooltip(bottom=True, v_slots=[{\n",
    "        'name': 'activator',\n",
    "        'variable': 'tooltip',\n",
    "        'children': v.Btn(v_on='tooltip.on', color='primary', class_='ma-2', children=[\n",
    "           'tooltip' \n",
    "        ]),\n",
    "    }], children=[\n",
    "        'Insert tooltip text here'\n",
    "    ])    \n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "def on_menu_click(widget, event, data):\n",
    "    if len(layout.children) == 1:\n",
    "        layout.children = layout.children + [info]\n",
    "    info.children=[f'Item {items.index(widget)+1} clicked']\n",
    "    \n",
    "\n",
    "items = [v.ListItem(children=[\n",
    "    v.ListItemTitle(children=[\n",
    "        f'Click me {i}'])]) \n",
    "         for i in range(1, 5)]\n",
    "\n",
    "for item in items:\n",
    "    item.on_event('click', on_menu_click)\n",
    "\n",
    "menu = v.Menu(offset_y=True,\n",
    "    v_slots=[{\n",
    "        'name': 'activator',\n",
    "        'variable': 'menuData',\n",
    "        'children': v.Btn(v_on='menuData.on', class_='ma-2', color='primary', children=[\n",
    "            'menu', \n",
    "            v.Icon(right=True, children=[\n",
    "                'arrow_drop_down'\n",
    "            ])\n",
    "        ]),\n",
    "    }]\n",
    "    , \n",
    "    children=[\n",
    "        v.List(children=items)\n",
    "    ]\n",
    ")\n",
    "\n",
    "info = v.Chip(class_='ma-2')\n",
    "\n",
    "layout = v.Layout(children=[\n",
    "    menu\n",
    "])\n",
    "layout"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "v.Layout(children=[\n",
    "    v.Dialog(width='500', v_slots=[{\n",
    "        'name': 'activator',\n",
    "        'variable': 'x',\n",
    "        'children': v.Btn(v_on='x.on', color='success', dark=True, children=[\n",
    "            'Open dialog'\n",
    "        ]),\n",
    "    }], \n",
    "    children=[\n",
    "        v.Card(children=[\n",
    "            v.CardTitle(class_='headline gray lighten-2', primary_title=True, children=[\n",
    "                \"Lorem ipsum\"]),\n",
    "            v.CardText(children=[\n",
    "                lorum_ipsum])\n",
    "        ])\n",
    "    ])\n",
    "])    "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "slider = v.Slider(v_model=25)\n",
    "slider2 = v.Slider(thumb_label=True, v_model=25)\n",
    "slider3 = v.Slider(thumb_label='always', v_model=25)\n",
    "\n",
    "ipywidgets.jslink((slider, 'v_model'), (slider2, 'v_model'))\n",
    "ipywidgets.jslink((slider, 'v_model'), (slider3, 'v_model'))\n",
    "\n",
    "v.Container(children=[\n",
    "    slider,\n",
    "    slider2,\n",
    "    slider3\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "select1=v.Select(label=\"Choose option\", items=['Option a', 'Option b', 'Option c'])\n",
    "v.Layout(children=[select1])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tab_list = [v.Tab(children=['Tab ' + str(i)]) for i in range(1,4)]\n",
    "content_list = [v.TabItem(children=[lorum_ipsum]) for i in range(1,4)] \n",
    "tabs = v.Tabs(\n",
    "    v_model=1, \n",
    "    children=tab_list + content_list)\n",
    "tabs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def on_click(widget, event, data):\n",
    "   vnd.v_model = not vnd.v_model\n",
    "\n",
    "drawer_button = v.Btn(color='primary', children=['Close drawer'])\n",
    "drawer_button.on_event('click', on_click)\n",
    "\n",
    "vnd = v.NavigationDrawer(v_model=False, absolute=True, right=True, children=[\n",
    "    drawer_button\n",
    "])\n",
    "\n",
    "show_drawer = v.Btn(color='primary', children=['Toggle drawer'])\n",
    "show_drawer.on_event('click', on_click)\n",
    "\n",
    "v.Layout(children=[vnd, show_drawer]) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "vepc1 = v.ExpansionPanel(children=[\n",
    "    v.ExpansionPanelHeader(children=['item1']),\n",
    "    v.ExpansionPanelContent(children=['First Text'])])\n",
    "\n",
    "vepc2 = v.ExpansionPanel(children=[\n",
    "    v.ExpansionPanelHeader(children=['item2']),\n",
    "    v.ExpansionPanelContent(children=['Second Text'])])\n",
    "\n",
    "vep = v.ExpansionPanels(children=[vepc1, vepc2])\n",
    "vl = v.Layout(class_='pa-4', children=[vep])\n",
    "vl"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "v.Banner(single_line=True,\n",
    "    v_slots=[{\n",
    "        'name': 'icon',\n",
    "        'children': v.Icon(children=['thumb_up'])\n",
    "    }, {\n",
    "        'name': 'actions',\n",
    "        'children': v.Btn(text=True, color='deep-purple accent-4', children=['Action'])\n",
    "    }], \n",
    "    children=['One line message text string with two actions on tablet / Desktop'])"
   ]
  }
 ],
 "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.7.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}