使用方法

• コンポーネント
• 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 コンポーネント

Framework7 などの他のフレームワークで Konsta UI コンポーネントを使用すると想定します。

ただし、Konsta UI のみを使用する場合、すべてのコンポーネントを Konsta UI のApp コンポーネントでラップする必要があります。

App コンポーネントでは、グローバルテーマ（iOS またはマテリアル）やその他の便利なグローバルを定義できます。

<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>