Konsta UI & Ionic

• 创建 Ionic 项目
• 安装 Tailwind CSS
• Tailwind CSS 样式
• 安装 Konsta UI
• KonstaProvider
• 使用
• 示例页面
• 颜色主题

让我们看看如何使用 Konsta UI Vue 组件与 Ionic Vue。

创建 Ionic 项目

首先，创建一个 Ionic Vue 项目.

安装 Tailwind CSS

如果 Ionic Vue 项目是使用 Ionic CLI 生成的，它实际上会创建一个 Vue CLI 项目。

因此，要安装 Tailwind CSS，我们可以按照官方 Tailwind CSS 安装指南

Tailwind CSS 样式

创建一个包含以下内容的 src/App.css 文件以包含 Tailwind CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

安装 Konsta UI

现在，我们可以安装 Konsta UI

npm i konsta

在您的 tailwind.config.js 文件中，我们应该使用 Konsta UI 的配置扩展配置

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  content: ['./src/**/*.vue', './src/*.vue'],
});

KonstaProvider

现在我们需要设置 KonstaProvider，这样我们就可以设置一些全局参数（例如 theme）。

我们需要在 src/App.tsx 中使用 KonstaProvider 包装 Ionic 的主要 IonApp 组件。

<template>
  <!-- Wrap IonApp with KonstaProvider with theme="parent" -->
  <k-provider theme="parent">
    <ion-app>
      <ion-router-outlet />
    </ion-app>
  </k-provider>
</template>

<script lang="ts">
  import { konstaProvider } from 'konsta/vue';
  import { IonApp, IonRouterOutlet } from '@ionic/vue';
  import { defineComponent } from 'vue';
  import './App.css';

  export default defineComponent({
    name: 'App',
    components: {
      IonApp,
      IonRouterOutlet,
      konstaProvider,
    },
  });
</script>

使用

为了保持 Ionic 路由器正常工作，我们需要使用 Ionic 中与路由器相关的组件：IonApp、IonReactRouter、IonPage、IonHeader、IonFooter、IonToolbar。

其余组件（如果有 Konsta UI 替代方案）可以从 Konsta UI（konsta/vue）中获取。

示例页面

现在一切都设置好了，我们可以在 Ionic 页面组件中使用 Konsta UI Vue 组件。

例如，让我们打开 src/pages/Home.tsx 并将其更改为以下内容

<template>
  <!-- Use IonPage, IonHeader, IonFooter & IonToolbar from Ionic -->
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>My App</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-footer>
      <ion-toolbar>
        <k-link slot="start" toolbar>
          Link 1
        </k-link>
        <k-link slot="end" toolbar>
          Link 2
        </k-link>
      </ion-toolbar>
    </ion-footer>

    <ion-content fullscreen>
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">My App</ion-title>
        </ion-toolbar>
      </ion-header>

      <!-- In page content we can use Konsta UI components -->
      <k-block strong>
        <p>
          Here is your Ionic & Konsta UI app. Let's see what we have
          here.
        </p>
      </k-block>
      <k-block-title>Navigation</k-block-title>
      <k-list>
        <k-list-item href="/about/" title="About" />
        <k-list-item href="/form/" title="Form" />
      </k-list>

      <k-block strong class="flex space-x-4">
        <k-button>Button 1</k-button>
        <k-button>Button 2</k-button>
      </k-block>
    </ion-content>
  </ion-page>
</template>
<script>
import {
  IonContent,
  IonHeader,
  IonFooter,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/vue';
import {
  kBlock,
  kButton,
  kList,
  kListItem,
  kBlockTitle,
  kLink,
} from 'konsta/vue';

export default {
  components: {
    IonContent,
    IonHeader,
    IonFooter,
    IonPage,
    IonTitle,
    IonToolbar,
    kBlock,
    kButton,
    kList,
    kListItem,
    kBlockTitle,
    kLink,
  }
}

</script>

结果我们应该看到以下页面

颜色主题

Ionic 和 Konsta UI 使用不同的来源作为主要主题颜色。虽然 Ionic 的主题颜色是通过 CSS 自定义属性配置的，但 Konsta UI 主题应该在 tailwind.config.js 中设置。

假设我们的主题颜色是 #ff6b22，我们需要设置以下内容

在 App.css 中（配置 Ionic 主题颜色）

:root {
  --ion-color-primary: #ff6b22;
  --ion-color-primary-rgb: 255, 107, 34;
  --ion-color-primary-shade: #f85200;
  --ion-color-primary-tint: #ff864b;
}

在 tailwind.config.js 中（配置 Konsta UI 主题颜色）

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // extend primary color
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#ff864b',
          DEFAULT: '#ff6b22',
          dark: '#f85200',
        },
      },
    },
  },
});