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

tlx-editor - フォーム入力に特化したWeb components

2017/11/25
3
0

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プレミアムに登録して運営をサポートしてください！月額500円の他、半年（3,000円）、年間パック（6,000円）もあります。企業向けに3アカウント以上で請求書払いも可能です（年間一括のみ）。従業員の方向けのサービスにいかがですか？　プレミアムユーザのログインはこちらから

MOONGIFTの関連記事

もっと見る

コメント