모바일 카드 작성기 구성 요소

모바일 카드를 구성하는 구성요소에 대해 자세히 알아봅니다.

구성요소 추가 및 제거

단추

버튼 구성요소를 사용하면 버튼이 선택되었을 때 사용자가 작업을 수행할 수 있습니다. 버튼을 사용하여 카드에 작업을 추가합니다.

표 1. 버튼 구성 속성

속성	설명
요소 ID	단추의 고유한 JSON ID 속성입니다.
표시
높이	버튼 높이(픽셀)
너비	버튼의 너비(픽셀)입니다. 이 속성을 비워 두면 버튼이 사용 가능한 공간을 채웁니다.
모서리 반경	버튼의 모서리 반경입니다. 이 값을 늘리면 버튼의 둥근 모서리가 생성됩니다.
여백 상단	단추의 위쪽 여백(픽셀)
여백 하단	단추의 아래쪽 여백(픽셀 단위)
왼쪽 여백	단추의 왼쪽 여백(픽셀)
오른쪽 여백	단추의 오른쪽 여백(픽셀)
테두리 너비	버튼 테두리의 너비(픽셀 단위)입니다.
버튼 속성
형식	버튼을 텍스트 레이블, 아이콘 또는 둘 다와 함께 표시할지 여부를 결정합니다. 다음 옵션 중에서 선택합니다. 레이블 아이콘 라벨 및 아이콘
레이블	단추의 텍스트 레이블입니다. 주: 이 옵션은 레이블 또는 레이블 및 아이콘 형식을 선택한 경우에만 나타납니다.
아이콘	버튼에 표시되는 아이콘입니다. 제공된 드롭다운 목록에서 아이콘을 선택합니다. 주: 이 옵션은 아이콘 또는 레이블 및 아이콘 형식을 선택한 경우에만 나타납니다.
접근 가능 이름	보조 장치를 사용하는 사람들이 버튼의 목적을 알 수 있도록 소리 내어 읽어주는 대체 텍스트입니다. 주: 이 옵션은 아이콘 형식을 선택한 경우에만 나타납니다.
작업
다중	사용자가 버튼을 선택할 때 선택할 수 있는 여러 작업의 메뉴를 생성합니다.
함수	미리 정의된 기능 또는 구성 가능한 기능을 선택합니다. 구성 가능한 기능은 sys_sg_button 테이블에서 가져옵니다. 사용 가능한 미리 정의된 기능: 취소 계속하기 로그아웃
버튼 모양
텍스트 및 아이콘 스타일	텍스트, 아이콘 또는 둘 다의 서식 스타일입니다.
배경색 변수	단추 배경의 색상 변수입니다.
배경색	단추 배경의 색상입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 #A0522D).
텍스트 및 아이콘 색상 변수	단추의 텍스트와 아이콘의 색상 변수입니다.
텍스트 및 아이콘 색상	버튼의 텍스트와 변수 색상입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 #A0522D).
테두리 색 변수	단추 테두리의 색상 변수입니다.
테두리 색상	단추 테두리의 색상입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 #A0522D).

컨테이너

컨테이너 구성요소에는 다른 구성요소가 포함되어 있습니다. 컨테이너에는 다른 컨테이너를 포함한 모든 카드 구성요소가 포함될 수 있습니다. 컨테이너를 사용하여 카드 구성요소를 구성하고 컨테이너 내의 구성요소가 정렬 및 배포되는 방법을 결정할 수 있습니다.

표 2. 컨테이너 구성 속성

속성	설명
속성
요소 ID	컨테이너의 고유한 JSON ID 속성입니다.
표시
높이	컨테이너의 높이(픽셀)
너비	컨테이너의 너비(픽셀). 이 속성을 비워 두면 컨테이너가 사용 가능한 공간을 채웁니다.
여백 상단	컨테이너의 상단 여백(픽셀)
여백 하단	컨테이너의 하단 여백(픽셀)
왼쪽 여백	컨테이너의 왼쪽 여백(픽셀)
오른쪽 여백	컨테이너의 오른쪽 여백(픽셀)
모서리 반경	컨테이너의 모서리 반경입니다. 이 값을 늘리면 컨테이너의 둥근 모서리가 생성됩니다.
외관
컨테이너 방향	컨테이너 내의 구성요소 방향을 결정합니다. 다음 값 중 하나를 선택합니다. 가로 세로
정렬	컨테이너 내의 구성요소 정렬을 결정합니다. 다음 값 중 하나를 선택합니다. 스트레치 센터 왼쪽 오른쪽 상위 하단
배포	컨테이너 내의 구성요소 배포를 결정합니다. 다음 값 중 하나를 선택합니다. 같음 자동
배경 유형	컨테이너에 포함될 배경 유형입니다. 다음 값 중 하나를 선택합니다. 안 함 색상 이미지

아이콘

아이콘 구성요소는 카드에 아이콘을 표시하는 데 사용됩니다. 구성 화면의 아이콘 드롭다운 메뉴에서 아이콘을 선택할 수 있습니다.

표 3. 아이콘 구성 속성

속성	설명
속성
요소 ID	아이콘의 고유한 JSON ID 속성입니다.
표시
아이콘	표시할 아이콘입니다.
여백 상단	아이콘의 위쪽 여백(픽셀)입니다.
오른쪽 여백	아이콘의 오른쪽 여백(픽셀)입니다.
여백 하단	아이콘의 하단 여백(픽셀)입니다.
왼쪽 여백	아이콘의 왼쪽 여백(픽셀)입니다.
외관
색 변수	아이콘의 색상 변수입니다.
색상	아이콘의 색상입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 #A0522D).

이미지

이미지 구성요소는 이미지를 표시하는 데 사용됩니다. 이미지가 포함된 기록(예: 사용자 기록의 아바타 필드)의 필드를 선택하여 표시할 이미지를 정의합니다.

표 4. 이미지 구성 속성

속성	설명
속성
요소 ID	이미지의 고유한 JSON ID 속성입니다.
표시
높이	이미지의 높이(픽셀)입니다.
너비	이미지의 너비(픽셀)입니다.
여백 상단	이미지의 위쪽 여백(픽셀)입니다.
오른쪽 여백	이미지의 오른쪽 여백(픽셀)입니다.
여백 하단	이미지의 하단 여백(픽셀)입니다.
왼쪽 여백	이미지의 왼쪽 여백(픽셀)입니다.
모서리 반경	이미지의 모서리 반경입니다. 이 값을 늘리면 이미지의 둥근 모서리가 생성됩니다.
이미지
매핑된 필드 사용	이미지에서 매핑된 필드를 사용할지 여부를 선택합니다.
필드 값	이미지에 대한 매핑된 필드의 값입니다. 이 속성은 매핑된 필드 사용이 선택된 경우에만 표시됩니다.
첨부 파일	사용할 첨부된 이미지입니다. 이 속성은 매핑된 필드 사용을 선택하지 않은 경우에만 표시됩니다.
이미지 확장	이미지의 크기 조정입니다. 다음 값 중 하나를 선택합니다. 작성 맞춤

텍스트

텍스트 구성요소가 카드에 텍스트를 표시합니다. 정적 텍스트 또는 필드 값 레이블의 텍스트일 수 있습니다. 기록 목록을 볼 때 사용자가 먼저 봐야 하는 정보에 텍스트 구성요소를 사용합니다.

표 5. 텍스트 구성 속성

속성	설명
속성
요소 ID	텍스트의 고유한 JSON ID 속성입니다.
표시
필드 유형	텍스트 필드의 유형입니다. 다음 값 중 하나를 선택합니다. 필드 값 필드 레이블 정적 텍스트
텍스트 가치	텍스트 구성요소에 나타나는 텍스트입니다. 이 값은 필드 유형 속성에서 정적 텍스트를 선택한 경우에만 사용됩니다.
높이	텍스트 구성요소의 높이(픽셀)입니다.
너비	텍스트 구성요소의 너비(픽셀)입니다.
여백 상단	텍스트 구성요소의 위쪽 여백(픽셀)입니다.
오른쪽 여백	텍스트 구성요소의 오른쪽 여백(픽셀)입니다.
여백 하단	텍스트 구성요소의 하단 여백(픽셀)입니다.
왼쪽 여백	텍스트 구성요소의 왼쪽 여백(픽셀)입니다.
외관
텍스트 스타일	텍스트의 서식 스타일입니다.
텍스트 정렬	구성요소의 텍스트에 대한 정렬입니다. 다음 값 중 하나를 선택합니다. 왼쪽 중앙 오른쪽
최대 라인 수	요소에 있는 텍스트의 최대 라인 수입니다.
텍스트 색상 변수	텍스트의 색상 변수입니다.
텍스트 색상	텍스트의 색입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 #A0522D). 주: 텍스트 구성요소의 배경색을 변경할 수는 없지만 컨테이너 구성요소 내에 텍스트 구성요소를 배치하고 컨테이너 배경색을 변경할 수 있습니다.

비디오

비디오 구성요소는 카드에 포함된 비디오를 표시합니다. Youtube 및 Viemo 비디오 URL이 모두 지원됩니다.

표 6. 비디오 구성 속성

속성	설명
속성
요소 ID	동영상의 고유한 JSON ID 속성입니다.
표시
매핑된 필드 사용	비디오에서 매핑된 필드를 사용할지 여부를 선택합니다.
필드 값	비디오에 매핑된 필드의 값입니다. 이 속성은 매핑된 필드 사용이 선택된 경우에만 표시됩니다.
URL	포함할 비디오의 URL입니다. 이 속성은 매핑된 필드 사용을 선택하지 않은 경우에만 표시됩니다.
재생 모드	비디오가 모바일 장치에 표시되는 방식입니다. 다음 값 중 하나를 선택합니다. 전체 화면 인라인
너비	비디오 구성요소의 너비(픽셀)입니다.
높이	동영상 구성요소의 높이(픽셀)입니다.
여백 상단	동영상 구성요소의 상단 여백(픽셀)입니다.
오른쪽 여백	동영상 구성요소의 오른쪽 여백(픽셀)입니다.
여백 하단	동영상 구성요소의 하단 여백(픽셀)입니다.
왼쪽 여백	비디오 구성요소의 왼쪽 여백(픽셀)입니다.