KonstaProvider

• 使用方式
• KonstaProvider 屬性

使用方式

如果您將 Konsta UI 與其他框架（如 Framework7 或 Ionic）搭配使用，我們仍然應借助 KonstaProvider 來指定 Konsta UI 的全域設定（如主題）。

我們也需要在應用程式的根元素中加入 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 { kProvider, kBlock, kButton } from 'konsta/vue';

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

KonstaProvider 屬性