These are the basic widgets included with Imperative.js. For details on how to write a widget yourself, refer to Simple Widgets in Imperative.js.

The basic widgets are meant to be useful and handy, not to cover absolutely every use case for the HTML element in question. If you’re using unusual events or properties of these widgets you may have to resort to writing your own, which is simple enough.

The basic widgets also use inline styles, rather than classes with a separate CSS stylesheet. Inline styles are simpler, and allow you to use the structure of javascript to keep track of dependencies and calculate common styles. If you prefer to use classes, you can simply wrap the built-in widgets in a span or div with a unique class name, and then use child selectors to style the HTML input elements inside.

Button

const Widgets = require("imperative/widgets")

example("Button", function*() {
  let state = {}
  while(true) {
    state = (yield* Widgets.button(
      I.h("span",
        {style: {backgroundColor: state.hover ? '#c99' : '#eaa'}},
        "Any markup can be used as a button"),
      state)).state
  }
}())

Text Input

example("Text Input", function*() {
  let state = {}
  while(true) {
    state = (yield* Widgets.textInput(
        'Placeholder', {border: '2px solid orange'}, state)).state
  }
}())

Checkbox

example("Checkbox", function*() {
  let state = {checked: true}
  while(true) {
    state = (yield* Widgets.checkbox(
        'Label', {border: '2px solid orange'}, state)).state
  }
}())

Radio Buttons

example("Radio Buttons", function*() {
  let state = {value: 'Two'}
  while(true) {
    state = (yield* Widgets.radio(
        ['One', 'Two', 'Three'],
        // Container styles
        {display: 'inline-block', border: '2px solid orange'},
        // Radio button styles
        {fontStyle: 'italic'},
        state)).state
    console.log("Radio State", state)
  }
}())

Select Dropdown

example("Select", function*() {
  let state = {value: 'Two'}
  while(true) {
    state = (yield* Widgets.select(
        ['One', 'Two', 'Three'],
        {border: '2px solid orange'},
        state)).state
    console.log("Select State", state)
  }
}())