Para alterar os estilos das classes dos componentes, é necessário enviar o objeto window.adoptChangeClasses no script Javascript com o seguinte formato:
window.adoptChangeClasses = {
styles: {
web: {},
mobile: {}
},
hasImportant: true,
theme: 'light'
}No código acima é possível visualizar que existem 3 propriedades internas que são os styles, hasImportant e theme.
styles: É o objeto onde são inseridos as propriedades CSS das classes e estão separados em mais 2 níveis, que são o web e mobile. Onde é possível realizar customizações diferentes conforme a responsividade da tela.
hasImportant: É uma propriedade do tipo boolean que é responsável por permitir ou não permitir que as classes sejam sobrescrevidas por estilos globais do site, através do uso do atributo "! important" do CSS. Por padrão ela possui o valor true, ou seja, se o usuário decidir permitir que os estilos globais de seu site sobrescrevam ou influenciem nas classes da tag, ele deverá setar o valor false nessa propriedade.
theme: É uma propriedade onde é selecionado o tema de cores da tag, entre "light" e "dark".
A tag foi separada em 4 principais componentes aos quais possuem suas classes específicas:
controller
card
preferenceCard
categories
Abaixo segue o formato do objeto completo com todos os nomes das classes existentes para customização:
{
styles: {
web: {
controller: {
button: {},
},
card: {
container: {},
content: {},
textContainer: {},
titleRow: {},
whiteLabelLogo: {},
adoptLink: {},
textsRow: {},
textRowContent: {},
textRowLinks: {},
buttonsContainer: {},
rejectAllLink: {},
rejectAllButton: {},
preferencesButton: {},
acceptAllButton: {}
},
preferenceCard: {
panel: {},
title: {},
closePanel: {},
tagCategories: {},
cardFooter: {},
smallTextFooter: {},
buttonsContainer: {},
rejectButton: {},
acceptButton: {}
},
categories: {
category: {},
title: {},
icon: {},
description: {},
toogleShowTags: {},
tag: {},
tagTitleSection: {},
tagTitle: {},
tagCookieContainer: {},
tagCleanCacheLink: {}
}
},
mobile: {
controller: {
button: {},
},
card: {
container: {},
content: {},
textContainer: {},
titleRow: {},
whiteLabelLogo: {},
adoptLink: {},
textsRow: {},
textRowContent: {},
textRowLinks: {},
buttonsContainer: {},
rejectAllLink: {},
rejectAllButton: {},
preferencesButton: {},
acceptAllButton: {}
},
preferenceCard: {
panel: {},
title: {},
closePanel: {},
tagCategories: {},
cardFooter: {},
smallTextFooter: {},
buttonsContainer: {},
rejectButton: {},
acceptButton: {}
},
categories: {
category: {},
title: {},
icon: {},
description: {},
toogleShowTags: {},
tag: {},
tagTitleSection: {},
tagTitle: {},
tagCookieContainer: {},
tagCleanCacheLink: {}
}
}
}
}As propriedades CSS devem ser inseridas em formato CamelCase. Segue alguns exemplos:
background-color deverá ser backgroundColor
font-size deverá ser fontSize
border-radius deverá ser borderRadius e assim por diante...
Exemplos de Personalização
Apresentamos alguns exemplos para facilitar a exploração das diversas possibilidades oferecidas por nossa tag. A seguir, destacamos casos de uso da API das classes e suas capacidades.
Personalizar botões
A personalização de botões é alcançada através da manipulação dos atributos CSS. Isso permite ajustar o raio da borda, paddings internos, tamanho da fonte, cores, efeitos de hover, entre outras propriedades.
Personalizar layout do modal
Ao utilizar os atributos do CSS, é possível editar e aprimorar o layout do modal. Isso inclui a adição de barras de rolagem, a modificação de paddings, alinhamentos, tamanhos e cores, proporcionando um controle flexível sobre a apresentação visual do modal.