cabreraalex

from ipywidgets import DOMWidget
from traitlets import Integer, Unicode
from ._frontend import module_name, module_version

class ExampleWidget(DOMWidget):
    """Example widget with a counter and increment button."""
    _model_name = Unicode('ExampleModel').tag(sync=True)
    _model_module = Unicode(module_name).tag(sync=True)
    _model_module_version = Unicode(module_version).tag(sync=True)
    _view_name = Unicode('ExampleView').tag(sync=True)

cabreraalex

<script>
  import { value } from './stores';
  
  let localValue = $value;
</script>

<style>
  h1 {
    color: purple;
  }

cabreraalex

from ipywidgets import DOMWidget
from traitlets import Integer, Unicode
from ._frontend import module_name, module_version

class ExampleWidget(DOMWidget):
    """Example widget with a counter, increment button, and units string."""
    _model_name = Unicode('ExampleModel').tag(sync=True)
    _model_module = Unicode(module_name).tag(sync=True)
    _model_module_version = Unicode(module_version).tag(sync=True)
    _view_name = Unicode('ExampleView').tag(sync=True)

cabreraalex

<script>
  import { value, count } from './stores';
  
  let localValue = $value;
</script>

<style>
  h1 {
    color: purple;
  }

cabreraalex

// Declare stores with their associated Traitlets here.
export const value = WidgetWritable<string>('value', '');
export const count = WidgetWritable<number>('count', 0);

// Set the model for each store you create.
export function setStoreModels(model: DOMWidgetModel): void {
  value.setModel(model);
  count.setModel(model);
}