「あのデザインってなんっていうの？」早見表

# 概要
Frontendは「色々なComponentを使いこなせる」のが重要になってきています。

しかし一方で、「実現したいデザインの名称がわからなくて、検索できない！」って問題が往々にしてあります。

「リストを下にスワイプすると検索ボックスが出てくるiosのやつってなんて名前で検索すれば良いの！？」ってなっちゃいます。

ということで、Githubで見つけたComponent Libraryを眺めながら見つけた名称を随時まとめてみました！

（もしかしたら一般的でない名称も混ざってるかもしれないので、そのときはご指摘ください。）

# 名称一覧
## DataTable | DataGrid

ソート、フィルタリング、ページングなどの機能を備えたテーブル。

<img width="973" alt="DataTable.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/9a2840f5-3b98-82a7-28f3-35fc0fef326b.png">

ex) [Vue Datatable](https://www.laravel-enso.com/examples/table)

## [Float | Floating | Sticky] [Thead | Header]

スクロールしていくとテーブルのヘッダが固定化されるテーブル。

<img width="386" alt="floatingThead.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/6635d2c2-c69a-3798-7e0f-17c236f5c4a1.png">

ex) [vue-floatthead](https://github.com/tmlee/vue-floatThead)

## Toast | Notifications | FlashMessage | SnackBar | Alert

画面上部や画面下部に一時的にメッセージを出す機能。

<img width="351" alt="Notifications.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/df9019d6-2208-ad32-4c27-76c2c0df0c95.png">

ex) [VueNotifications](https://se-panfilov.github.io/vue-notifications/#/)
ref) [SnackBars](https://material.io/design/components/snackbars.html)

## Loaders | Spinners

Loading中にでるくるくる回るもの。

<img width="79" alt="Screen Shot 2561-11-13 at 19.04.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/7cd91117-41bb-9fcd-ee14-b7787de7277b.png">

ex) [vue-simple-spinner](https://github.com/dzwillia/vue-simple-spinner)

## Skeleton Screen

ロード中などにテキストや画像のモックアップを出すもの。

<img width="820" alt="Screen Shot 2561-11-13 at 19.07.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/cf58322b-2776-1dc3-04ab-24a6f0c28116.png">

ex) [tb-skeleton](https://github.com/anthinkingcoder/tb-skeleton)
ref) [Building Skeleton Screens with CSS Custom Properties](https://css-tricks.com/building-skeleton-screens-css-custom-properties/)

## ProgressBar | LoadingBar

ロード状況に合わせて画面上部に伸びるバー。

<img width="395" alt="Screen Shot 2561-11-13 at 19.11.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/52a9b582-bc2e-643b-e575-347cb6c28cc9.png">

ex) [Vue 2 Loading Bar](https://github.com/BosNaufal/vue2-loading-bar)

## Tooltip | Popover

要素の補足情報。

<img width="153" alt="Screen Shot 2561-11-13 at 19.13.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/6d76d7d3-c2bd-c072-7181-486b5374438d.png">

ex) [v-tooltip](https://github.com/Akryum/v-tooltip)

## Overlay | Modal | Alert | Dialog | Lightbox | Popup

ユーザが操作するまで親ウィンドウに操作を戻さない子ウィンドウ。

<img width="679" alt="Screen Shot 2561-11-13 at 19.14.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/edb42eb5-34b0-c48d-ce28-3aec72743beb.png">

ex) [vuedals](https://github.com/javisperez/vuedals)

## Parallax

ウィンドウのスクロールとは違う速度で画像をスクロールさせる効果。

ex) [vue-parallax](https://github.com/vue-comps/vue-parallax)

## AccordionMenu

広がる要素を持つメニュー。

<img width="911" alt="Screen Shot 2561-11-13 at 19.20.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/c7a0db69-7bae-5a01-7838-45a12dbeafc3.png">

ex) [vue-accordion](https://github.com/zeratulmdq/vue-accordion)

## Drawar

ホーム画面とは別に用意されている表示領域。

<img width="389" alt="Screen Shot 2561-11-13 at 19.24.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/39f4812e-ceab-ad74-81c0-2075f28ff6d2.png">

ex) [vue-drawer-layout](https://github.com/hjl19911127/vue-drawer-layout)
ref) [ドロワー](https://www.weblio.jp/content/%E3%83%89%E3%83%AD%E3%83%AF%E3%83%BC)

## Carousel | Slider | Swiper

複数の要素がスライドして切り替わるやつ

<img width="612" alt="Screen Shot 2561-11-13 at 19.30.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/b4d52b4d-dce8-f98f-ec57-d26524f2c220.png">

ex) [Slick for Vue.js](https://github.com/staskjs/vue-slick)

## InfiniteScroll | InfiniteLoading | InifiniteList

最後の要素まで行くと、次のページを自動でロードして表示してくれるやつ。

<img width="313" alt="Screen Shot 2561-11-13 at 19.35.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/875a116d-2e07-485a-9bdc-fe61ed32956d.png">

ex) [vue-infinite-loading](https://github.com/PeachScript/vue-infinite-loading)

## PullToReflesh | SwipeToReflesh

（主に下に）引っ張ると、要素のリフレッシュが走るもの。

<img width="369" alt="Screen Shot 2561-11-13 at 19.43.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/faaf3021-63c2-78d6-9fbd-12e47c248603.png">

ex) [vue-pull-refresh](https://github.com/lakb248/vue-pull-refresh)
ref) [Android swipe to refresh](https://material.io/design/platform-guidance/android-swipe-to-refresh.html)

## PullToSearch | SwipeForSearch

下に引っ張ると検索ボックスがでるUI。



## FlashCard

<img width="427" alt="Screen Shot 2561-11-13 at 19.46.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/e2ac78a2-f845-443d-22b7-b24a335f4b80.png">

ex) [Vue Flashcard](https://github.com/cuduy197/vue-flashcard)

## Particle

粒子っぽいデザイン

<img width="395" alt="Screen Shot 2561-11-13 at 19.50.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/b4fe72c0-a6ab-6117-1783-8ead4cdf2689.png">

ex) [vue-particles](https://github.com/creotip/vue-particles)

## Affix

コンテンツと連動して動く目次

<img width="979" alt="Screen Shot 2561-11-13 at 19.54.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/71a2a19b-6895-8779-bd27-9cc5b641cf33.png">

ex) Qiitaの記事の右側にある目次
ex) [vue-affix](https://github.com/eddiemf/vue-affix)

## ContextMenu

右クリックなどで出るメニュー

<img width="297" alt="Screen Shot 2561-11-13 at 19.58.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/57c3e22b-e8d5-31d8-29d2-c279a850426b.png">

ex) [vue-context-menu](https://github.com/vmaimone/vue-context-menu)

## FloatLabel

<img width="187" alt="Screen Shot 2561-11-13 at 20.02.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/7c32c224-d6d7-2cb0-a4ad-3fa6e6130586.png">

ex) [vue-float-label](https://github.com/bkzl/vue-float-label)

## Wizard | Stepper

作業ステップをわかりやすく表記するもの。

<img width="236" alt="Screen Shot 2561-11-13 at 20.04.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/1a4ff21e-7114-f92c-4171-7ae5517c5f90.png">

ex) [vue-form-wizard](https://github.com/BinarCode/vue-form-wizard)

## Tour | PageGuide | Coachmark

要素を順番にハイライトしてアプリケーションをガイドする機能

<img width="807" alt="Screen Shot 2561-11-13 at 20.06.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/2dbe0049-d317-29f6-53d6-7bbc3afe8066.png">

ex) [vue-tour](https://github.com/pulsardev/vue-tour)

## WaterfallLayout | Masonry

Pinterestみたいな配置の要素

<img width="458" alt="Screen Shot 2561-11-13 at 20.10.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/46be31d0-eb98-7d0f-20cb-26c087518a47.png">

## Headroom

Swipeで消えるHeader

ex) [vue-headroom](https://github.com/dalphyx/vue-headroom)

## InPlaceEditor
クリックするとその場で編集できるテキスト要素

<img src="https://camo.githubusercontent.com/ebb27e45c0a39f92b1848a83293da3162eae00ee/687474703a2f2f692e696d6775722e636f6d2f38766967356d312e676966">
ref) https://github.com/dkwingsmt/ReactInlineEdit#readme

## Cascader

子要素のあるセレクトボックス

<img width="402" alt="スクリーンショット 2020-02-14 20.12.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74964/c682d045-bf3a-0948-3eef-ceac81700e94.png">

ex)

- https://ant.design/components/cascader/
- https://rsuitejs.com/en/components/cascader