트랜잭션 관리자: 레이아웃 - 테마 옵션
트랜잭션 관리자 레이아웃은 JSON 및 YAML 속성을 설정하여 조정할 수 있습니다.
레이아웃 JSON의 최상위 수준에 다음 JSON을 포함합니다.
"theme": {
"base": "slds",
"otterKit": true,
"properties": {
"body-color": "#000",
"spacing-sm": "0.15rem",
"label-color": "var(--token-color-black-500)",
"pill-radius": "2px",
"header-color": "#30578d",
"border-radius": "2px",
"body-font-size": "0.875rem",
"label-font-size": "0.75rem",
"body-font-weight": "700",
"bom-border-color": "#7e8592",
"body-border-color": "#7e8592",
"body-border-width": "0",
"button-font-color": "600",
"pill-border-color": "#30578d",
"body-border-radius": "0",
"input-border-color": "#999",
"input-border-width": "1px",
"button-border-width": "1px",
"font-weight-regular": "700",
"header-border-color": "#7e8592",
"header-logo-padding": "0.5rem",
"input-border-radius": "2px",
"internal-icon-color": "#aeaeae",
"body-wrapper-padding": "0",
"button-border-radius": "2px",
"button-neutral-color": "#30578d",
"button-primary-color": "#30578d",
"int-option-font-size": "0.875rem",
"token-color-black-500": "#444",
"combobox-option-margin": "0 0 0 10px",
"header-logo-min-height": "50px",
"pill-remove-icon-color": "#4d4d4d",
"container-border-radius": "0",
"header-margin-block-end": "0",
"token-color-neutral-950": "#aeaeae",
"combobox-option-font-size": "0.875rem",
"slds-c-button-line-height": "1.875rem",
"slds-c-input-color-border": "#000",
"button-primary-focus-color": "#0065cc",
"button-primary-hover-color": "#0065cc",
"slds-c-input-radius-border": "2px",
"button-neutral-border-color": "#30578d",
"button-primary-border-color": "#30578d",
"expand-header-border-radius": "2px",
"button-primary-disabled-color": "#666",
"button-neutral-backgroundColor": "#fff",
"button-primary-backgroundColor": "#fff",
"expand-header-border-color-focus": "#7e8592",
"button-primary-focus-border-color": "#0065cc",
"button-primary-hover-border-color": "#0065cc",
"button-neutral-focus-backgroundColor": "#fff",
"button-neutral-hover-backgroundColor": "#fff",
"button-primary-disabled-border-color": "#666",
"button-primary-focus-backgroundColor": "#fff",
"button-primary-hover-backgroundColor": "#fff",
"button-primary-disabled-backgroundColor": "#efefef",
"token-color-primary-outline-border-color": "#ff0000",
"expand-header-content-padding-inline-start": "0"
}
},YAML입니다.
theme:
base: slds
otterKit: true
properties:
body-color: "#000"
spacing-sm: "0.15rem"
label-color: "var(--token-color-black-500)"
pill-radius: "2px"
header-color: "#30578d"
border-radius: "2px"
body-font-size: "0.875rem"
label-font-size: "0.75rem"
body-font-weight: "700"
bom-border-color: "#7e8592"
body-border-color: "#7e8592"
body-border-width: "0"
button-font-color: "600"
pill-border-color: "#30578d"
body-border-radius: "0"
input-border-color: "#999"
input-border-width: "1px"
button-border-width: "1px"
font-weight-regular: "700"
header-border-color: "#7e8592"
header-logo-padding: "0.5rem"
input-border-radius: "2px"
internal-icon-color: "#aeaeae"
body-wrapper-padding: "0"
button-border-radius: "2px"
button-neutral-color: "#30578d"
button-primary-color: "#30578d"
int-option-font-size: "0.875rem"
token-color-black-500: "#444"
combobox-option-margin: "0 0 0 10px"
header-logo-min-height: "50px"
pill-remove-icon-color: "#4d4d4d"
container-border-radius: "0"
header-margin-block-end: "0"
token-color-neutral-950: "#aeaeae"
combobox-option-font-size: "0.875rem"
slds-c-button-line-height: "1.875rem"
slds-c-input-color-border: "#000"
button-primary-focus-color: "#0065cc"
button-primary-hover-color: "#0065cc"
slds-c-input-radius-border: "2px"
button-neutral-border-color: "#30578d"
button-primary-border-color: "#30578d"
expand-header-border-radius: "2px"
button-primary-disabled-color: "#666"
button-neutral-backgroundColor: "#fff"
button-primary-backgroundColor: "#fff"
expand-header-border-color-focus: "#7e8592"
button-primary-focus-border-color: "#0065cc"
button-primary-hover-border-color: "#0065cc"
button-neutral-focus-backgroundColor: "#fff"
button-neutral-hover-backgroundColor: "#fff"
button-primary-disabled-border-color: "#666"
button-primary-focus-backgroundColor: "#fff"
button-primary-hover-backgroundColor: "#fff"
button-primary-disabled-backgroundColor: "#efefef"
token-color-primary-outline-border-color: "#ff0000"
expand-header-content-padding-inline-start: "0"페이지 본문의 패딩 제거
위의 레이아웃 JSON에서 "body-wrapper-padding": "0".
스타일 필드 레이블
"label-color": "var(--token-color-black-500)" 및
"label-font-size": 위의 레이아웃 JSON에서 "0.75rem" .
스타일 버튼 및 버튼 레이블
"button-font-color": "600" 및
"button-font-weight": 위의 레이아웃 JSON에서 "700" .
숫자 형식
관리자는 minPrecision 속성을 사용하여 최소 소수 자릿수를 요구할 수 있습니다.
showCurrency 속성을 사용하여 통화 기호를 표시하거나 숨길 수 있습니다.
- 최소 정밀도
JSON:
{ "type": "FormattedNumber", "label": "Just minPrecision", "format": { "type": "decimal", "minPrecision": 2 }, "variableName": "txn.custom.someNumber" }YAML입니다.
type: FormattedNumber label: Just minPrecision format: type: decimal minPrecision: 2 variableName: txn.custom.someNumber이 예에서 txn.custom.someNumber가 4.5로 설정된 경우 레이아웃은 4.50으로 표시됩니다.
- showCurrency
JSON:
{ "type": "FormattedNumber", "label": "With Hidden Currency", "format": { "type": "currency", "minPrecision": 2, "showCurrency": false }, "variableName": "txn.custom.genericNum" }YAML입니다.
type: FormattedNumber label: With Hidden Currency format: type: currency minPrecision: 2 showCurrency: false variableName: txn.custom.genericNum이 예에서 기본적으로 통화 기호를 표시하는 정의된 통화 유형인 txn.custom.genericNum이 4.5로 설정된 경우 레이아웃은 4.50으로 표시됩니다.