ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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)です。

anywhichway/tlx-editor: A single HTML component supporting all input types, select, textarea, radio groups, and star ratings.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2