使用方式

• 元件
• App 元件
• 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>
...

App 元件

我們假設您將 Konsta UI 元件與其他框架（如 Framework7）一起使用。

但如果您只使用 Konsta UI，那麼我們需要將我們所有的元件都包裹在 Konsta UI 的 App 元件中。

在 App 元件中，我們可以定義全域主題（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>