tlx-editor - フォーム入力に特化したWeb components
Web componentsは多くの可能性を持っています。Web標準ではまだまだ貧弱なUIも、Web componentsを使うことでリッチであったり、複雑なUIコンポーネントが生まれていくことでしょう。 今回紹介するtlx-editorはその一例です。入力系コンポーネントを一手に提供するライブラリになります。
tlx-editorの使い方
tlx-editorは tlx.bind で実行します。例えば次のようになります。
<body onload="tlx.bind({
name:'Joe',
age:20,
honorific:'Mx.',
seatingPreferences:['aisle','exit'],
optIn:true,
tier:'gold',notes:'',attest:'',rating:3
})(document.getElementById('page'))">
<div id="page">
<form>
<tlx -editor type="text" value="${name}" label="Name:" t-on="${{input:this.linkState('name')}}" required></tlx>
:
<tlx -editor type="checkbox" value="${optIn}" label="Opt In:" t-on="${{click:this.linkState('optIn')}}"></tlx>
</form>
</div>
デモです。
入力チェックも行われます。
日本語入力に対する実装は問題があります…。
ツールチップの表示もできます。
tlx-editorはtlx-editorというタグを使います。そしてテキストやドロップダウン、チェックボックスなどを指定します。さらにラベルや入力時のイベントなども指定できます。フォームだけに特化しているのがWeb componentsとしてコンパクトにまとまっていて便利です。
tlx-editorはJavaScript製のオープンソース・ソフトウェア（MIT License）です。