Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

BackOffice Builder는 27개의 입력 컴포넌트를 제공한다.

...

Select, Slider, Tags, Text, Time, TimeRange, Zipcode

<작성중>

No

Component

Description

1

Text Input

텍스트 정보를 입력 받을 경우 사용

2

Textarea

멀티 라인 텍스트 인풋 박스로 긴 텍스트 입력이 필요 할 경우 사용

3

TextEditor

텍스트, 이미지, 영상, 표, 목록, 라인, 에디팅 편집 기능이 필요한 경우 사용

4

Checkbox

여러 요소의 중복 선택이 필요한 경우 사용

5

Radio

여러 요소 중 1개만 선택해야 하는 경우 사용

6

Select

창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용

7

Buttons

사용자의 결정에 대한 정보를 입력 받을 경우 사용

8

Switch

특정 상태를 ON/OFF 할 경우 사용

9

DatePicker

날짜 정보를 선택하여 입력해야 하는 경우 사용

10

TimePicker

시간 정보를 선택하여 입력해야 하는 경우 사용

11

Transfer

두 개의 데이터 그룹 간의 정보 전송이 필요한 경우 사용

12

Rate

평가 정보를 표시해야 하는 경우 사용

※ Free Icon 출처: https://thenounproject.com

...

입력 유형

Input Component는 5가지 유형으로 분류 할 수 있다.

No

Data Type

Components

1

숫자형(Integer)

Number, Rate, Slider

2

문자형(String/Text)

Text, Textarea, TextEditor, Password, Tags, Color

3

날짜형(Date)

Date, BirthDate, DateRange, DateTime, DateTimeRange

4

삽입형(File/Image)

File, Image, ImageEditor

5

선택형(boolean/Reference)

Switch, Radio, Select, Cascader, Checkbox, Transfer, Button

PropertyType 에 따라 적용 가능한 컴포넌트 종류는 상이하다.

1. 숫자형 : Integer

No

Elements

Description

1

Number Input

Image Added

2

Rate

Image Added

3

Slider

Image Added

2. 문자형 : String/Text

No

Elements

Description

1

Text

Image Added

2

Textarea

Image Added

3

TextEditor

Image Added

4

Password

Image Added

5

Tags

Image Added

6

Color

Image Added

3. 날짜형 : Date

Date, BirthDate, DateRange, DateTime, DateTimeRange

No

Elements

Description

1

Date

Image Added

2

BirthDate

Image Added

3

DateRange

Image Added

4

DateTime

Image Added

5

DateTimeRange

Image Added

4. 삽입형 : File/Image

File, Image, ImageEditor

No

Elements

Description

1

File

Image AddedImage Added
Image AddedImage Added

2

Image

Image AddedImage Added
Image AddedImage Added

3

ImageEditor

Error

5. 선택형 : boolean/Reference

Switch, Radio, Select, Cascader, Checkbox, Transfer, Button

No

Elements

Description

1

Switch(Boolean)

Image AddedImage Added

2

Radio

Image Added

3

Select

Image Added

4

Select-Multiple

Image Added

5

Casader

Image Added

6

Casader-Multiple

Image Added

7

Checkbox

Image Added

8

Transfer

Image Added

9

Button

Image Added