KubedConfigProvider

提供主题对象上下文、国际化上下文和自定义配色方案。必须在应用程序的根目录下使用，并且只能使用一次.

使用

1
import { KubedConfigProvider } from "@kubed/components";
2

3
<KubedConfigProvider themeType={'dark'} locale={'zh'}>
4
  <App />
5
</KubedConfigProvider>;

Props

1
interface Props {
2
  /** 应用程序 **/
3
  children: React.ReactNode;
4
  /** 自定义主题 **/
5
  themes?: Array<KubedTheme>;
6
  /** 暗/亮色主题、或者自定义主题的name **/
7
  themeType?: string | 'dark' | 'light';
8
  /** 当前语言，默认支持'en', 'zh', 'zh-tw', 'es' **/
9
  locale?: Locale;
10
  /**  扩展的语言 **/
11
  extendLocales?: Record<Locale, ILocale>;
12
}

自定义主题

将主题对象传递给themes属性，可以自定义主题,它将与默认主题合并在所有组件中使用

1
import { KubedConfigProvider, Button, themeUtils } from "@kubed/components"
2
function App() {
3
  const customDarkTheme = themeUtils.createFromDark({
4
    type: "customDark",
5
    palette: {
6
      accents_1: "#1098AD",
7
      accents_2: "#3BC9DB",
8
    },
9
  })
10
  const customLightTheme = themeUtils.createFromLight({
11
    type: "customLight",
12
    palette: {
13
      accents_1: "#F76707",
14
      accents_2: "#FFA94D",
15
    },
16
  })
17
  const [themeType, setThemeType] = useState("customDark")
18
  return (
19
    <KubedConfigProvider
20
      themes={[customDarkTheme, customLightTheme]}
21
      themeType={themeType}
22
    >
23
      <Button
24
        onClick={() => {
25
          if (themeType === "customDark") {
26
            setThemeType("customLight")
27
          } else {
28
            setThemeType("customDark")
29
          }
30
        }}
31
      >
32
        button
33
      </Button>
34
    </KubedConfigProvider>
35
  )
36
}