🔥 遇见我们的新项目 t0ggles - 您终极的项目管理工具! 🔥

KonstaProvider

使用

如果您将 Konsta UI 与其他框架(如 Framework7Ionic)一起使用,我们仍然应该使用 KonstaProvider 来指定 Konsta UI 的全局变量(如主题)。

我们还需要将 k-iosk-material 类添加到应用程序的根元素中。

/* App.jsx */
import React from 'react';
// we use main App and Router components from Framework7
import { App, View, Page, Navbar } from 'framework7-react';
// we use KonstaProvider instead
import { KonstaProvider, Block, Button } from 'konsta/react';

export default function MyApp() {
  return (
    <>
      {/* Wrap our app with KonstaProvider */}
      <KonstaProvider theme="ios">
        {/* We add extra `k-ios` class to the app root element */}
        <App theme="ios" className="k-ios">
          <View>
            <Page>
              <Navbar title="My App" />
              {/*  Konsta UI components */}
              <Block>
                <p>Here comes my app</p>
              </Block>
              <Block className="space-y-4">
                <p>Here comes the button</p>
                <Button>Action</Button>
              </Block>
            </Page>
          </View>
        </App>
      </KonstaProvider>
    </>
  );
}

KonstaProvider 属性

名称类型默认值描述
布尔值

包含 dark: 变体(如果使用深色主题)

主题'ios' | '材料' | '父级''材料'

应用程序主题。如果设置为 'parent',它将查找 iosmd 类在根 <html> 元素,用于与 Framework7 或 Ionic 等父级框架一起使用

touchRipple布尔值真的

在材料主题中启用触摸涟漪效果。允许全局禁用所有组件的触摸涟漪

代码许可证下 MIT.
2022 © Konsta UI 由 nolimits4web.