ipy

ipyvuetify

Jupyter widgets based on vuetify UI components

Showing:

Popularity

Downloads/wk

0

GitHub Stars

221

Maintenance

Last Commit

1mo ago

Contributors

12

Package

Dependencies

1

License

Categories

Readme

ipyvuetify

Documentation Version Version Conda Version

Binder

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
$ jupyter nbextension enable --py --sys-prefix 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 .
$ 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:

DescriptionVuetifyipyvuetify
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)".

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100