🔥新しいプロジェクトをご覧ください t0ggles -プロジェクト管理の究極ツール! 🔥

KonstaProvider

使い方

他のフレームワーク(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>

KonstaProviderのProps

名前既定値説明
darkブーリアン型false

(ダークテーマが使用されている場合)dark:バリエーションを含めます。

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

アプリのテーマ。'parent'に設定した場合、次を検索します。 ルートにiosまたはmdクラス <html>要素。Framework7などの親フレームワークで使用する場合に役立ちます。

touchRippleブーリアン型true

マテリアルテーマでタッチリップル効果を有効にします。すべてのコンポーネントでタッチリップルを無効にすることができます。

コードは、次のライセンスに基づいています。 MIT.
2022 © Konsta UI by nolimits4web.