Sveltestrapとは

https://sveltestrap.js.org/

Sveltestrap は、Bootstrap 5 コンポーネントを Svelte アプリケーションに簡単に統合できるように設計されたライブラリです。 これにより、Bootstrap コンポーネント クラスの必要性、Bootstrap の JavaScript の組み込み、および jQuery への依存が不要になります。

このオープンソース ソフトウェアは、寛容な MIT ライセンスの下で自由に利用できます。

Sveltestrap は Bootstrap スタイルを直接埋め込んでいないことに注意してください。 Bootstrap テーマを効果的に使用するには、以下で説明する方法のいずれかを使用して Bootstrap 5 CSS を組み込む必要があります。

インストール方法

Sveltestrapをインストール

npm i @sveltestrap/sveltestrap

Bootstrap 5がインストールされていない場合、下記のコマンドも実行してください。

npm i bootstrap

使用例

1.+layout.svelteにbootstrapの引用があることを確認してください。

<script>
    import "bootstrap/dist/css/bootstrap.min.css";
</script>

2.使いたい時だけ使うコンポーネントをそのまま利用できます。 以下は「ポップアップダイアログ」と「左メニュー」の例です。

<script>
    import { Button, Modal } from '@sveltestrap/sveltestrap';
    let openstateDialog1 = false;

    function toggle2(){
        return openstateDialog1 = !openstateDialog1;
    }

    let isOpenOffcanvasLeft = false;

    import { Offcanvas } from '@sveltestrap/sveltestrap';
    const toggleoff = () => {
        isOpenOffcanvasLeft = !isOpenOffcanvasLeft;
    };


</script>

<h1>Welcome to SvelteKit3</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<div class="h5">
    <a href="/about">About Page</a>
</div>

<Button color="danger" on:click={toggle2}>Open Modal3</Button>
<Modal body header="Modal title" isOpen={openstateDialog1} toggle={toggle2}>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
</Modal>

<Button color="primary" on:click={toggleoff}>Open</Button>
<Offcanvas header="No Backdrop" isOpen={isOpenOffcanvasLeft} toggle={toggleoff} backdrop={false}>
    Look ma, no backdrop.
</Offcanvas>

<button class="btn btn-outline-success" type="button" on:click={toggleoff}>カスタマイズボタン</button>