Usage

• Components
• App Component
• Konsta UI Provider

After installation process is done we can start using Konsta UI components in our Svelte application.

Components

The process is pretty straightforward and we need to import Konsta UI Svelte components from konsta/svelte:

<script>
  /* App.svelte */
  import { Block, Button } from 'konsta/svelte';
</script>

...
<Block>
  <p>This is block with text</p>
</Block>
<Block class="space-y-4">
  <p>Here comes the button</p>
  <Button>Action</Button>
</Block>
...

App Component

We suppose you use Konsta UI components with some other framework (like Framework7.

But if you use only Konsta UI then we need to wrap all our components with Konsta UI's App component.

In App component we can define global theme (iOS or Material) and other useful globals:

<script>
  import { App, Page, Navbar, Block } from 'konsta/svelte';
</script>

<App theme="ios">
  <Page>
    <Navbar title="My App" />
    <Block>
      <p>Here comes my app</p>
    </Block>
  </Page>
</App>

Konsta UI Provider

And if you do use Konsta UI with other frameworks, we still can (and should) specify Konsta UI's globals (like theme). For this case we need to use KonstaProvider.

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

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