| Name | ipyvuetify JSON |
| Version |
1.10.0
JSON |
| download |
| home_page | None |
| Summary | Jupyter widgets based on vuetify UI components |
| upload_time | 2024-07-31 14:41:09 |
| maintainer | None |
| docs_url | None |
| author | None |
| requires_python | >=3.6 |
| license | MIT |
| keywords |
ipython
jupyter
widgets
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# ipyvuetify
[](https://ipyvuetify.readthedocs.io/en/latest/?badge=latest)
[](https://www.npmjs.com/package/jupyter-vuetify)
[](https://pypi.python.org/project/ipyvuetify)
[](https://anaconda.org/conda-forge/ipyvuetify)
[](https://mybinder.org/v2/gh/mariobuikhuizen/ipyvuetify/master?filepath=examples%2FExamples.ipynb)
[](https://github.com/psf/black)
[](https://conventionalcommits.org)
Jupyter widgets based on [vuetify UI components](https://v2.vuetifyjs.com/) which implement Google's
[Material Design Spec](https://material.io/) with the [Vue.js framework](https://vuejs.org/).
A small selection of widgets:
## 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](examples/Examples.ipynb).
The [Vuetify documentation](https://v2.vuetifyjs.com/components/buttons#buttons) 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:
```HTML
<v-navigation-drawer :mini-variant.sync=...
```
##### ipyvuetify:
```python
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:
```HTML
<v-menu>
<template slot:activator="{ on }">
<v-btn v-on="on">...</v-btn>
</template>
<v-list>
...
</v-list>
</v-menu>
```
##### ipyvuetify:
```python
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:
- https://material.io/resources/icons/ (deprecated)
- https://pictogrammers.github.io/@mdi/font/4.5.95/ (since v1.2.0)
## 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](examples/Examples%20template.ipynb) or [](https://mybinder.org/v2/gh/mariobuikhuizen/ipyvuetify/master?filepath=examples%2FExamples%20template.ipynb).
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:
[](https://msd.com)
Raw data
{
"_id": null,
"home_page": null,
"name": "ipyvuetify",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": null,
"keywords": "ipython, jupyter, widgets",
"author": null,
"author_email": "Mario Buikhuizen <mbuikhuizen@gmail.com>, Maarten Breddels <maartenbreddels@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/e5/0c/fc87f5a309b7376a3e7e48a14c8e3a9865d882f1217d35adddff6db94de3/ipyvuetify-1.10.0.tar.gz",
"platform": null,
"description": "# ipyvuetify\n\n[](https://ipyvuetify.readthedocs.io/en/latest/?badge=latest)\n[](https://www.npmjs.com/package/jupyter-vuetify)\n[](https://pypi.python.org/project/ipyvuetify)\n[](https://anaconda.org/conda-forge/ipyvuetify)\n[](https://mybinder.org/v2/gh/mariobuikhuizen/ipyvuetify/master?filepath=examples%2FExamples.ipynb)\n[](https://github.com/psf/black)\n[](https://conventionalcommits.org)\n\nJupyter widgets based on [vuetify UI components](https://v2.vuetifyjs.com/) which implement Google's\n[Material Design Spec](https://material.io/) with the [Vue.js framework](https://vuejs.org/).\n\nA small selection of widgets:\n\n\n\n## Installation\n\nTo install use pip:\n\n $ pip install ipyvuetify\n\n # for Jupyter Lab < 3\n $ jupyter labextension install jupyter-vuetify\n\nFor a development installation (requires npm),\n\n $ git clone https://github.com/mariobuikhuizen/ipyvuetify.git\n $ cd ipyvuetify\n $ pip install -e \".[dev]\"\n $ pre-commit install\n $ jupyter nbextension install --py --symlink --sys-prefix ipyvuetify\n $ jupyter nbextension enable --py --sys-prefix ipyvuetify\n\n## Documentation\n\nTo get started with using ipyvuetify, check out the full documentation\n\nhttps://ipyvuetify.readthedocs.io/\n\n## Usage\n\nFor examples see the [example notebook](examples/Examples.ipynb).\n\nThe [Vuetify documentation](https://v2.vuetifyjs.com/components/buttons#buttons) can be used to find all available\ncomponents and attributes (in the left side bar or use the search field). Ipyvuetify tries to stay close to the Vue.js\nand Vuetify template syntax, but there are some differences:\n\n| Description | Vuetify | ipyvuetify |\n| ----------------------------------------------------------------------- | --------------------------------------- | --------------------------------------- |\n| Component names are in CamelCase and the v- prefix is stripped | `<v-list-tile .../>` | `ListTile(...)` |\n| Child components and text are defined in the children traitlet | `<v-btn>text <v-icon .../></v-btn>` | `Btn(children=['text', Icon(...)])` |\n| Flag attributes require a boolean value | `<v-btn round ...` | `Btn(round=True ...` |\n| Attributes are snake_case | `<v-menu offset-y ..` | `Menu(offset_y=True ...` |\n| The v_model attribute (value in ipywidgets) contains the value directly | `<v-slider v-model=\"some_property\" ...` | `Slider(v_model=25...` |\n| Event listeners are defined with on_event | `<v-btn @click='someMethod()' ...` | `button.on_event('click', some_method)` |\n| | | `def some_method(widget, event, data):` |\n| Regular HTML tags can made with the Html class | `<div>...</div>` | `Html(tag='div', children=[...])` |\n| The attributes class and style need to be suffixed with an underscore | `<v-btn class=\"mr-3\" style=\"...\" >` | `Btn(class_='mr-3', style_='...')` |\n\n### Advanced usage\n\n#### .sync\n\nThe .sync property modifier functionality can be achieved by using an event named: \n`update:[propertyNameInCamelCase]`.\n\n##### Vuetify:\n\n```HTML\n<v-navigation-drawer :mini-variant.sync=...\n```\n\n##### ipyvuetify:\n\n```python\ndrawer = v.NavigationDrawer(mini_variant=True, ...)\n\ndef update_mini(widget, event, data):\n drawer.mini_variant = data`\n\ndrawer.on_event('update:miniVariant', update_mini)\n```\n\n### (scoped) slots\n\n##### Vuetify:\n\n```HTML\n<v-menu>\n <template slot:activator=\"{ on }\">\n <v-btn v-on=\"on\">...</v-btn>\n </template>\n <v-list>\n ...\n </v-list>\n</v-menu>\n```\n\n##### ipyvuetify:\n\n```python\nMenu(v_slots=[{\n 'name': 'activator',\n 'variable': 'x',\n 'children': Btn(v_on='x.on', children=[...])\n}], children=[\n List(...)\n])\n```\n\nFor non scoped slots `'scope': 'x'` and `v_on` can be omitted.\n\n### Icons\n\nAvailable icons:\n\n- https://material.io/resources/icons/ (deprecated)\n- https://pictogrammers.github.io/@mdi/font/4.5.95/ (since v1.2.0)\n\n## Alternate usage\n\nFor a more web development centric way of development and a closer match to the Vue/Vuetify api, VuetifyTemplate can be used. See the [example](examples/Examples%20template.ipynb) or [](https://mybinder.org/v2/gh/mariobuikhuizen/ipyvuetify/master?filepath=examples%2FExamples%20template.ipynb).\n\nMake 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)\"`.\n\n## Sponsors\n\nProject ipyvuetify receives direct funding from the following sources:\n\n[](https://msd.com)\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Jupyter widgets based on vuetify UI components",
"version": "1.10.0",
"project_urls": {
"repository": "https://github.com/widgetti/ipyvuetify"
},
"split_keywords": [
"ipython",
" jupyter",
" widgets"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "e41ec2e7b4ae5cb88be0f898579c2ce35cd4efae28783a805b0016bc0115a49a",
"md5": "c5934eb17d733e6c60f083fa5e91a710",
"sha256": "f867941a9b6a65dc560e9616d2ab3be79af2fcb4846eac93c7d5f74a58d96ee0"
},
"downloads": -1,
"filename": "ipyvuetify-1.10.0-py2.py3-none-any.whl",
"has_sig": false,
"md5_digest": "c5934eb17d733e6c60f083fa5e91a710",
"packagetype": "bdist_wheel",
"python_version": "py2.py3",
"requires_python": ">=3.6",
"size": 6065874,
"upload_time": "2024-07-31T14:41:05",
"upload_time_iso_8601": "2024-07-31T14:41:05.899251Z",
"url": "https://files.pythonhosted.org/packages/e4/1e/c2e7b4ae5cb88be0f898579c2ce35cd4efae28783a805b0016bc0115a49a/ipyvuetify-1.10.0-py2.py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "e50cfc87f5a309b7376a3e7e48a14c8e3a9865d882f1217d35adddff6db94de3",
"md5": "4e29e25aec450240435f1e53354fbb6e",
"sha256": "87dee6aaadf316ee27ed89a79b3d3c3f5e0f2e5b638da0681736048532545ac1"
},
"downloads": -1,
"filename": "ipyvuetify-1.10.0.tar.gz",
"has_sig": false,
"md5_digest": "4e29e25aec450240435f1e53354fbb6e",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 5961194,
"upload_time": "2024-07-31T14:41:09",
"upload_time_iso_8601": "2024-07-31T14:41:09.083541Z",
"url": "https://files.pythonhosted.org/packages/e5/0c/fc87f5a309b7376a3e7e48a14c8e3a9865d882f1217d35adddff6db94de3/ipyvuetify-1.10.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-07-31 14:41:09",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "widgetti",
"github_project": "ipyvuetify",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [],
"lcname": "ipyvuetify"
}
