Anular los temas, la marca y el estilo de la interfaz de usuario de Flex
La documentación generada automáticamente sobre Flex UI (la interfaz de usuario de Flex) ahora está disponible como una distribución beta. La documentación generada automáticamente es precisa y completa, y puede diferir de lo que se ve en la documentación oficial de la interfaz de usuario de Flex. Incluye una visión general completa de las opciones de temas.
La interfaz de usuario de Flex expone tres niveles principales de personalización:
- Temas básicos: temas predefinidos de Flex que se incluyen de forma predeterminada.
- Anulación del color de los temas básicos: anulación del color a nivel global heredados por todos los componentes de Flex UI (la interfaz de usuario de Flex).
- Anulación de los temas de componentes: pequeñas anulaciones de color que te permiten personalizar un componente específico.
Puedes utilizar el tema GreyLight
de Flex con una anulación de uno de los colores y una anulación de color específica en el componente Notificaciones.
Definir un tema
Temas básicos
Los temas básicos proporcionan un conjunto de colores como punto de partida para el contact center. La interfaz de usuario de Flex incluye los siguientes temas básicos predefinidos:
- GreyLight
- GreyDark
- FlexLight
- FlexDark
Configurar un tema básico
Puedes configurar el tema básico que deseas en el objeto de configuración de Flex.
const configuration = {
colorTheme: {
baseName: "FlexDark"
}
};
Anular los colores del tema básico
También puedes crear tu propia variación de un tema mediante la reconfiguración de los colores básicos utilizados en el tema.
En el siguiente ejemplo, Flex utiliza GreyDark
como tema básico. Posteriormente, aplicará los nuevos colores definidos en el objeto de color y anulará los colores básicos y algunos colores estándar del tema GreyDark
.
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"
}
}
};
Consulta la lista completa de colores para anular los colores de los temas básicos.
Anular el color de componentes individuales
La selección de temas en Flex también admite personalizaciones pequeñas a nivel de cada componente. En el siguiente ejemplo de código, Flex anulará el color de fondo y el color de texto del componente MainHeader
, así como el color de fondo y los colores de los botones del componente SideNav
.
const configuration = {
colorTheme: {
overrides: {
MainHeader: {
Container: {
background: "#2f5771",
color: "#ffffff"
}
},
SideNav: {
Container: {
background: "#4a4e60"
},
Button: {
background: "#4a4e60"
},
}
}
}
};
Consulta la lista completa de componentes y propiedades personalizables.
Aplicar el tema
Una vez que hayas definido un tema, deberás aplicarlo a Flex UI (la interfaz de usuario de Flex).
Aplicar el tema en un plugin de Flex
Para definir el tema de color, especifica la propiedad baseName
junto con la propiedad opcional colors
y el objeto overrides
para el reemplazo de los colores del componente.
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"
},
}
}
}
A continuación, establece el tema personalizado dentro de la propiedad colorTheme
de la configuración de Flex y aplícala durante la inicialización del 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
};
// aplicar tema
manager.updateConfig(configuration);
}
}
Aplicar temas en las instalaciones autoalojadas de Flex
Incluye el tema personalizado en la propiedad colorTheme
del objeto de configuración al inicializar Flex.
const configuration = {
colorTheme: {
baseTheme: 'FlexDark'
}
}
Twilio.Flex.runDefault(configuration);
Próximos pasos
- Explora la referencia completa de los 11 colores básicos y las propiedades configurables de los temas
- Crea un plugin para personalizar el tema de tu instancia de Flex
- Comienza a cambiar el comportamiento de la interfaz de usuario de Flex con el marco de acciones
¿Necesitas ayuda?
Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.