BETA

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

投稿日:2019-12-08
最終更新:2019-12-08

概要

フロントエンド開発では「既存Componentを使いこなせる」のが重要になってきています。

しかし一方で、「実現したいデザインの名称がわからなくて、検索できない!」ってことありませんか?

「リストを下にスワイプすると検索ボックスが出てくるiosのやつってなんて名前で検索すれば良いの!?」ってなると、実装方法を調べることすら困難です。

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

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

名称一覧

DataTable | DataGrid

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

ex) Vue Datatable

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

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

ex) vue-floatthead

Toast | Notifications | FlashMessage | SnackBar

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

ex) VueNotifications
ref) SnackBars

Loaders | Spinners

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

ex) vue-simple-spinner

Skeleton Screen

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

ex) tb-skeleton
ref) Building Skeleton Screens with CSS Custom Properties

ProgressBar | LoadingBar

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

ex) Vue 2 Loading Bar

Tooltip | Popover

要素の補足情報。

ex) v-tooltip

Overlay | Modal | Alert | Dialog | Lightbox | Popup

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

ex) vuedals

Parallax

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

ex) vue-parallax

AccordionMenu

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

ex) vue-accordion

Drawar

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

ex) vue-drawer-layout
ref) ドロワー

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

ex) Slick for Vue.js

InfiniteScroll | InfiniteLoading | InifiniteList

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

ex) vue-infinite-loading

PullToReflesh | SwipeToReflesh

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

ex) vue-pull-refresh
ref) Android swipe to refresh

FlashCard

ex) Vue Flashcard

Particle

粒子っぽいデザイン

ex) vue-particles

Affix

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

ex) Qiitaの記事の右側にある目次
ex) vue-affix

ContextMenu

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

ex) vue-context-menu

FloatLabel

ex) vue-float-label

Wizard | Stepper

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

ex) vue-form-wizard

Tour | PageGuide

アプリケーションのガイド

ex) vue-tour

WaterfallLayout | Masonry

Pinterestみたいな配置の要素

Headroom

Swipeで消えるHeader

ex) vue-headroom

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

読書記録: https://booklog.jp/users/dorarep twitter: https://twitter.com/dorarep

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう