ナビゲーション
階層メニュー(Simple)
シンプルな実装です
A
UI
SystemInterface
- プロフィール
- シェア›
- 設定›
- お知らせ
- お気に入り
階層メニュー(三角判定)
カーソルとサブメニュー上下端を結ぶ三角形に当たり判定を付与しています
A
UI
SystemInterface
- プロフィール
- シェア›
- 設定›
- お知らせ
- お気に入り
フォームバリデーション(タイミング)
1文字ごとに判定
入力中であってもバリデーションが走ります
フォーカスが外れた後に判定
入力し終えたタイミングでバリデーションが走ります
最終入力から数秒後に判定
入力が止まってから少し待ってバリデーションが走ります
送信時のみ判定
送信時にバリデーションが走ります
フォームバリデーション(電話番号)
3つのボックスに分解
-
-
ハイフン必須
ハイフン任意
フォームバリデーション(クレジットカード)
4つのボックスに分解
1つのボックスで自動整形
4桁ごとに半角スペースを自動挿入します
削除操作と取り消し
削除確認モーダル
「本当に削除しますか?」の一問だけ確認する
削除と入力して削除
誤操作を防ぐための二段階確認
確認不要&Undo可
即座に削除されるが、しばらくは元に戻せる
買い物リスト
ローディング表示
スピナーのみ
スケルトンのみ
スイッチ
状態か操作か不明なボタン
今ONなのか押すとONになるのかが分からない
状態を表すボタン
冪等なトグルスイッチ
https://ui.tato.bio/idempotent-toggle
左半分を押すと必ずOFF、右半分を押すと必ずONになる。
通知の表示方法
モーダル表示
操作をブロックするモーダルで表示される
トースト表示
数秒で消えるトーストで表示される