Gerenciador de transações: Layouts - opções de temas
Os layouts do Gerenciador de transações podem ser ajustados definindo as propriedades JSON e YAML.
Inclua o seguinte JSON no nível superior do json de layout:
"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"
}
},AML:
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"Remova o preenchimento no corpo da página
"body-wrapper-padding": "0" No layout json acima.
Rótulos de campo de estilo
"label-color": "var(--token-color-black-500)" e.
"label-font-size": "0.75rem" No layout json acima.
Botões de estilo e rótulos de botão
"button-font-color": "600" e.
"button-font-weight": "700" No layout json acima.
Formatação de número
Os administradores podem usar o. MinPrecision propriedade para exigir um número mínimo de casas decimais.
Você pode usar o. MostMoeda propriedade para exibir ou ocultar o símbolo de moeda.
- MinPrecision
JSON:
{ "type": "FormattedNumber", "label": "Just minPrecision", "format": { "type": "decimal", "minPrecision": 2 }, "variableName": "txn.custom.someNumber" }AML:
type: FormattedNumber label: Just minPrecision format: type: decimal minPrecision: 2 variableName: txn.custom.someNumberNeste exemplo, se txn.custom.somenumber estiver definido como 4,5, o layout exibirá 4,50.
- MostMoeda
JSON:
{ "type": "FormattedNumber", "label": "With Hidden Currency", "format": { "type": "currency", "minPrecision": 2, "showCurrency": false }, "variableName": "txn.custom.genericNum" }AML:
type: FormattedNumber label: With Hidden Currency format: type: currency minPrecision: 2 showCurrency: false variableName: txn.custom.genericNumNeste exemplo, se txn.custom.genericNum, um tipo de moeda definido que mostrará o símbolo de moeda por padrão, estiver definido como 4,5, o layout exibirá 4,50.