Type

사용자가 여러 줄의 Code를 직접 입력 할 수 있도록 코드 입력 영역을 제공하는 컴포넌트로는 CodeEditor와 JsonEditor 2가지가 있다. ( 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )

1. CodeEditor

CodeEditor의 기본 UI는 다음과 같다.

2. JsonEditor

JsonEditor는 자주 사용하는 json 언어의 CodeEditor를 별도의 컴포넌트로 만들어 제공하는 것으로 기본 UI와 옵션 기능은 CodeEditor와 동일하다.

Function

1. Width/Height

CodeEditor 입력창의 가로와 세로 길이를 직접 입력하여 설정 할 수 있다. 예를 들어 Height=200px로 설정하면 다음과 같이 입력 필드의 세로 길이만 증가한다.

2. Light/Dark Mode

CodeEditor를 Light Mode와 Dark Mode로 선택하여 사용 할 수 있다.

3. Language

CodeEditor 컴포넌트 내에서 사용 가능한 Language는 다음과 같다.

→ css, html, java, javascript, json, less, mysql, scss, typescript, xml