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:
- Temas de Base: Temas pré‐definidos do Flex prontos para uso.
- Substituições de cores do tema base: Substituições de cores globais herdadas por todos os componentes do Flex UI (IU do Flex).
- 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
- Explore a referência completa de 11 cores base e propriedades de temas configuráveis
- Escreva um plugin para personalizar seu tema Flex
- Comece a alterar o comportamento do Flex UI (IU do Flex) com o Framework Actions
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.
