Objeto adoptChangeClasses

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:

1. controller
2. card
3. preferenceCard
4. 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...

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.

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.

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.