App React 元件

App 元件
App 屬性
範例

App React 元件是主要的應用程式元件，允許定義全域主題（iOS 或 Material）和其他有用的全域設定。

如果您將 Konsta UI 與其他框架（例如 Framework7 或 Ionic）一起使用，則應改用 KonstaProvider。

App 元件

包括以下元件

App

App 屬性

名稱	類型	預設值	描述
component	string	'div'	元件的 HTML 元素
dark	boolean	false	包含 `dark:` 變體（如果使用深色主題）
safeAreas	boolean	true	將 `safe-areas` 類別新增至容器。如果應用程式容器是全螢幕元素，則應啟用此功能，以正確處理螢幕安全區域
theme	'ios' \| 'material' \| 'parent'	'material'	應用程式主題。如果設定為 `'parent'`，它將在根 `<html>` 元素上尋找 `ios` 或 `md` 類別，適用於與父框架（如 Framework7 或 Ionic）一起使用
touchRipple	boolean	true	在 Material 主題中啟用觸摸漣漪效果。允許全域禁用所有元件的觸摸漣漪

範例

App 元件應作為所有 Konsta UI 元件的主要包裝器使用，並且應用程式中一次只能有一個 App 元件

import React from 'react';
import { App } from 'konsta/react';

export default function MyApp() {
  return (
    <>
      {/* App component ideally should be the main root component */}
      <App theme="ios" safeAreas>
        {/* rest of Konsta UI components */}
      </App>
    </>
  );
}