KonstaProvider

Usage

If you use Konsta UI with other frameworks (like Framework7), 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.

<!-- App.svelte -->
<script>
  // 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>

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

touchRipplebooleantrue

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

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