대화형 통신 편집기의 사각형 구성 요소
aem-forms-ea@adobe.com으로 이메일을 보내시기 바랍니다.1. 소개
대화형 통신(IC) 편집기의 사각형 구성 요소를 사용하면 작성자가 레이아웃 구분자, 시각적 악센트 또는 콘텐츠 컨테이너 역할을 하는 모양의 그래픽 요소를 추가할 수 있습니다. 사각형은 시각적 계층 구조를 개선하고 구조화된 커뮤니케이션 레이아웃에서 사용자의 주의를 안내합니다.
이 구성 요소는 데이터에 연결되지 않지만 디자인 명확성을 개선하고 관련 필드를 그룹화하며 전반적인 프레젠테이션을 향상하는 데 유용합니다.
2. 속성
Rectangle 구성 요소에는 사용자 정의 가능한 속성이 몇 가지 포함됩니다.
2.1. 이름
이름: 사각형의 고유 식별자입니다. 주로 레이아웃 계층 구조에서 참조하거나 스타일을 일관되게 적용하는 데 사용됩니다.
2.2. 위치
-
설명: 사각형이 문서 레이아웃에서 나타나는 위치를 결정합니다.
-
설정:
-
X 및 Y 좌표: 수평 및 수직 배치를 정의합니다.
-
높이 및 너비(mm): 사각형의 크기를 제어합니다.
-
2.3. 이익
직사각형 구성 요소를 다른 UI 요소와 구분하기 위한 간격을 정의합니다.
-
상단(위)
-
아래쪽(아래쪽)
-
왼쪽
-
오른쪽
2.4. 모양
-
설명: 은(는) 사각형의 시각적 스타일을 제어합니다.
-
사용자 지정 옵션:
-
채우기: 사각형의 내부 색상입니다.
-
획: 사각형의 윤곽선 색입니다.
-
획 너비: 사각형 테두리의 두께입니다.
-
스타일: 플랫, 테두리 또는 높임 같은 미리 설정된 스타일입니다.
-
가장자리: 모퉁이 모양(예: 둥글거나 예리한 가장자리)을 제어합니다.
-
2.5. 유무
-
설명: 통신이 렌더링될 때 사각형을 표시할지 여부를 지정합니다.
-
옵션:
-
표시: 런타임에 사각형을 표시합니다.
-
숨김: 사각형을 표시하지 않고 레이아웃 공간을 유지합니다.
-
3. 사용
Rectangle 구성 요소는 일반적으로 콘텐츠 입력보다는 레이아웃 및 스타일링 목적으로 사용됩니다. 일반적인 사용 사례는 다음과 같습니다.
-
섹션 간의 시각적 구분 만들기
-
그룹화된 요소 강조 표시
-
가독성 및 시각적 균형 향상
-
프레이밍 머리글, 바닥글 또는 콜아웃 섹션
사각형은 복잡한 시각적 디자인 구조를 위한 하위 양식이나 컨테이너와 같은 다른 레이아웃 요소와 결합할 수 있습니다.
4. 우수 사례
-
레이아웃의 사각형에 대해 일관된 스타일을 사용하여 시각적 조화를 보장하십시오.
-
적절한 여백과 간격을 적용하여 인접 필드가 밀집되지 않도록 합니다.
-
브랜드 또는 문서 테마와 일치하는 칠 및 획 색상을 선택합니다.
-
둥근 가장자리를 섬세하게 사용하여 최신 UI 레이아웃의 미학을 개선합니다.
-
사각형이 편집 중에 디자인 목적으로만 필요하지만 최종 출력에는 필요하지 않은 경우 사각형을 숨깁니다.
Rectangle 구성 요소는 IC 편집기의 비대화형이지만 강력한 도구입니다. 효과적으로 스타일을 지정하고 배치하면 데이터 바인딩이나 상호 작용에 복잡성을 가중시키지 않으면서 레이아웃 정밀도, 시각적 흐름 및 사용자 경험을 향상시킵니다.