GitHub - novrain/vue3-lumino-widget: A Vue.js wrapper for jupyter lumino package (original) (raw)

A Vue.js wrapper for jupyter lumino package

GIF

Getting Started

Install vue3-lumino-widget with npm:

npm install vue3-lumino-widget

with yarn:

yarn add vue3-lumino-widget

Usage

Import the component or register it globally in your Vue instance:

import { LuminoBoxPanel, LuminoWidget } from "vue3-lumino-widget"

Use the component in your template:

Vue3 Lumino Widget

BoxPanel with dock layout Drag and drop the tab item
Current active: {{ active?.item.name || 'none' }}

{{ item.name }}

<h6>TabPanel</h6>
<LuminoTabPanel>
  <LuminoWidget v-for="item in tabItems"
                :key="item.id"
                @close="onWidgetInTabPanelClose"
                @active="onWidgetInTabPanelActive"
                @show="onWidgetInTabPanelShow"
                :title-active-class="activeClass"
                :closable="item.closable"
                :item="item">
    <p class="item-component">{{ item.name }}</p>
  </LuminoWidget>
</LuminoTabPanel>