Skip to main content

ipyvuetify

Documentation Version Version Conda Version Binder Black badge conventional commit

Jupyter widgets based on vuetify UI components which implement Google's Material Design Spec with the Vue.js framework.

A small selection of widgets:

ipyvuetify

Installation

To install use pip:

$ pip install ipyvuetify

# for Jupyter Lab < 3
$ jupyter labextension install jupyter-vuetify

For a development installation (requires npm),

$ git clone https://github.com/mariobuikhuizen/ipyvuetify.git
$ cd ipyvuetify
$ pip install -e ".[dev]"
$ pre-commit install
$ jupyter nbextension install --py --symlink --sys-prefix ipyvuetify
$ jupyter nbextension enable --py --sys-prefix ipyvuetify

Documentation

To get started with using ipyvuetify, check out the full documentation

https://ipyvuetify.readthedocs.io/

Usage

For examples see the example notebook.

The Vuetify documentation can be used to find all available components and attributes (in the left side bar or use the search field). Ipyvuetify tries to stay close to the Vue.js and Vuetify template syntax, but there are some differences:

Description Vuetify ipyvuetify
Component names are in CamelCase and the v- prefix is stripped <v-list-tile .../> ListTile(...)
Child components and text are defined in the children traitlet <v-btn>text <v-icon .../></v-btn> Btn(children=['text', Icon(...)])
Flag attributes require a boolean value <v-btn round ... Btn(round=True ...
Attributes are snake_case <v-menu offset-y .. Menu(offset_y=True ...
The v_model attribute (value in ipywidgets) contains the value directly <v-slider v-model="some_property" ... Slider(v_model=25...
Event listeners are defined with on_event <v-btn @click='someMethod()' ... button.on_event('click', some_method)
def some_method(widget, event, data):
Regular HTML tags can made with the Html class <div>...</div> Html(tag='div', children=[...])
The attributes class and style need to be suffixed with an underscore <v-btn class="mr-3" style="..." > Btn(class_='mr-3', style_='...')

Advanced usage

.sync

The .sync property modifier functionality can be achieved by using an event named:
update:[propertyNameInCamelCase].

Vuetify:
<v-navigation-drawer :mini-variant.sync=...
ipyvuetify:
drawer = v.NavigationDrawer(mini_variant=True, ...)

def update_mini(widget, event, data):
    drawer.mini_variant = data`

drawer.on_event('update:miniVariant', update_mini)

(scoped) slots

Vuetify:
<v-menu>
  <template slot:activator="{ on }">
    <v-btn v-on="on">...</v-btn>
  </template>
  <v-list>
    ...
  </v-list>
</v-menu>
ipyvuetify:
Menu(v_slots=[{
    'name': 'activator',
    'variable': 'x',
    'children': Btn(v_on='x.on', children=[...])
}], children=[
    List(...)
])

For non scoped slots 'scope': 'x' and v_on can be omitted.

Icons

Available icons:

Alternate usage

For a more web development centric way of development and a closer match to the Vue/Vuetify api, VuetifyTemplate can be used. See the example or Binder.

Make a sub class of VuetifyTemplate, define your own traitlets and set a template string. The traitlets will be accessible from the template as if they were in a vue-model. Methods can be called by defining a method with a prefix vue_ e.g. def vue_button_click(self, data) and calling it from the template e.g. @click="button_click(e)".

Metadata

Release files for ipyvuetify 1.12.0

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for ipyvuetify 1.12.0
File Size Uploaded
ipyvuetify-1.12.0.tar.gz 6.2 MB Details

Built distribution (wheel)

Table of built distributions (wheels) for ipyvuetify 1.12.0
File Interpreter ABI Platform
ipyvuetify-1.12.0-py2.py3-none-any.whl Python 3, Python 2 none any Details

Total release size: 12.5 MB

Release files / ipyvuetify-1.12.0.tar.gz

Download URL ipyvuetify-1.12.0.tar.gz
Size 6.2 MB
Tags Source
SHA-256 checksum
How to use checksums
c965b7874b5c36954b96b22a971fa00d7c90d0d9a4ecd3c9e34dd5ded18029b0
BLAKE2b-256 checksum
How to use checksums
e8c271a3aa1f46ab7beeb2a41afeb3de2cf64d6e569f9717d326f7c575a6c238
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No
Uploaded via twine/6.1.0 CPython/3.8.18

Release files / ipyvuetify-1.12.0-py2.py3-none-any.whl

Download URL ipyvuetify-1.12.0-py2.py3-none-any.whl
Size 6.3 MB
Tags Python 2 Python 3
SHA-256 checksum
How to use checksums
3209511ea0997288aa5c6935ca9a392e37359f3bacaa27ec50350426447e4996
BLAKE2b-256 checksum
How to use checksums
7ae6cb6628c81d9dd1bcd94f5811a36a2482c92b8f6e0c865dae8b2e7ebc24f2
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No
Uploaded via twine/6.1.0 CPython/3.8.18

Release history Release notifications | RSS feed

3.1.0

2 release files

3.0.0

2 release files

This release

1.12.0 This release

2 release files

1.11.1

2 release files

1.11.0

2 release files

1.10.0

2 release files

1.9.4

2 release files

1.9.3

2 release files

1.9.2

2 release files

1.9.1

2 release files

1.9.0

2 release files

1.8.10

2 release files

1.8.6

2 release files

1.8.5

2 release files

1.8.4

2 release files

1.8.3

2 release files

1.8.2

3 release files

1.8.1

2 release files

1.8.0

2 release files

1.7.0

2 release files

1.6.2

2 release files

1.6.1

2 release files

1.6.0

1 release file

1.5.1

2 release files

1.5.0

2 release files

1.4.1

2 release files

1.4.0

1 release file

1.3.0

1 release file

1.2.2

1 release file

1.2.1

1 release file

1.2.0

1 release file

1.1.1

1 release file

1.1.0

1 release file

1.0.4

1 release file

1.0.3

1 release file

1.0.2

1 release file

1.0.1

1 release file

1.0.0

1 release file

0.1.11

1 release file

0.1.10

1 release file

0.1.9

1 release file

0.1.8

1 release file

0.1.7

1 release file

0.1.6

1 release file

0.1.5

1 release file

0.1.4

1 release file

0.1.3

1 release file

0.1.2

1 release file

0.1.1

1 release file

0.1.0

1 release file

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page