Konsta UI & Ionic

• Ionicプロジェクトの作成
• Tailwind CSSのインストール
• Tailwind CSSスタイル
• Konsta UIのインストール
• KonstaProvider
• 使用方法
• サンプルページ
• カラースキーム

Konsta UI VueコンポーネントをIonic Vueで使用する方法を見てみましょう。

Ionicプロジェクトの作成

最初に、Ionic Vueプロジェクトを作成します。

Tailwind CSSのインストール

Ionic CLIでIonic Vueプロジェクトが生成された場合、実際にはVue CLIプロジェクトが作成されます。

そのため、Tailwind CSSをインストールするには、公式のTailwind CSSインストールガイドに従うことができます。

Tailwind CSSスタイル

Tailwind CSSを含めるには、`src/App.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

これで、グローバルパラメータ（`theme`など）を設定できるKonstaProviderを設定する必要があります。

`src/App.tsx`で、Ionicのメイン`IonApp`コンポーネントを`KonstaProvider`でラップする必要があります。

<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',
        },
      },
    },
  },
});