TextEditor - backup
- 1 UI 유형
- 2 상태 정보
- 3 셋팅 옵션
- 3.1 Common Options
- 3.1.1 1. Size
- 3.1.2 2. Field Size
- 3.1.3 3. Placeholder
- 3.1.4 4. Tooltip
- 3.1.5 5. Helper text (=Comment)
- 3.2 Text Editor Options
- 3.2.1 1. Editor Type
- 3.2.2 2. Height Min Size
- 3.2.3 3. Height Max Size
- 3.3 ETC : Text Editor in the Form
- 3.3.1 1. Hide Label
- 3.3.2 2. Grouping
- 3.1 Common Options
텍스트 에디터는 단순한 문서 파일을 편집하기 위한 컴포넌트이다.
UI 유형
텍스트 에디터의 유형은 2가지로 구분한다.
No | Basic Text Field | Description |
---|---|---|
1 | Default Text Editor | 플로팅 스타일의 인라인 텍스트 에디터 |
2 | Fixed Text Editor | 에디트 기능이 펼침 형태로 고정되어 있는 텍스트 에디터 |
상태 정보
텍스트 에디터의 상태는 아래와 같이 4가지로 표현된다.
ex Default Text Editor
Normal | Hover |
---|---|
Active | Disabled |
ex Fixed Text Editor
Normal | Hover |
---|---|
Active | Disabled |
셋팅 옵션
BackOffice Builder의 Text Field > Setting > [Option] 설정을 통해 입력 텍스트 인풋의 구성을 변경한다.
Common Options
입력형(Data Input) 컴포넌트에 공통으로 적용되는 옵션이다.
1. Size
텍스트 에디터의 크기는 아래와 같이 3가지로 선택 할 수 있으며, 입력 필드의 세로 크기에 반영된다.
Setting | Result |
|
❤︎ 텍스트 에디터의 사이즈 조절은 Form 내에서만 확인 가능
Label(버튼이름)에 입력된 텍스트 길이에 따라 에디터의 가로 길이는 가변적으로 변한다. 만약 고정 사이즈의 입력 필드가 필요하다면, Fixed Field Size를 조절하여 직접 사이즈를 지정 할 수도 있다.
2. Field Size
입력 필드의 사이즈를 비율로 조절할 수 있다.
Setting | |
Result |
|
❤︎ 텍스트 에디터의 필드 사이즈 조절은 Form 내에서만 확인 가능
3. Placeholder
플레이스 홀더는 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라진다.
Setting | Result |
4. Tooltip
툴팁을 사용하면, 라벨 옆에 물음표 아이콘이 추가되고, 마우스 오버 시 입력한 안내 문구가 출력된다.
Setting | Result |
5. Helper text (=Comment)
입력 필드 하단에 고정되어 노출되는 도움말 문구이다. 사용자의 입력 성공/실패 여부와 상관 없이 도움말 문구는 고정으로 출력된다.
Setting | Result |
Text Editor Options
Text Editor 컴포넌트에 적용되는 고유 옵션이다.
1. Editor Type
에디터 타입을 설정한다. 인라인 스타일은 Default 이고, 변경을 원한다면 Editor를 선택한다.
Setting | Result |
2. Height Min Size
에디터 세로 높이 사이즈 MIN 값을 설정할 수 있다.
Setting | Result |
3. Height Max Size
에디터 세로 높이 사이즈 MAX 값을 설정할 수 있다.
Setting | Result |
ETC : Text Editor in the Form
Form 컴포넌트 내에 엘리먼트로 사용될 경우 설정 가능한 옵션은 다음과 같다.
1. Hide Label
폼 내에서는 텍스트 에디터의 라벨을 숨김처리 할 수 있다.
Setting | Result |
2. Grouping
폼 내에서는 텍스트 에디터에 그룹 라벨을 붙이고, 레이아웃과 스타일을 설정 할 수 있다.
Group Label : 텍스트 에디터의 그룹명
Group Layout : Vertical, Inline 2가지 레이아웃 제공
Group Type : Field, Card, Tab 3가지 형태로 변경 가능
그룹 타입을 Tab
으로 설정 할 경우 Tab 스타일과 위치를 설정하는 추가 옵션이 있다. 그룹 탭 위치를 Top
또는 Bottom
으로 설정 할 경우에는 Tab 텍스트의 중앙 정렬 여부를 추가로 설정 할 수 있다.
Group Tab Type : Card, Line 2가지 형태로 Tab 설정 가능
Group Tab Position : Top, Right, Bottom, Left 4가지 영역으로 Tab을 위치 시킴
Group Tab Centered : Top/Bottom에 위치한 탭 텍스트의 정렬 설정 옵션
그룹핑{ON}, 그룹라벨{Group Label Text}, 그룹 레이아웃{Vertical}
Setting | Result |
| |
|