KonstaProvider

• Usage
• KonstaProvider Props

Usage

If you use Konsta UI with other frameworks (like Framework7 or Ionic), we still should specify Konsta UI's globals (like theme) with the help of KonstaProvider.

We also need to add k-ios or k-material class to the app's root element.

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