如果您将 Konsta UI 与其他框架(如 Framework7 或 Ionic)一起使用,我们仍然应该使用 KonstaProvider
来指定 Konsta UI 的全局变量(如主题)。
我们还需要将 k-ios
或 k-material
类添加到应用程序的根元素中。
/* App.jsx */
import React from 'react';
// we use main App and Router components from Framework7
import { App, View, Page, Navbar } from 'framework7-react';
// we use KonstaProvider instead
import { KonstaProvider, Block, Button } from 'konsta/react';
export default function MyApp() {
return (
<>
{/* Wrap our app with KonstaProvider */}
<KonstaProvider theme="ios">
{/* We add extra `k-ios` class to the app root element */}
<App theme="ios" className="k-ios">
<View>
<Page>
<Navbar title="My App" />
{/* Konsta UI components */}
<Block>
<p>Here comes my app</p>
</Block>
<Block className="space-y-4">
<p>Here comes the button</p>
<Button>Action</Button>
</Block>
</Page>
</View>
</App>
</KonstaProvider>
</>
);
}
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
暗 | 布尔值 | 假 | 包含 |
主题 | 'ios' | '材料' | '父级' | '材料' | 应用程序主题。如果设置为 |
touchRipple | 布尔值 | 真的 | 在材料主题中启用触摸涟漪效果。允许全局禁用所有组件的触摸涟漪 |