{
"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=['mdi-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=['mdi-pencil'])]),\n",
" v.Btn(color='primary', class_='ma-2', fab=True, children=[v.Icon(children=['mdi-pencil'])]),\n",
" v.Btn(color='primary', class_='ma-2', fab=True, large=True, children=[v.Icon(children=['mdi-pencil'])]),\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=['mdi-format-align-left'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-align-center'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-align-right'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-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=['mdi-format-bold'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-italic'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-underline'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-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=['mdi-fingerprint']),\n",
" 'Icon left'\n",
" ]),\n",
" v.Btn(color='primary', class_='ma-2', children=[\n",
" 'Icon right',\n",
" v.Icon(right=True, children=['mdi-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",
" 'mdi-menu-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": [
"dialog = v.Dialog(width='500',\n",
" 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",
" ]),\n",
" v.CardText(children=[\n",
" lorum_ipsum,\n",
" v.TextField(label='Label', placeholder='Placeholder')\n",
" ]),\n",
" ])\n",
"])\n",
"\n",
"v.Layout(children=[dialog])"
]
},
{
"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=['mdi-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'])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"activated = v.Chip(children=['_'])\n",
"\n",
"items = [{\n",
" 'id': 1,\n",
" 'name': 'Applications :',\n",
" 'children': [\n",
" { 'id': 2, 'name': 'Calendar' },\n",
" { 'id': 3, 'name': 'Chrome' },\n",
" { 'id': 4, 'name': 'Webstorm', 'children': [\n",
" { 'id': 5, 'name': 'Test'}]},\n",
" ],\n",
"}]\n",
"\n",
"def on_activated(widget, event, data):\n",
" activated.children = [f'{data}']\n",
"\n",
"treeview = v.Treeview(items=items, selectable=True, activatable=True, v_model=[2])\n",
"treeview.on_event('update:active', on_activated)\n",
"\n",
"v.Container(row=True, children=[\n",
" v.Flex(xs12=True, children=[treeview]),\n",
" v.Flex(xs12=True, children=[activated])])"
]
}
],
"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
}