Web UI Parts

動かして、読んで、判断できるUI部品集

用途に合うパーツを探し、画面上で動きを試して、必要なコードをコピーできます。利用前に変更する箇所と利用条件も同じページで確認できます。

すぐに試せる

UIパーツ

状態表示追加ライブラリ不要

通常、0件、エラーの表示を切り替え、テーマや表示幅による見え方の違いを試せる通知リストです。

フィードバック追加ライブラリ不要

読み込み、内容あり、0件、失敗、再試行、更新中、更新失敗を、サンプルデータと回復操作で確認できる状態レシピです。

データ表示追加ライブラリ不要

表としての意味構造を保ち、長い日本語や大きい金額を含むデータを狭い画面では表コンテナ内だけ横スクロールして比較できるレシピです。

フォーム追加ライブラリ不要

入力項目ごとの修正方法と送信時のエラー要約を示し、二重送信を防ぎ、送信失敗後も入力を保持するお問い合わせフォームです。

問題から解決手順へ

実装判断、品質、利用条件を短い導線から確認できます。