ドロップダウンをリッチ化するライブラリまとめ

by moongift : 2018/01/09

HTMLのドロップダウンリストはよく使われるUIコンポーネントです。しかし標準のデザインでは使い勝手が良いとは言えません。一つ選択する際にも長くスクロールしなければならなかったり、複数選択では途中で解除されてしまったりします。

そこで今回はドロップダウンリストを便利にしてくれるライブラリを紹介します。

フィルタリング機能、複数選択対応、選択済みアイテムのハイライト表示、グルーピングなど多機能にしてくれます。左寄せだけでなく、右寄せにもできます。

複数選択のドロップダウンリストにチェックボックスが追加されます。常にキーを押しておく必要がなくなるので便利です。

最近選んだ項目を上に表示してくれます。地味な機能ですが、同じフォームを何度も使う機会がある場合に便利です。

複数選択可能なドロップダウンがかなり大きくなります。選択するとグレーアウトし、選択項目が右側に移る仕組みになっています。

ドロップダウンの項目にアイコンと説明書きが付けられます。かなり派手な表示になるので、用途は限られるかも知れませんが便利なライブラリです。

クリックすると表示状態を維持してくれるようになり、複数選択もキーボードの補助なしでサポートされます。選択された項目はカンマ区切りで並べて表示されます。

使い勝手の悪い機能でもJavaScriptの力で一気に便利に変身させられます。業務においても使い勝手の悪いまま使うよりもよっぽど生産性が向上するでしょう。UIが大きく変わるので操作性に慣れる必要がありますが、一度慣れてしまえば手放せないライブラリになりそうです。

From → HTML5

コメントは受け付けていません。

最近の投稿