使用

• 组件
• 应用程序组件
• Konsta UI 提供者

在 安装 完成后，我们可以开始在 React 应用程序中使用 Konsta UI 组件。

组件

这个过程非常简单，我们需要从 konsta/react 导入 Konsta UI React 组件。

/* App.jsx */
import React from 'react';
import { Block, Button } from 'konsta/react';

export function MyApp() {
  // ...

  return (
    <>
      <Block>
        <p>This is block with text</p>
      </Block>
      <Block className="space-y-4">
        <p>Here comes the button</p>
        <Button>Action</Button>
      </Block>
    </>
  );
}

应用程序组件

我们假设您将 Konsta UI 组件与其他框架（如 Framework7 或 Ionic）一起使用。

但是，如果您只使用 Konsta UI，则需要将所有组件包装在 Konsta UI 的 应用程序组件 中。

在 应用程序组件 中，我们可以定义全局主题（iOS 或 Material）以及其他有用的全局变量。

/* App.jsx */
import React from 'react';
import { App, Page, Navbar, Block } from 'konsta/react';

export default function MyApp() {
  return (
    <App theme="ios">
      <Page>
        <Navbar title="My App" />
        <Block>
          <p>Here comes my app</p>
        </Block>
      </Page>
    </App>
  );
}

Konsta UI 提供者

如果您确实将 Konsta UI 与其他框架一起使用，我们仍然可以（也应该）指定 Konsta UI 的全局变量（如主题）。在这种情况下，我们需要使用 KonstaProvider。

我们还需要将 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>
    </>
  );
}