Konsta UI & Ionic

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

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

Ionicプロジェクトの作成

まず、Ionic Reactプロジェクトを作成します。

Tailwind CSSのインストール

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

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

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/**/*.{js,jsx,ts,tsx}'],
});

KonstaProvider

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

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

import React from 'react';
import { KonstaProvider } from 'konsta/react';
import { IonApp /* ... */ } from '@ionic/react';

const App: React.FC = () => (
  // Wrap IonApp with KonstaProvider with theme="parent"
  <KonstaProvider theme="parent">
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/home">
            <Home />
          </Route>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  </KonstaProvider>
);

使用方法

Ionicのルーターを正しく動作させるには、Ionicのルーター関連コンポーネント：IonApp、IonReactRouter、IonPage、IonHeader、IonFooter、IonToolbarを使用する必要があります。

残りのコンポーネント（Konsta UIの代替がある場合）は、Konsta UI（konsta/react）から取得できます。

サンプルページ

すべてが設定されたので、IonicページコンポーネントでKonsta UI Reactコンポーネントを使用できます。

たとえば、src/pages/Home.tsxを開き、次のように変更します。

import {
  IonContent,
  IonHeader,
  IonFooter,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import { Block, Button, List, ListItem, BlockTitle, Link } from 'konsta/react';

const Home: React.FC = () => {
  return (
    // Use IonPage, IonHeader, IonFooter & IonToolbar from Ionic
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>My App</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonFooter>
        <IonToolbar>
          <Link slot="start" toolbar>
            Link 1
          </Link>
          <Link slot="end" toolbar>
            Link 2
          </Link>
        </IonToolbar>
      </IonFooter>

      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">My App</IonTitle>
          </IonToolbar>
        </IonHeader>

        {/* In page content we can use Konsta UI components  */}
        <Block strong>
          <p>
            Here is your Ionic & Konsta UI app. Let's see what we have here.
          </p>
        </Block>
        <BlockTitle>Navigation</BlockTitle>
        <List>
          <ListItem href="/about/" title="About" />
          <ListItem href="/form/" title="Form" />
        </List>

        <Block strong className="flex space-x-4">
          <Button>Button 1</Button>
          <Button>Button 2</Button>
        </Block>
      </IonContent>
    </IonPage>
  );
};

export default Home;

結果として、次のページが表示されます。

カラースキーム

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