개요

Frontend는 "다양한 Component를 다루는"것이 중요해지고 있습니다.

그러나 한편으로, 「실현하고 싶은 디자인의 명칭을 모르고, 검색할 수 없다!」라고 문제가 흔히 있습니다.

"목록을 아래로 스 와이프하면 검색 박스가 나오는 ios의 녀석은 이름으로 검색하면 좋을 거야!?"라고 되어 버립니다.

그래서 Github에서 찾아낸 Component Library를 바라보면서 찾아낸 명칭을 수시로 정리해 보았습니다!

(어쩌면 흔하지 않은 명칭도 섞여 있을지도 모르기 때문에, 그 때는 지적해 주세요.)

명칭 일람

DataTable | DataGrid

정렬, 필터링, 페이징 등의 기능을 갖춘 테이블.



ex) Vue Datatable

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

스크롤해 가면 테이블의 헤더가 고정화되는 테이블.



ex) vue-floatthead

Toast | Notifications | FlashMessage | SnackBar | Alert

화면 상단이나 화면 하단에 일시적으로 메시지를 내는 기능.



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) 서랍

Carousel | Slider | Swiper

여러 요소가 슬라이드하고 전환하는 사람



ex) Slick for Vue.js

InfiniteScroll | InfiniteLoading | InifiniteList

마지막 요소까지 가면 다음 페이지를 자동으로 로드하여 표시해주는 사람.



ex) vue-infinite-loading

PullToReflesh | SwipeToReflesh

(주로 아래로) 당기면, 요소의 리프레시가 달리는 것.



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

PullToSearch | SwipeForSearch

아래로 당기면 검색 상자가 나오는 UI.

FlashCard

ex) Vue Flashcard

Particle

입자 같은 디자인



ex) vue-particles

Affix

콘텐츠와 연동하여 움직이는 목차



ex) Qiita 기사의 오른쪽에있는 목차
ex) vue-affix

ContextMenu

오른쪽 클릭 등으로 나오는 메뉴



ex) vue-context-menu

FloatLabel

ex) vue-float-label

마법사 | 스티퍼

작업 단계를 알기 쉽게 표기하는 것.



ex) vue-form-wizard

Tour | PageGuide | Coachmark

요소를 순차적으로 강조하여 애플리케이션을 안내하는 기능



ex) vue-tour

WaterfallLayout | Masonry

Pinterest 같은 배치 요소

Headroom

Swipe로 사라지는 Header

ex) vue-headroom

InPlaceEditor

클릭하면 그 자리에서 편집할 수 있는 텍스트 요소

ref) htps : // 기주 b. 코 m / d 쿠엔 gsmt / 레아 c 짱 네 ぢ t # 레아 d

Cascader

자식 요소가 있는 선택 상자



ex)

htps // 앙 t. 데시 겐 / 코 m 포넨 ts / 또는 s 또는 r /

htps : // r 굳이 js. 코 m / 엔 / 코 m 포넨 ts / 또는 s 또는 r