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 元件的主要包裝器使用，並且在應用程式中一次只能有一個 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>