Cambiar de aspecto
Client-Side
Wallet Brick permite algunas personalizaciones visuales listadas en la tabla abajo, todas opcionales y del tipo string
.
Si la propiedad enviada está vacía, la pantalla mostrará el diseño definido por el layout predeterminado. Por otro lado, al enviar un valor alternativo, este reemplazará el valor predeterminado.
Clave | Opciones disponibles | Predeterminado |
theme | default ou black | default |
customStyle.valuePropColor | Para el tema default, valuePropColor puede ser blue ou white, mientras que para el tema dark, valuePropColor puede ser black. | Para el tema default, el predeterminado es blue, mientras que para el tema dark, el predeterminado es black. |
customStyle.buttonHeight | Mínimo: 48px. Máximo: libre elección. | 48px |
customStyle.borderRadius | Mínimo: livre escolha. Máximo: libre elección. | 6px |
customStyle.verticalPadding | Mínimo: 8px. Máximo: libre elección. | 8px |
customStyle.horizontalPadding | Mínimo: 0px. Máximo: libre elección. | 0px |
const settings = {
...,
customization: {
theme:'dark',
customStyle: {
valueProp: 'practicality',
valuePropColor: 'black',
borderRadius: '10px',
verticalPadding: '10px',
horizontalPadding: '10px',
}
}
}
const customization = {
theme:'dark',
customStyle: {
valueProp: 'practicality',
valuePropColor: 'black',
borderRadius: '10px',
verticalPadding: '10px',
horizontalPadding: '10px',
}
};
Ocultar texto de propuesta de valor (valueProp)
También es posible ocultar el texto de la propuesta de valor pasando el valor boolean true
a la propiedad customStyle.hideValueProp
. El valor predeterminado es false
.
const settings = {
...,
customization: {
theme: 'default',
customStyle: {
hideValueProp: true,
}
}
}
const customization = {
theme: 'default',
customStyle: {
hideValueProp: true,
}
};