Compartir a través de

Componentes de estilo con temática moderna (vista previa)

  • Artículo

[Este tema es documentación preliminar y está sujeto a modificaciones.]

Los desarrolladores deben poder diseñar sus componentes para que se parezcan al resto de la aplicación en la que están incluidos. Pueden hacer esto cuando la temática moderna está vigente para una aplicación de lienzo (a través de la función Controles y temas modernos) o una aplicación basada en modelo (a través de la nueva apariencia renovada). Utilice temas modernos, que se basan en Fluent UI React v9, para diseñar su componente. Se recomienda este enfoque para obtener el mejor rendimiento y experiencia temática para su componente.

Hay cuatro formas diferentes de aplicar temas modernos a su componente.

Controles de Fluent UI v9

Envolver los controles de Fluent UI v9 como un componente es la forma más fácil de utilizar temas modernos porque el tema moderno se aplica automáticamente a estos controles. El único requisito previo es asegurarse de que su componente agregue una dependencia de los controles y funciones React. bibliotecas de plataforma (vista previa) como se muestra a continuación. Este enfoque permite que su componente use las mismas bibliotecas React y Fluent que la plataforma y, por lo tanto, comparta el mismo contexto de React que pasa los tokens del tema al componente.

<resources>
  <code path="index.ts" order="1"/>
  <!-- Dependency on React controls & platform libraries -->
  <platform-library name="React" version="16.8.6" />
  <platform-library name="Fluent" version="9.46.2" />
</resources>

Controles de Fluent UI v8

Fluent proporciona una ruta de migración para aplicar construcciones de temas v9 cuando usa controles Fluent UI v8 en su componente. Utilice la función createV8Theme incluida en el paquete de migración de Fluent v8 a v9 para crear un tema v8 basado en tokens de tema v9, como se muestra en el siguiente ejemplo. :

const theme = createV8Theme(
  context.fluentDesignLanguage.brand,
  context.fluentDesignLanguage.theme
);
return <ThemeProvider theme={theme}></ThemeProvider>;

Controles no de Fluent UI

Si su componente no utiliza Fluent UI, puede tomar una dependencia directamente en los tokens del tema v9 disponibles a través del parámetro de contexto fluentDesignLanguage . Utilice este parámetro para obtener acceso a todos los tokens del tema para que pueda hacer referencia a cualquier aspecto del tema para diseñarlo.

<span style={{ fontSize: context.fluentDesignLanguage.theme.fontSizeBase300 }}>
  {"Stylizing HTML with platform provided theme."}
</span>

Proveedores de temas personalizados

Cuando su componente requiera un estilo diferente al tema actual de la aplicación, cree el suyo propio FluentProvider y pase su propio conjunto de tokens de tema para que los utilice su componente.

<FluentProvider theme={context.fluentDesignLanguage.tokenTheme}>
  {/* your control */}
</FluentProvider>

Controles de ejemplo

Hay ejemplos de cada uno de estos casos de uso disponibles en Control de API de temática moderna.

Preguntas frecuentes

Esta sección contiene preguntas frecuentes. Si tiene alguna pregunta sobre esta función, utilice el botón Comentarios para Esta página al final de esta página. para crear un problema de GitHub.

P: Mi control usa Fluent UI v9 y depende de las bibliotecas de la plataforma, pero no quiero utilizar temas modernos. ¿Cómo puedo desactivarlo para mi componente?

R: Puede hacerlo de dos maneras distintas:

  1. Puede crear su propio FluentProvider en el nivel de componente

    <FluentProvider theme={customFluentV9Theme}>
  {/* your control */}
</FluentProvider>

  2. Puede ajustar su control dentro de IdPrefixContext.Provider y establecer su propio valor idPrefix. Esto evita que su componente obtenga tokens de tema de la plataforma.

    <IdPrefixProvider value="custom-control-prefix">
  <Label weight="semibold">This label is not getting Modern Theming</Label>
</IdPrefixProvider>

P: Algunos de mis controles de Fluent UI v9 no obtienen estilos

R: Los controles de Fluent v9 que dependen del Portal React deben volver a empaquetarse en el proveedor de temas para garantizar que el estilo se aplique correctamente. Puede usar FluentProvider.

P: Cómo puedo comprobar si la temática moderna está habilitada

R: Puede comprobar si los tokens están disponibles: context.fluentDesignLanguage?.tokenTheme. O en aplicaciones basadas en modelos puede verificar la configuración de la aplicación: context.appSettings.getIsFluentThemingEnabled().

Temas (referencia de la API de Power Apps component framework)
Control de API de temas modernos
Usar temas modernos en aplicaciones de lienzo (versión preliminar)

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).