使用

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

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

组件

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

<script>
  /* App.svelte */
  import { Block, Button } from 'konsta/svelte';
</script>

...
<Block>
  <p>This is block with text</p>
</Block>
<Block class="space-y-4">
  <p>Here comes the button</p>
  <Button>Action</Button>
</Block>
...

应用组件

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

但是，如果您只使用 Konsta UI，那么我们需要用 Konsta UI 的 应用组件 包装所有组件。

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

<script>
  import { App, Page, Navbar, Block } from 'konsta/svelte';
</script>

<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 类添加到应用程序的根元素。

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

<!-- Wrap our app with KonstaProvider -->
<KonstaProvider theme="ios">
  <!-- We add extra `k-ios` class to the app root element -->
  <App theme="ios" class="k-ios">
    <View>
      <Page>
        <Navbar title="My App" />
        <!-- Konsta UI components -->
        <Block>
          <p>Here comes my app</p>
        </Block>
        <Block class="space-y-4">
          <p>Here comes the button</p>
          <Button>Action</Button>
        </Block>
      </Page>
    </View>
  </App>
</KonstaProvider>