App Vue コンポーネント

App コンポーネント
App プロパティ
例

App Vue コンポーネントは、グローバルテーマ（iOSまたはMaterial）とその他の便利なグローバル設定を定義できるメインのアプリコンポーネントです。

Konsta UI を他のフレームワーク（Framework7 や Ionic など）と併用する場合は、代わりに KonstaProvider を使用してください。

App コンポーネント

以下のコンポーネントが含まれています。

App

App プロパティ

名前	型	デフォルト	説明
component	文字列	'div'	コンポーネントのHTML要素
dark	ブール値	false	`dark:` バリアントを含める（ダークテーマが使用されている場合）
safeAreas	ブール値	true	コンテナに`safe-areas`クラスを追加します。アプリコンテナが全画面要素である場合、画面のセーフエリアを適切に処理するために有効にする必要があります。
theme	'ios' \| 'material' \| 'parent'	'material'	アプリのテーマ。`'parent'`に設定すると、ルート`<html>`要素で`ios`または`md`クラスを探します。Framework7やIonicなどの親フレームワークで使用する場合に便利です。
touchRipple	ブール値	true	Materialテーマでタッチリップル効果を有効にします。すべてのコンポーネントのタッチリップルをグローバルに無効にすることができます。

例

Appコンポーネントは、すべてのKonsta UIコンポーネントのメインラッパーとして使用し、アプリには一度に1つのAppコンポーネントのみを含める必要があります。

<template>
  <!-- App component ideally should be the main root component -->
  <k-app theme="ios" safe-areas>
    <!-- rest of Konsta UI components -->
  </k-app>
</template>
<script>
  import { kApp } from 'konsta/vue';

  export default {
    components: {
      kApp,
    },
  };
</script>