input-boolean/demo/demo.js

A boolean-input-type component built with bel and csjs-inject

const csjs = require('csjs-inject')
const inputboolean = require('../')

document.body.innerHTML = `<style>
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
  background-color: #000;
  color: #d9d9d9;
}
.booleanField {
  display: grid;
  grid-template: auto / repeat(2, 50%);
  width: 300px;
}
.columns {
  color: white;
  background-color: #2c323c;
  text-align: center;
  padding: 2px 6px;
}
.false {
  background-color: #fd547d;
}
.true {
}
</style>`

const classes = { columns: 'columns', false: 'false', true: 'true', booleanField: 'booleanField' }
const colors = {
  booleanFieldColor: 'white',
  booleanFieldActiveColor: '#2c323c',
  booleanFieldBackgroundColor: '#2c323c',
  booleanFieldTruedBackgroundColor: '#8EF9F6',
  booleanFieldFalsedBackgroundColor: '#fd547d'
}
const log = document.createElement('pre')
const el = inputboolean({ theme: { classes, colors }, cb: (err, e, val) => {
  if (err) log.appendChild(document.createTextNode(`${err}\n`))
  else log.appendChild(document.createTextNode(`ok: ${val}\n`))
}, focus })
function focus(e) {
  console.log(e.target)
}
document.body.appendChild(el)
document.body.appendChild(log)