37
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-05

概要

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

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

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

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

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

名称一覧

DataTable | DataGrid

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

DataTable.png

ex) Vue Datatable

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

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

floatingThead.png

ex) vue-floatthead

Toast | Notifications | FlashMessage | SnackBar | Alert

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

Notifications.png

ex) VueNotifications
ref) SnackBars

Loaders | Spinners

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

Screen Shot 2561-11-13 at 19.04.49.png

ex) vue-simple-spinner

Skeleton Screen

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

Screen Shot 2561-11-13 at 19.07.00.png

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

ProgressBar | LoadingBar

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

Screen Shot 2561-11-13 at 19.11.40.png

ex) Vue 2 Loading Bar

Tooltip | Popover

要素の補足情報。

Screen Shot 2561-11-13 at 19.13.10.png

ex) v-tooltip

Overlay | Modal | Alert | Dialog | Lightbox | Popup

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

Screen Shot 2561-11-13 at 19.14.56.png

ex) vuedals

Parallax

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

ex) vue-parallax

AccordionMenu

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

Screen Shot 2561-11-13 at 19.20.40.png

ex) vue-accordion

Drawar

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

Screen Shot 2561-11-13 at 19.24.28.png

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

Carousel | Slider | Swiper

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

Screen Shot 2561-11-13 at 19.30.53.png

ex) Slick for Vue.js

InfiniteScroll | InfiniteLoading | InifiniteList

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

Screen Shot 2561-11-13 at 19.35.10.png

ex) vue-infinite-loading

PullToReflesh | SwipeToReflesh

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

Screen Shot 2561-11-13 at 19.43.07.png

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

PullToSearch | SwipeForSearch

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

FlashCard

Screen Shot 2561-11-13 at 19.46.49.png

ex) Vue Flashcard

Particle

粒子っぽいデザイン

Screen Shot 2561-11-13 at 19.50.37.png

ex) vue-particles

Affix

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

Screen Shot 2561-11-13 at 19.54.41.png

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

ContextMenu

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

Screen Shot 2561-11-13 at 19.58.55.png

ex) vue-context-menu

FloatLabel

Screen Shot 2561-11-13 at 20.02.03.png

ex) vue-float-label

Wizard | Stepper

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

Screen Shot 2561-11-13 at 20.04.02.png

ex) vue-form-wizard

Tour | PageGuide | Coachmark

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

Screen Shot 2561-11-13 at 20.06.54.png

ex) vue-tour

WaterfallLayout | Masonry

Pinterestみたいな配置の要素

Screen Shot 2561-11-13 at 20.10.16.png

Headroom

Swipeで消えるHeader

ex) vue-headroom

InPlaceEditor

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

ref) https://github.com/dkwingsmt/ReactInlineEdit#readme

Cascader

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

スクリーンショット 2020-02-14 20.12.58.png

ex)

37
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?