基于vuetify UI组件的Jupyter小部件
项目描述
ipyvuetify
Jupyter小部件，基于vuetify UI组件实现谷歌的Material Design规范，并使用Vue.js框架。
少量小部件选择
安装
要安装，请使用pip
$ pip install ipyvuetify
# for Jupyter Lab < 3
$ jupyter labextension install jupyter-vuetify
对于开发安装（需要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
文档
要开始使用ipyvuetify，请查看完整文档
https://ipyvuetify.readthedocs.io/
用法
有关示例，请参阅示例笔记本。
可以使用Vuetify文档查找所有可用的组件和属性（在左侧栏或使用搜索字段）。Ipyvuetify尝试保持与Vue.js和Vuetify模板语法的接近，但也有一些差异
| 描述 | Vueify | ipyvuetify |
|---|---|---|
| 组件名称采用驼峰命名法，v-前缀被去除 | <v-list-tile .../> |
ListTile(...) |
| 子组件和文本定义在children traitlet中 | <v-btn>文本 <v-icon .../></v-btn> |
Btn(children=['text', Icon(...)]) |
| 标志属性需要布尔值 | <v-btn round ... |
Btn(round=True ... |
| 属性采用snake_case命名 | <v-menu offset-y .. |
Menu(offset_y=True ... |
| v_model属性（在ipywidgets中的值）直接包含值 | <v-slider v-model="some_property" ... |
Slider(v_model=25... |
| 事件监听器使用on_event定义 | <v-btn @click='someMethod()' ... |
button.on_event('click', some_method) |
def some_method(widget, event, data) |
||
| 可以使用Html类创建常规HTML标签 | <div>...</div> |
Html(tag='div', children=[...]) |
| 属性class和style需要后缀加下划线 | <v-btn class="mr-3" style="..." > |
Btn(class_='mr-3', style_='...') |
高级用法
.sync
可以通过使用名为update:[propertyNameInCamelCase]的事件来实现在属性修饰符的功能
(作用域)插槽.
Vueify
<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)
对于非作用域插槽，可以省略'scope': 'x'和v_on。
Vueify
<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(...)
])
图标
可用的图标
https://material.io/resources/icons/（已弃用）
- https://pictogrammers.github.io/@mdi/font/4.5.95/（自v1.2.0起）
- 替代用法
为了更专注于Web开发的方式以及更接近Vue/Vuetify API，可以使用VuetifyTemplate。请参阅示例或。
创建VuetifyTemplate的子类，定义自己的traitlets并设置模板字符串。traitlets将像vue-model中的属性一样从模板中访问。可以通过定义带有前缀vue_的方法（例如def vue_button_click(self, data)）并从模板中调用它来调用方法（例如@click="button_click(e)"）。
项目ipyvuetify直接从以下来源获得资金
赞助商
项目详情
关闭
ipyvuetify-1.10.0.tar.gz 的哈希值
| 算法 | 哈希摘要 | |
|---|---|---|
| SHA256 | 87dee6aaadf316ee27ed89a79b3d3c3f5e0f2e5b638da0681736048532545ac1 |
|
| MD5 | 4e29e25aec450240435f1e53354fbb6e |
|
| BLAKE2b-256 | e50cfc87f5a309b7376a3e7e48a14c8e3a9865d882f1217d35adddff6db94de3 |
关闭
ipyvuetify-1.10.0-py2.py3-none-any.whl 的哈希值
| 算法 | 哈希摘要 | |
|---|---|---|
| SHA256 | f867941a9b6a65dc560e9616d2ab3be79af2fcb4846eac93c7d5f74a58d96ee0 |
|
| MD5 | c5934eb17d733e6c60f083fa5e91a710 |
|
| BLAKE2b-256 | e41ec2e7b4ae5cb88be0f898579c2ce35cd4efae28783a805b0016bc0115a49a |
