• ホーム
• 未分類

カテゴリー：未分類

1. 08.16

   Skeleton

   こういう感じのUI データ読み込み中に「最終的なコンテンツの形」を灰色のプレースホルダーで先に見せるUI UXで大きいのは、「レイアウトシフト」を抑えられること。（画面がガクッと行く現象） Radixでは用意さ…

   • 未分類
   • コメントを書く

2. 08.16

   Command Palette

   Ctrl + Kで開くUIが多い。(chatgptとかもそう。) Escで閉じる。 従来の検索窓に比べて、データだけじゃなく「操作、機能」まで検索ができる。（しかも早い。） VSCode、Githubで一般的だ…

   • 未分類
   • コメントを書く

3. 08.16

   アイコンライブラリ

   アグリゲーター型 複数のアイコンセット統合、いろんなテイストを混ぜたい場合に使う。 react-icons Iconify キュレーション型 統一感あるデザイン。 Lucide shadcn/…

   • 未分類
   • コメントを書く

4. 08.16

   Dropdown Menu、Select

   Dropdown Menu 選択したものが選ばれるわけじゃない。次のアクションのトリガーになるだけ。 selectと違いフォームに投げない。 中にさらにチェックボックスなど状態や機能も持たせることができる。 …

   • 未分類
   • コメントを書く

5. 08.16

   Tooltip、Popover(ポップオーバー)、Bottom Sheet

   インフォメーションアイコンとかをクリックしたときに使い分ける。 Tooltip ちょっとした吹き出し。 Popover 吹き出しに、ボタンとかリンクとか追加したい場合。Tooltipの強化版。 …

   • 未分類
   • コメントを書く

6. 08.16

   React UIライブラリの歴史

   2015年 MUIが登場 2018年 テーマなどアプリケーションの設計思想まで提供する時代になった。 MUI Chakura UI Emotion stlyed-component The…

   • 未分類
   • コメントを書く

7. 08.15

   Compound Components（複合コンポーネント）

   [crayon-6a8d042d1fb4c768251847/] メリット モーダルに属する部品だと関係性を示せること。 …

   • 未分類
   • コメントを書く

8. 08.15

   パブリング

   子要素で起きたイベント（clickなど）を親で拾うこと。onclickも対象だし、addEventListenerも対象。 ユースケース 大量の子要素の商品があったときに何かしらまとめたい場合。 [crayon-6a8d…

   • 未分類
   • コメントを書く

9. 08.15

   Backdrop

   モーダルの後ろに置く半透明の膜のこと。 こんな感じに書く。 [crayon-6a8d042d202cc627277553/] クリックしたら閉じる また、クリックすると閉じる機能なら、onclickをつけ…

   • 未分類
   • コメントを書く

10. 08.15

    z-index

    こんな感じに決める。 レイヤーz-index用途通常コンテンツauto / 0普通の画面浮遊要素10sticky、固定ヘッダー等ドロップダウン100セレクト、メニューポップオーバー200Tooltip、Popoverモーダル300D…

    • 未分類
    • コメントを書く