Menu

Substituir temas, marca e estilo do Flex UI (IU do Flex)

A documentação gerada automaticamente para o Flex UI (IU do Flex) agora está disponível como uma distribuição beta. A documentação gerada automaticamente é precisa e abrangente e, portanto, pode ser diferente do que você vê na documentação oficial do Flex UI (IU do Flex). Ele inclui uma visão geral abrangente das opções do Tema.

O Flex UI (IU do Flex) expõe 3 níveis principais de personalização:

  1. Temas de Base: Temas pré‐definidos do Flex prontos para uso.
  2. Substituições de cores do tema base: Substituições de cores globais herdadas por todos os componentes do Flex UI (IU do Flex).
  3. Substituições de tema de componente: Substituições de cores granulares que permitem personalizar um componente específico.

Portanto, você pode usar o tema GreyLight do Flex com uma substituição de uma de suas cores e uma substituição de cor específica no componente Notifications.

Definir seu tema

Temas de base

Os temas de base fornecem um conjunto de cores como ponto de partida para seu contact center. O Flex UI (IU do Flex) inclui os seguintes temas base predefinidos:

  • GreyLight
  • GreyDark
  • FlexLight
  • FlexDark

Configurando um tema base

Você pode configurar o tema base desejado no objeto de configuração Flex.

const configuration = {
        colorTheme: {
            baseName: "FlexDark"
        }
};

Substituindo cores do tema base

Você também pode criar sua própria variação de um tema reconfigurando as cores base usadas no tema.

No exemplo abaixo, o Flex usa o GreyDark como tema base. Em seguida, ele aplicará as novas cores definidas no objeto de cor, substituindo as cores base e algumas cores padrão GreyDark do tema.

const configuration = {
    colorTheme: {
        baseName: "GreyDark",
        colors: {
            base0: "#000000",
            base1: "#222222",
            base2: "#444444",
            base3: "#d4d4d4",
            base4: "#e0e0e0",
            base5: "#efefef",
            base6: "#ffffff",
            darkTextColor: "#222222",
            buttonHoverColor: "rgba(0, 0, 0, 0.2)",
            tabSelectedColor: "#009cff",
            connectingColor: "#ff9800",
            disconnectedColor: "#c0192d"
        }
    }
};

Veja a lista completa de cores de temas base substituíveis.

Substituir componentes individuais

O tema flexível também dá suporte a personalizações granulares no nível de componente individual. No exemplo de código a seguir, o Flex substituirá a cor de fundo de MainHeader e a cor do texto, bem como a cor de fundo de SideNav e as cores dos botões.

const configuration = {
    colorTheme: {
        overrides: {
            MainHeader: {
                Container: {
                    background: "#2f5771",
                    color: "#ffffff"
                }
            },
            SideNav: {
                Container: {
                    background: "#4a4e60"
                },
                Button: {
                    background: "#4a4e60"
                },
            }
        }
    }
};

Consulte a lista completa de componentes e propriedades personalizáveis.

Aplicar seu tema

Depois de definir um tema, você precisará aplicá‐lo à Flex UI (IU do Flex).

Aplicar seu tema em um plugin Flex

Defina o tema de cores especificando um baseName com o opcional colors e o componente overrides.

CustomTheme.js

export default {
    baseName: "GreyDark",
    colors: {
        base0: "#000000",
        base1: "#222222",
        base2: "#444444"
    },
    overrides: {
        MainHeader: {
            Container: {
                background: "#2f5771",
                color: "#ffffff"
            }
        },
        SideNav: {
            Container: {
                background: "#4a4e60"
            },
            Button: {
                background: "#4a4e60"
            },
        }
    }
}

Em seguida, defina seu tema personalizado dentro da propriedade colorTheme do Flex Configuration e o aplique durante a inicialização do plugin.

ThemePlugin.js

import { FlexPlugin } from 'flex-plugin';
import React from 'react';
import CustomTheme from './CustomTheme'

const PLUGIN_NAME = 'ThemePlugin';

export default class ThemePlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  init(flex, manager) {
    const configuration = {
        colorTheme: CustomTheme
    };

    // apply theme
    manager.updateConfig(configuration);
  }
}

Aplicar temas a instalações hospedadas no Flex

Inclua seu tema personalizado na propriedade do objeto de configuração colorTheme ao inicializar o Flex.

const configuration = {
    colorTheme: {
        baseTheme: 'FlexDark'
    }
}

Twilio.Flex.runDefault(configuration);

Próximas etapas

Classifique esta página:

Precisa de ajuda?

Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.

Obrigado pelo seu feedback!

Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

Enviando seu feedback...
🎉 Obrigado pelo seu feedback!
Algo deu errado. Tente novamente.

Obrigado pelo seu feedback!

thanks-feedback-gif