🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

KonstaProvider

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

NameTypeDefaultDescription
darkbooleanfalse

Include dark: variants (if dark theme is in use)

theme'ios' | 'material' | 'parent''material'

App theme. If set to 'parent' it will look for ios or md class on root <html> element, useful to use with parent framework like Framework7 or Ionic

touchRipplebooleantrue

Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components

Code licensed under MIT.
2022 © Konsta UI by nolimits4web.