Skip to main content

Jupyter widgets based on vuetify UI components

Project description

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

Sponsors

Project ipyvuetify receives direct funding from the following sources:

MSD

Project details


Release history Release notifications | RSS feed

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

ipyvuetify-1.11.3.tar.gz (6.2 MB view details)

Uploaded Source

Built Distribution

ipyvuetify-1.11.3-py2.py3-none-any.whl (6.3 MB view details)

Uploaded Python 2Python 3

File details

Details for the file ipyvuetify-1.11.3.tar.gz.

File metadata

  • Download URL: ipyvuetify-1.11.3.tar.gz
  • Upload date:
  • Size: 6.2 MB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.1.0 CPython/3.8.18

File hashes

Hashes for ipyvuetify-1.11.3.tar.gz
Algorithm Hash digest
SHA256 3580afa76d9add4ae04ccb7fd57d4a0cf03a261705742e7137def3ebb65ac71d
MD5 e6bd61e0bcfa352b6275f378bf3b6ec2
BLAKE2b-256 a40731c9615532b6c190a3033460e4aa83a64ac532281758ff734e1bc42e3c00

See more details on using hashes here.

File details

Details for the file ipyvuetify-1.11.3-py2.py3-none-any.whl.

File metadata

  • Download URL: ipyvuetify-1.11.3-py2.py3-none-any.whl
  • Upload date:
  • Size: 6.3 MB
  • Tags: Python 2, Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.1.0 CPython/3.8.18

File hashes

Hashes for ipyvuetify-1.11.3-py2.py3-none-any.whl
Algorithm Hash digest
SHA256 fa83aaf9f4ce669172d532094d60bd7c40d3cb9c5d6bb2f4a14565da2b09a8d8
MD5 01a47b6d48f719112ebed8054b19ddc9
BLAKE2b-256 474dfd1a6a888f8abb6b8dc316cc78b5153e75eff7ae66a94cf30b144fadd09d

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page