他のフレームワーク(Framework7など)でKonsta UIを使用する場合、KonstaProvider
を使用してKonsta UIのグローバル(テーマなど)を指定する必要があります。
また、k-ios
またはk-material
クラスをアプリのルート要素に追加する必要があります。
<!-- 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>
名前 | 型 | 既定値 | 説明 |
---|---|---|---|
dark | ブーリアン型 | false | (ダークテーマが使用されている場合) |
theme | 'ios' | 'material' | 'parent' | 'material' | アプリのテーマ。 |
touchRipple | ブーリアン型 | true | マテリアルテーマでタッチリップル効果を有効にします。すべてのコンポーネントでタッチリップルを無効にすることができます。 |