@fluentui-react-native/design

Fluent UI React Indust:主题来源和提供者,现成 流利和 Flex 主题,结构化的光线,暗色,高相接,以及高相接的外观, Flex 语义符号,主题 风格工厂, 和一个选入运行时间色彩库。 遗留主题和令牌包从这里再导出他们的API.

快开始

包装一个场景 ThemedRoot (或 ThemeProvider,并读取 Flex 符号与 useThemeState数字 :

import { Text } from 'react-native';
import { FlexThemeReference, ThemedRoot, useThemeState } from '@fluentui-react-native/design';

const theme = new FlexThemeReference({ appearance: { colorScheme: 'system' } });

const Title = () => {
  const { tokens } = useThemeState();
  return <Text style={{ color: tokens.color.foregroundNeutralPrimary.rest, fontSize: tokens.fontSize.functionalTitleSmall }}>Hello</Text>;
};

export const App = () => (
  <ThemedRoot theme={theme} style={{ flex: 1 }}>
    <Title />
  </ThemedRoot>
);

现有 ThemeReference 主题和主题 useTheme 消费者继续在同一供应商之下工作 主题参考 解释写作模式和它们如何相互操作.

流利自有的光线 黑暗和高相干的主题船 themes 进入点,以及 fluentTheme 沿着 系统外观,包括高对比度:

import { ThemedRoot } from '@fluentui-react-native/design';
import { fluentTheme } from '@fluentui-react-native/design/themes';

export const App = () => (
  <ThemedRoot theme={fluentTheme} style={{ flex: 1 }}>
    <Title />
  </ThemedRoot>
);

使用 fluentLightTheme 或者说 fluentDarkTheme 当你需要一个固定 Theme 对象,或 fluentHcTheme 总是使用 高对比度.

X3 Flex 的默认输入点为 flexCoolTheme 财务报告和审定财务报表 flexWarmTheme,可独立捆绑 描述光和暗. flexTheme 包含和开关调色板 appearance.colorTone。 。 。 . 用一作为 FlexThemeReference 基础 :

import { FlexThemeReference } from '@fluentui-react-native/design';
import { flexWarmTheme } from '@fluentui-react-native/design/themes';

const theme = new FlexThemeReference({ base: flexWarmTheme, appearance: { colorScheme: 'system' } });

没有明确的主题或继承边界, ThemedRoot 和主题钩 flexCoolTheme。 。 。 .

文档

这个 参考索引 列出每个编号的引用。 此套件的代理从 一般事务人员(其他职等)。 。 。 .