Published
Edited
Aug 17, 2022
import { toInput } from "@kotelnikov/to-input"
viewof example1 = toInput(htl.html`<div>
<h3>This is an input!</h3>
${Inputs.text({ value: "Hello!" })}
</div>`)
example1
example2
viewof example3 = toInput(
htl.html`<div>
<h3>This is an HTML with multipe inputs!</h3>
<div style="display: flex; gap: 0.5em;">
<div>First name: ${Inputs.text({ value: "John" })}</div>
<div>Last name: ${Inputs.text({ value: "Smith" })}</div>
</div>
<div>
${Inputs.toggle({ label: "Accept our agreement:", value: true })}
</div>
</div>`,
["firstName", "lastName", "ok"]
)
example3
signature
viewof signature = drawLine()
simplify = require("simplify-js")
example4
viewof example4 = {
return toInput(
htl.html`<div>
<h3>This is an HTML with multipe inputs!</h3>
<div style="display: flex; gap: 0.5em;">
<div>First name: ${Inputs.text({ value: "John" })}</div>
<div>Last name: ${Inputs.text({ value: "Smith" })}</div>
</div>
<div>
Signature:
${drawLine()}
</div>
<div>
${Inputs.toggle({ label: "Accept our agreement:", value: true })}
</div>
</div>`,
["firstName", "lastName", "signature", "ok"]
);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
