ipyvuetify

https://ipyvuetify.readthedocs.io/en/latest
Admin
ipyvuetify is a Python library that provides Jupyter widgets based on Vuetify UI components for...
Tokens:8,191
Snippets:72
Trust Score:8.3
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install ipyvuetify with pip

Source: https://ipyvuetify.readthedocs.io/en/latest/installation

This command installs the ipyvuetify package using pip, the standard Python package installer. Ensure you have Python and pip installed and configured.

```bash
pip install ipyvuetify
```

--------------------------------

### Install Jupyter Vuetify Extension for Jupyter Lab

Source: https://ipyvuetify.readthedocs.io/en/latest/installation

This command installs the necessary Jupyter Lab extension for ipyvuetify. This is required if you are using Jupyter Lab instead of the classic notebook. It depends on ipywidgets being installed in Jupyter Lab.

```bash
jupyter labextension install jupyter-vuetify
```

--------------------------------

### Layout with ipywidgets HBox and VBox

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Provides an example of creating a grid layout using the standard ipywidgets `HBox` and `VBox` containers. This is a common approach for arranging widgets in rows and columns.

```python
import ipywidgets as widgets

widgets.HBox([
    widgets.VBox([
        widgets.Button(description="top left"),
        widgets.Button(description="bottom left"),
    ]),
    widgets.VBox([
        widgets.Button(description="top right"),
        widgets.Button(description="bottom right"),
    ]),
])
```

--------------------------------

### Creating a Button with Text (ipyvuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Shows how to create a button with text using ipyvuetify, mirroring the Vuetify HTML example. It highlights the use of the `children` attribute for content.

```python
import ipyvuetify as v

v.Container(children=[
    v.Btn(color='primary', children=['Click me'])
])
```

--------------------------------

### Creating a Button with Text (Vuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates how to create a simple button with text using Vuetify's HTML syntax. This serves as a baseline for ipyvuetify examples.

```html
<v-container>
    <v-btn color="primary">Click me</v-btn>
</v-container>
```

--------------------------------

### Responsive Layout with ipyvuetify Grid System

Source: https://ipyvuetify.readthedocs.io/en/latest/advanced_usage

Shows how to implement a responsive layout using ipyvuetify's grid system, allowing components to adapt to different screen sizes. The example demonstrates setting column widths for medium (md) screens and a default full width.

```python
v.Row(children=[
    v.Col(cols=12, md=6, children=[
        v.Card(outlined=True, style_='height: 400px', children=[f'Element {i}'])
    ]) for i in range (1,3)
])

```

--------------------------------

### Install ipyvuetify with conda

Source: https://ipyvuetify.readthedocs.io/en/latest/installation

This command installs ipyvuetify using conda from the conda-forge channel. It is recommended to use this method within an activated conda environment (e.g., 'myenv').

```bash
(myenv) $ conda install -c conda-forge ipyvuetify
```

--------------------------------

### Create Advanced Composite Widget with Vue List Rendering and Styling

Source: https://ipyvuetify.readthedocs.io/en/latest/template_usage

This example demonstrates an advanced use of VuetifyTemplate, showcasing Vue's list rendering feature (`v-for`) and event handling (`@click`) within the template. It also includes inline CSS styling with an ID for managing styles in Jupyter notebooks. This approach allows for dynamic UIs where individual elements are generated from a data list.

```python
import ipyvuetify as v
import traitlets


class FruitSelector(v.VuetifyTemplate):
    fruits = traitlets.List(traitlets.Unicode(), default_value=['Apple', 'Pear']).tag(sync=True)
    selected = traitlets.Unicode(default_value=None, allow_none=True).tag(sync=True)
    @traitlets.default('template')
    def _template(self):
        return '''
            <template>
                <div>
                    <v-select label="Fruits" :items="fruits" v-model="selected"/>
                    Available fruits
                    <table class="fruit-selector">
                        <tr v-for="(fruit, index) in fruits" :key="index" @click="selected = fruit">
                            <td>{{index}}</td>
                            <td>{{fruit}}</td>
                            <td>{{fruit == selected ? "selected" : ""}}</td>
                        </tr>
                    </table>
                </div>
            </template>
            <style id="fruit-selector-style">
                .fruit-selector td {
                    border: 1px solid black;
                }

            </style>

        '''

fruits = FruitSelector(fruits=['Banana', 'Pear', 'Apple'])
fruits

```

--------------------------------

### Enable Hot Reloading for Vue Templates

Source: https://ipyvuetify.readthedocs.io/en/latest/template_usage

Enables hot reloading for Vue templates by calling the `ipyvue.watch()` function. This feature requires the 'watchdog' package to be installed.

```python
import ipyvue
icyvue.watch()

```

--------------------------------

### Using Scoped Slots in ipyvuetify

Source: https://ipyvuetify.readthedocs.io/en/latest/advanced_usage

Illustrates the use of scoped slots to share event scope from a parent widget to its content, specifically using the 'activator' slot of a v-tooltip. The example shows how to bind events from the tooltip to a button.

```html
<v-tooltip>
    <template v-slot:activator="tooltip">
        <v-btn v-on="tooltip.on" color="primary">
            button with tooltip
        </v-btn>
    </template>
    Insert tooltip text here
</v-tooltip>

```

```python
v.Container(children=[
    v.Tooltip(bottom=True, v_slots=[{
        'name': 'activator',
        'variable': 'tooltip',
        'children': v.Btn(v_on='tooltip.on', color='primary', children=[
            'button with tooltip'
        ]),
    }], children=['Insert tooltip text here'])
])

```

--------------------------------

### Creating a Button with Icon and Text (ipyvuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates creating a button with both an icon and text in ipyvuetify. It shows how to nest `v.Icon` components within the `children` of a `v.Btn`.

```python
import ipyvuetify as v

v.Container(children=[
    v.Btn(color='primary', children=[
        v.Icon(left=True, children=[
            'mdi-email-edit-outline'
        ]),
        'Click me'
    ])
])
```

--------------------------------

### Create ipyvuetify Select Widget

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates how to create a basic ipyvuetify Select widget with a label and a list of items. The widget is then displayed. Attributes can be modified later by reassigning them.

```python
import ipyvuetify as v

my_select = v.Select(
    label='Fruits',
    items=['Apple', 'Pear', 'Cherry'])
my_select

```

```python
my_select.items = [*my_select.items, 'Banana']

```

--------------------------------

### Applying Vuetify Color Classes (ipyvuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates applying Vuetify color classes (e.g., `indigo lighten-1`) to style buttons, showing how to dynamically generate class names.

```python
import ipyvuetify as v

v.Container(children=[
    v.Btn(class_=f'mx-2 indigo lighten-{i+1}', children=[f'Button {i}']) for i in range(3)
])
```

--------------------------------

### Handling Button Click Events (Vuetify HTML Equivalent)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Presents the equivalent Vuetify HTML syntax for handling a click event, demonstrating the use of `@click` and template variables.

```html
<v-container>
    <v-btn color="primary" @click="on_click">
        Click me {{ count }}
    </v-btn>
</v-container>
```

--------------------------------

### Layout with ipyvuetify flex classes

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates an alternative layout method in ipyvuetify using Vuetify's flexbox utility classes. This approach achieves similar results to ipywidgets' HBox and VBox but leverages Vuetify's built-in styling system.

```python
v.Html(tag='div', class_='d-flex flex-row', children=[
    v.Html(tag='div', class_='d-flex flex-column', children=[
        v.Btn(class_='ma-2', children=['top left']),
        v.Btn(class_='ma-2', children=['bottom left'])
    ]),
    v.Html(tag='div', class_='d-flex flex-column', children=[
        v.Btn(class_='ma-2', children=['top right']),
        v.Btn(class_='ma-2', children=['bottom right'])
    ]),
])
```

--------------------------------

### Show Widget using show() method

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Illustrates how to show a hidden Vuetify icon widget using the `show()` method. This method removes the `d-none` class, making the widget visible again.

```python
w = v.Icon(children=['mdi-eye'], class_="d-none")
w.show()
w
```

--------------------------------

### Creating a Regular HTML Heading Tag (Vuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Shows how to render a standard HTML `h1` tag within a Vuetify container using basic HTML.

```html
<v-container>
    <h1 title="a title">My heading</h1>
</v-container>
```

--------------------------------

### Creating a Regular HTML Heading Tag (ipyvuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates how to create a regular HTML tag like `h1` in ipyvuetify using the `v.Html` widget. Attributes are passed via the `attributes` dictionary.

```python
import ipyvuetify as v

v.Container(children=[
    v.Html(
        tag='h1',
        attributes={'title': 'a title'},
        children=['My heading']
    )
])
```

--------------------------------

### Applying Predefined Vuetify Classes (ipyvuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Illustrates applying predefined Vuetify spacing classes (e.g., `mx-2`) to buttons for layout control. Multiple classes can be combined.

```python
import ipyvuetify as v

v.Container(children=[
    v.Btn(class_='mx-2', children=[f'Button {i}']) for i in range(3)
])
```

--------------------------------

### Styling Widgets with CSS Properties (ipyvuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Shows how to apply custom CSS properties to an ipyvuetify widget, such as `width` and `opacity`, using the `style_` attribute.

```python
import ipyvuetify as v

v.Select(label='Fruit', style_='width: 75px; opacity: 0.7')
```

--------------------------------

### Enable Dark Theme

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Illustrates how to enable the dark theme for all Vuetify components rendered by ipyvuetify by setting `v.theme.dark = True`.

```python
v.theme.dark = True
```

--------------------------------

### Use Material Colors for Theme

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Explains how to set theme colors using pre-defined Material Design color names in ipyvuetify. This simplifies theme customization by leveraging Vuetify's standard color palette.

```python
v.theme.themes.light.primary = 'colors.teal'
v.theme.themes.light.secondary = 'colors.teal.lighten4'
```

--------------------------------

### Handling Button Click Events (ipyvuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Shows how to attach a click event listener to a button in ipyvuetify using `.on_event()`. The callback function updates the button's text.

```python
import ipyvuetify as v

btn = v.Btn(color='primary', children=['Click me'])
count = 0

def on_click(widget, event, data):
    global count
    btn.children=[f'Click me {count}']
    count += 1

btn.on_event('click', on_click)

v.Container(children=[
    btn
])
```

--------------------------------

### Display Icon using v.Icon

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Shows how to display an icon using the `v.Icon` widget. This is the primary method for embedding Material Design icons provided by Vuetify.

```python
v.Icon(children=['mdi-thumb-up'])
```

--------------------------------

### Creating a Button with Icon and Text (Vuetify)

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Illustrates how to embed an icon within a button using Vuetify's HTML structure. This showcases nested elements within the button.

```html
<v-container>
    <v-btn color="primary">
        <v-icon left>
            mdi-email-edit-outline
        </v-icon>
        Click me
    </v-btn>
</v-container>
```

--------------------------------

### Customize Light Theme Primary Color

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Shows how to customize the primary color of the light theme in ipyvuetify. This allows for branding and visual consistency across the application.

```python
v.theme.themes.light.primary = '#b71c1c'
```

--------------------------------

### Link ipyvuetify Select and Chip with v-model

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates reading and setting widget values using `v_model`, analogous to Vue's `v-model`. It links an ipyvuetify Select widget's selected value to the color of an ipyvuetify Chip widget using `jslink`.

```html
<v-container>
    <v-select
        v-model="colorVariable"
        label="Colors"
        items="['red', 'green', 'blue']" />
    <v-chip :color="colorVariable"><v-chip>
</v-container>

```

```python
from ipywidgets import jslink

color_select = v.Select(
    v_model='green',
    label='Colors',
    items=['red', 'green', 'blue'])

color_display = v.Chip()

jslink((color_select, 'v_model'), (color_display, 'color'))

v.Container(children=[
    color_select,
    color_display
])

```

--------------------------------

### Create Basic Composite Widget with VuetifyTemplate

Source: https://ipyvuetify.readthedocs.io/en/latest/template_usage

This snippet shows how to create a composite widget by inheriting from ipyvuetify's VuetifyTemplate. It defines traits for data binding and returns a Vue template string for the UI. This pattern is useful for building larger UIs by composing smaller widgets.

```python
import ipyvuetify as v
import traitlets

class FruitSelector(v.VuetifyTemplate):
    fruits = traitlets.List(traitlets.Unicode(), default_value=['Apple', 'Pear']).tag(sync=True)
    selected = traitlets.Unicode(default_value=None, allow_none=True).tag(sync=True)
    @traitlets.default('template')
    def _template(self):
        return '''
        <template>
            <div>
                <v-select label="Fruits" :items="fruits" v-model="selected"/>
            </div>
        </template>
        '''

fruits = FruitSelector()
fruits

```

--------------------------------

### Translate Vuetify HTML to ipyvuetify Syntax

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Illustrates the translation of Vuetify HTML syntax to ipyvuetify Python code. It covers attribute naming conventions (kebab-case to snake_case), boolean attributes, and handling attributes with naming conflicts in Python.

```html
<v-select label="Fruits" :items="['Apple', 'Pear', 'Cherry']" />

```

```python
v.Select(label='Fruits', items=['Apple', 'Pear', 'Cherry'])

```

```html
<v-select append-icon="mdi-gamepad-down" label="Fruits" />

```

```python
v.Select(append_icon='mdi-gamepad-down', label='Fruits')

```

```html
<v-select clearable label="Fruits" :items="['Apple', 'Pear', 'Cherry']" value="Apple" />

```

```python
v.Select(clearable=True, label='Fruits', items=['Apple', 'Pear', 'Cherry'], value='Apple')

```

```html
<v-select style="width: 75px" label="Fruits" />

```

```python
v.Select(style_='width: 75px', label='Fruits')

```

--------------------------------

### Set Icon using prepend_icon attribute

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates setting an icon directly within another Vuetify component, such as a `v.Select` widget, using the `prepend_icon` attribute. This is a convenient way to add icons as prefixes or suffixes to input fields and other elements.

```python
v.Select(prepend_icon='mdi-thumb-up')
```

--------------------------------

### Customize Dark Theme Primary Color

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates how to customize the primary color of the dark theme in ipyvuetify. This enables specific theming for dark mode interfaces.

```python
v.theme.themes.dark.primary = '#a71c1c'
```

--------------------------------

### Embed ipywidgets in VuetifyTemplate

Source: https://ipyvuetify.readthedocs.io/en/latest/template_usage

Demonstrates embedding standard ipywidgets within a VuetifyTemplate using the `jupyter-widget` tag. Widgets are passed via synchronized traits that are configured with `widgets.widget_serialization`.

```python
import ipyvuetify as v
import ipywidgets as widgets
import traitlets

slider1 = widgets.IntSlider(description='Slider 1', value=20)
slider2 = v.Slider(label='Slider 2', v_model=8)

class MyComponent(v.VuetifyTemplate):

    items = traitlets.List().tag(sync=True, **widgets.widget_serialization)
    single_widget = traitlets.Any().tag(sync=True, **widgets.widget_serialization)

    @traitlets.default('template')
    def _template(self):
        return '''
        <template>
            <div>
                <div v-for="item in items" :key="item.title + item.content">
                    {{ item.title }}: <jupyter-widget :widget="item.content" />
                </div>
                Single widget: <jupyter-widget :widget="single_widget" />
            </div>
        </template>
        '''

MyComponent(
    items=[
        {
            'title': 'Title 1',
            'content': slider1
        }, {
            'title': 'Title 2',
            'content': slider2
        }
    ],
    single_widget=widgets.IntSlider(description='Single slider', value=40))
)

```

--------------------------------

### Create ipyvuetify Button with HTML Attributes

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Shows how to create an ipyvuetify Button widget, translating Vuetify HTML attributes like 'class' and 'outlined' to Python. Special HTML attributes not directly mapped are placed in the 'attributes' dictionary.

```html
<v-btn class="ma-2" outlined href="file.pdf" download>
    Download PDF
</v-btn>

```

```python
v.Btn(
    class_="ma-2",
    outlined=True,
    href="file.pdf",
    attributes={\"download\": True},
    children=["Download PDF"]
)

```

--------------------------------

### Implementing .sync Directive with ipyvuetify

Source: https://ipyvuetify.readthedocs.io/en/latest/advanced_usage

Details how to achieve two-way data binding, equivalent to Vue's '.sync' directive, in ipyvuetify. It involves manually setting up an event listener for 'update:<attributeNameInCamelCase>' to synchronize changes between the widget attribute and a Python variable.

```html
<v-navigation-drawer :mini-variant.sync="someProperty" ...

```

```python
drawer = v.NavigationDrawer(mini_variant=True, ...)

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

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

```

--------------------------------

### Using Vuetify Slots with ipyvuetify

Source: https://ipyvuetify.readthedocs.io/en/latest/advanced_usage

Demonstrates how to use the 'no-data' slot in a v-select component to customize the message displayed when there are no items. This involves defining the slot's content within the ipyvuetify widget structure.

```html
<v-select>
  <template v-slot:no-data>
    <v-list-item>
      <v-list-item-title>
        My custom no data message
      </v-list-item-title>
    </v-list-item>
  </template>
</v-select>

```

```python
v.Select(v_slots=[{
    'name': 'no-data',
    'children': [
        v.ListItem(children=[
            v.ListItemTitle(children=['My custom no data message'])
            ])
]})

```

--------------------------------

### Replace Classes in Widget using class_list.replace

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Shows how to replace an existing CSS class with a new one on a Vuetify button widget using the `class_list.replace` method. This allows for targeted style updates without removing and re-adding classes separately.

```python
w = v.Btn(children=["click"], class_="red white--text")
w.class_list.replace("red", "orange")
w
```

--------------------------------

### Add Classes to Widget using class_list.add

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates how to add CSS classes to a Vuetify button widget using the `class_list.add` method. This method allows for adding multiple classes at once to modify the widget's appearance.

```python
w = v.Btn(children=["click"])
w.class_list.add("red", "white--text")
w
```

--------------------------------

### Python VuetifyTemplate with External Vue File

Source: https://ipyvuetify.readthedocs.io/en/latest/template_usage

Implements a Vuetify component in Python that utilizes an external Vue template file ('fruit-selector.vue'). It defines synchronized traits for fruits, selected fruit, and a flag for adding fruits from Python, demonstrating communication between Python and Vue.

```python
import ipyvuetify as v
import traitlets
import random


other_fruits = ['Pineapple', 'Kiwi', 'Cherry']


class FruitSelector(v.VuetifyTemplate):
    template_file = 'fruit-selector.vue'

    fruits = traitlets.List(traitlets.Unicode(), default_value=['Apple', 'Pear']).tag(sync=True)
    selected = traitlets.Unicode(default_value=None, allow_none=True).tag(sync=True)
    can_add_from_python = traitlets.Bool(default_value=True).tag(sync=True)

    def vue_add_fruit_python(self, data=None):
        if other_fruits:
            fruit = other_fruits.pop()
            self.fruits = self.fruits + [fruit]
        if not other_fruits:
            self.can_add_from_python = False

```

--------------------------------

### Vuetify Vue Template in .vue File

Source: https://ipyvuetify.readthedocs.io/en/latest/template_usage

Defines a Vuetify component using a template in a separate .vue file. It includes template, style, and script sections for defining the UI, styling, and component logic. This approach enhances editor support for Vue templates.

```vue
<template>
  <div>
    <v-select label="Fruits" :items="fruits" v-model="selected" />
    <div>
      <v-btn @click="addBanana" :disabled="hasBanana">Add banana</v-btn>
      <v-btn @click="removeBanana" :disabled="!hasBanana">Remove banana</v-btn>
      <v-btn @click="add_fruit_python()" :disabled="!can_add_from_python"
        >Add from Pyton</v-btn
      >
    </div>
    Available fruits
    <table class="fruit-selector-file">
      <tr
        v-for="(fruit, index) in fruits"
        :key="index"
        @click="selected = fruit"
      >
        <td>{{ index }}</td>
        <td>{{ fruit }}</td>
        <td class="selected">
          <v-icon v-if="fruit == selected" left color="green">
            mdi-check
          </v-icon>
          <v-icon v-if="fruit != selected" left color="grey">
            mdi-check
          </v-icon>
        </td>
      </tr>
    </table>
  </div>
</template>
<style id="fruit-selector-style-file">
.fruit-selector-file td {
  border: 1px solid #999;
  padding: 5px 10px;
}
.fruit-selector-file {
  border-collapse: collapse;
}
.fruit-selector-file td.selected {
  width: 50px;
}
</style>
<script>
module.exports = {
  methods: {
    addBanana() {
      this.fruits.push("Banana");
    },
    removeBanana() {
      this.fruits.pop("Banana");
      if (this.selected == "Banana") {
        this.selected = null;
      }
    },
  },
  computed: {
    hasBanana() {
      return this.fruits.includes("Banana");
    },
  },
  watch: {
    fruits() {
      console.log("Current fruits", this.fruits);
    },
  },
};
</script>
```

--------------------------------

### Hide Widget using hide() method

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Explains how to hide a Vuetify icon widget using the `hide()` method. This method adds the `d-none` class to the widget, making it invisible without removing it from the DOM.

```python
w = v.Icon(children=['mdi-eye-off'])
w.hide()
w
```

--------------------------------

### Toggle Classes in Widget using class_list.toggle

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Demonstrates the usage of the `class_list.toggle` method to add or remove CSS classes from a Vuetify button widget. This method can toggle multiple classes, adding them if they are not present and removing them if they are.

```python
w = v.Btn(children=["click"], class_="red white--text")
w.class_list.toggle("blue", "red")
w
```

--------------------------------

### Event Modifiers in ipyvuetify

Source: https://ipyvuetify.readthedocs.io/en/latest/advanced_usage

Explains and demonstrates the use of event modifiers, specifically the '.stop' modifier, to control event propagation in nested elements. It shows how to attach distinct click handlers to an icon and its parent button, preventing the icon's click from triggering the button's handler.

```python
icon = v.Icon(right=True, children=['mdi-account-lock'])
btn = v.Btn(color='primary', children=[
    'button',
    icon
])

icon.on_event('click.stop', lambda *args: print('icon clicked'))
btn.on_event('click', lambda *args: print('btn clicked'))

v.Container(children=[
    btn
])

# Note: the event handlers won't work in this page because there is no active kernel.

```

--------------------------------

### Remove Classes from Widget using class_list.remove

Source: https://ipyvuetify.readthedocs.io/en/latest/usage

Illustrates how to remove CSS classes from a Vuetify button widget using the `class_list.remove` method. This is useful for dynamically changing the widget's styling by removing specific classes.

```python
w = v.Btn(children=["click"], class_="red white--text")
w.class_list.remove("white--text")
w
```
Tokens:
Raw