KonstaProvider

• 使用方法
• KonstaProvider 屬性

使用方法

如果您將 Konsta UI 與其他框架（如 Framework7 或 Ionic）一起使用，我們仍然應該藉由 KonstaProvider 指定 Konsta UI 的全域設定（如主題）。

我們還需要將 k-ios 或 k-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 屬性