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

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

구성요소 추가 및 제거

단추

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

표 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입니다. 이 속성은 매핑된 필드 사용 이 선택되지 않은 경우에만 표시됩니다.
재생 모드	비디오가 모바일 장치에 표시되는 방식입니다. 다음 값 중에서 선택합니다. 전체 화면 인라인
너비	비디오 구성요소의 너비(픽셀)입니다.
높이	비디오 구성요소의 높이(픽셀)입니다.
여백 상단	비디오 구성요소의 상단 여백(픽셀)입니다.
오른쪽 여백	비디오 구성요소의 오른쪽 여백(픽셀)입니다.
여백 하단	비디오 구성요소의 하단 여백(픽셀)입니다.
왼쪽 여백	비디오 구성요소의 왼쪽 여백(픽셀)입니다.