Appmixer
Search…
UI & Widgets
Appmixer UI is a tool for building user interfaces with component-based widgets.

Configuration

Widgets are included in ui of appmixer instances made with the basic UMD constructor:
<script src="appmixer/package/appmixer.js"></script>
<script>
const appmixer = new Appmixer(/* ... */)
appmixer.ui.FlowManager(/* ... */)
<script>
Register individual widgets for usage with the advanced ESM constructor:
import { Appmixer, FlowManager } from 'appmixer/package/appmixer.es.js';
const appmixer = new Appmixer(/* ... */);
appmixer.ui('FlowManager', FlowManager)
appmixer.ui.FlowManager(/* ... */)
Set up a new widget instance with config parameters and set/get methods:
const widget = appmixer.ui.Widget(config)
widget.set(key, value)
widget.get(key)

config.el

Type: String|Element | Default: null
HTML DOM element to serve as a container of the widget.

config.theme

Type: Object | Default: DefaultTheme
Custom theme definition.

config.l10n

Type: Object | Default: DefaultL10N
Custom localization texts.

config.lang

Type: String | Default: en
Language code for localization of components.

config.api

Type: Object | Default: DefaultAPI
Custom API methods.

Instance

widget.open

widget.open()
Mount the widget instance and render it inside the el container.

widget.close

widget.close()
Unmount the widget instance and hide the el container.

widget.reload

widget.reload()
Reload the entire widget.

widget.reset

widget.reset()
Reset the state of the widget to defaults.

widget.state

Use state for properties that may change at any time when the widget is active.
widget.state(path, value) // setter
widget.state(path) // getter
Example

widget.set

widget.set(key, value)
Set config property.

widget.get

widget.get(key, value)
Get config property.

widget.on

widget.on(name, handler)
Add a new event listener and disable the default handler of the event.

widget.off

widget.off(name)
Remove an event listener and enable the default handler of the event.
Copy link
On this page
Configuration
Instance