Cambiar la apariencia del botón
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,
}
};