Konsta UI と SvelteKit

• SvelteKit プロジェクトの作成
• Tailwind CSS のインストール
• Konsta UI のインストール
• アプリコンポーネント
• 例ページ

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

SvelteKit プロジェクトの作成

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

Tailwind CSS のインストール

SvelteKit 用 Tailwind CSS のインストールガイドに従うことができます。

Konsta UI のインストール

作成した SvelteKit プロジェクトでは、Konsta UI をインストールする必要があります。

npm i konsta

tailwind.config.cjs ファイルで、Konsta UI の設定で設定を拡張する必要があります。

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

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: ['./src/**/*.{html,js,svelte,ts}'],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
});

アプリコンポーネント

メイン アプリ コンポー

./src/routes/_layout.svelte でアプリ全体を App でラップする必要があります

<script>
  import '../app.css';
  import { App } from 'konsta/svelte';
</script>

<App theme="ios">
  <slot />
</App>

例ページ

すべての設定が完了したら、SvelteKit ページで Konsta UI Svelte のコンポーネントを使用できます。

たとえば、src/routes/index.svelte を開いて、以下のように変更します

<script>
  import {
    Page,
    Navbar,
    Block,
    Button,
    List,
    ListItem,
    BlockTitle,
  } from 'konsta/svelte';
</script>

<Page>
  <Navbar title="My App" />

  <Block strong>
    <p>Here is your SvelteKit & 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 class="flex space-x-4">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </Block>
</Page>

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