Menu

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:

  1. Temas básicos: temas predefinidos de Flex que se incluyen de forma predeterminada.
  2. 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).
  3. 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

Calificar esta página:

¿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.

Gracias por tus comentarios.

Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

Enviando tus comentarios…
🎉 Gracias por tus comentarios.
Se produjo un error. Inténtalo de nuevo.

Gracias por tus comentarios.

thanks-feedback-gif