使用方法

• コンポーネント
• AppComponent
• Konsta UI Provider

インストールプロセスが完了したら、VueアプリケーションでKonsta UIコンポーネントの使用を開始できます。

コンポーネント

そのプロセスは非常に簡単で、konsta/vue からKonsta UI Vueコンポーネントをインポートする必要があります。

<template>
  ...
  <k-block>
    <p>This is block with text</p>
  </k-block>
  <k-block class="space-y-4">
    <p>Here comes the button</p>
    <k-button>Action</k-button>
  </k-block>
  ...
</template>
<script>
  /* App.vue */
  import { kBlock, kButton } from 'konsta/vue';

  export {
    components: {
      kBlock,
      kButton,
    },
  }
</script>

AppComponent

他のフレームワーク（Framework7またはIonicなど）と一緒にKonsta UIコンポーネントを使用していると想定しています。

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

AppComponentでは、グローバルテーマ（iOSまたはマテリアル）およびその他の便利なグローバルを定義できます。

<template>
  <k-app theme="ios">
    <k-page>
      <k-navbar title="My App" />
      <k-block>
        <p>Here comes my app</p>
      </k-block>
    </k-page>
  </k-app>
</template>
<script>
  import { kApp, kPage, kNavbar, kBlock } from 'konsta/vue';

  export default {
    components: {
      kApp,
      kPage,
      kNavbar,
      kBlock,
    },
  };
</script>

Konsta UI Provider

他のフレームワークと一緒にKonsta UIを使用している場合でも、Konsta UIのグローバル（テーマなど）を指定できます（また、指定する必要があります）。この場合、KonstaProviderを使用する必要があります。

また、アプリのルート要素にk-iosまたはk-materialクラスを追加する必要があります。

<template>
  <!-- Wrap our app with KonstaProvider -->
  <k-provider theme="ios">
    <!-- We add extra `k-ios` class to the app root element -->
    <f7-app theme="ios" class="k-ios">
      <f7-view>
        <f7-page>
          <f7-navbar title="My App" />
          <!-- Konsta UI components -->
          <k-block>
            <p>Here comes my app</p>
          </k-block>
          <k-block class="space-y-4">
            <p>Here comes the button</p>
            <k-button>Action</k-button>
          </k-block>
        </f7-page>
      </f7-view>
    </f7-app>
  </k-provider>
</template>

<script>
  /* App.vue */
  // we use main App and Router components from Framework7
  import { f7App, f7View, f7Page, f7Navbar } from 'framework7-vue';
  // we use KonstaProvider instead
  import { konstaProvider, kBlock, kButton } from 'konsta/vue';

  export default {
    components: {
      f7App,
      f7View,
      f7Page,
      f7Navbar,
      konstaProvider,
      kBlock,
      kButton,
    },
  };
</script>