List of Components
컴포넌트 목록은 상황에 따라 추가, 삭제 및 디자인이 변경될 수 있습니다.
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide
1. Layout [06]
레이아웃 컴포넌트는 페이지의 영역을 설정하기 위한 컴포넌트로 전체적인 페이지 레이아웃을 설정할 수 있도록 지원한다.
No | Component | Description |
---|---|---|
1 | Row | 레이아웃에 가장 기본인 행(Row) 추가 |
2 | Column | 페이지 레이아웃에 맞추어 열(Col) 추가 |
3 | 2 Cols Layout | 여러 행과 열을 동시에 추가하고자 하는 경우 사용 |
4 | Container | 추가 시 빈 컨테이너 생성 |
5 | Tab | 탭 각각에 다양한 컴포넌트를 연결 할 수 있는 컨테이너 생성 |
6 | Accordion | 아코디언 목록 각각에 원하는 컴포넌트를 연결 할 수 있는 컨테이너 생성 |
2. Elements [19]
엘리먼트 컴포넌트는 UI를 구성하기 위한 기본적인 컴포넌트들로 구성되며, 직접 사용하거나 다른 컴포넌트의 구성 요소로써 사용된다. 또한 상세한 스타일을 지정할 수 있는 특징이 있다. (옵션 설명 : Element Components [19])
No | Component | Description |
---|---|---|
1 | Horizontal Line | |
2 | Vertical Line | |
3 | Text | |
4 | Heading | |
5 | Rectangle | |
6 | Image | |
7 | Icon | |
8 | Card | |
9 | Table | |
10 | Timeline | |
11 | Video | |
12 | Audio Player | |
13 | Map | |
14 | Countdown | |
15 | Calendar | |
16 | Indicator | |
17 | Link Area | |
18 | HTML | |
19 | Button |
3. Form [08]
다양한 입력 컴포넌트를 폼에 추가하여 사용 할 수 있다. (옵션 설명 : Form Components [8] )
No | Component | Description |
---|---|---|
1 | Text Input | |
2 | Password Input |
|
3 | Textarea | |
4 | Number Input | |
5 | Checkbox | |
6 | Radio | |
7 | Range Controller | |
8 | Rating new |
4. Header [05]
페이지의 Body 최상단에 Header로 자주 사용 되고 있는 패턴을 다음과 같이 컴포넌트 세트로 구성하여 제공한다. (옵션 설명 : Header Component - 버그 수정중 )
No | Component | Description |
---|---|---|
1 | with Background | |
2 | with Countdown | |
3 | with Video | |
4 | with Chart | |
5 | with Device |
5. Content [09]
페이지의 Body - Content로 사용 할 수 있는 패턴을 다음과 같이 컴포넌트 세트로 구성하여 제공한다. 컨텐츠 컴포넌트는 모두 Simple Input 타입으로 단순한 이미지와 텍스트 입력 등으로 컴포넌트 컨텐츠를 셋팅하고 Display로 출력 한다.
No | Component | Description |
---|---|---|
1 | Card Content | |
2 | Feature | |
3 | Client | |
4 | Download Content | |
5 | Media | |
6 | Team | |
7 | Pricing | |
8 | Testimonial | |
9 | Banner new |
6. Section [16]
페이지의 Body - Section으로 사용 할 수 있는 패턴을 다음과 같이 컴포넌트 세트로 구성하여 제공한다. 섹션 컴포넌트는 API Call 타입의 Data Set & Display를 목적으로 가지며, 다양한 UI Type을 옵션으로 제공한다.
No | Component | Description |
---|---|---|
1 | Timeline Section | |
2 | Gallery Section | |
3 | Table Section | |
4 | Chart Section | |
5 | Countdown Section | |
6 | Step Section | |
7 | Upcoming Event | |
8 | SNS | |
9 | Contact | |
10 | Call To Action | |
11 | Subscription | |
12 | Card Section | |
13 | Banner Section new | Swiper, Columns, Random 유형의 배너 섹션 사용 가능 |
14 | Board new | 상품리뷰, 갤러리, 블로그, Q&A, FAQ, 일반 게시판 Config 사용 가능 |
15 | Survey Form new | 설문조사 Config 사용 가능 |
16 | Board Summary | ex. 대시보드에서 볼 수 있는 Board 요약 리스트 |
7. Footer [04]
페이지의 Footer로 많이 사용되는 패턴을 다음과 같이 컴포넌트 세트로 구성하여 제공한다.
No | Component | Description |
---|---|---|
1 | Footer with SNS | |
2 | Footer with Contact | |
3 | Footer with Menu | |
4 | Footer with Copyright |
|