sveltestrap

Svelte 4+のブートストラップ5コンポーネント

Sveltestrapは、Bootstrap 5コンポーネントのSvelteアプリケーションへの統合を簡素化するために設計されたライブラリです。 Bootstrapコンポーネントクラスの必要性、BootstrapのJavaScriptの包含、およびjQueryへの依存を排除します。

このオープンソースソフトウェアは、許容されるMITライセンスの下で自由に利用できます。 ReactStrapライブラリからReactのインスピレーションを引き出します。

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

注Svelte 3.Xサポートをお探しの場合は、元のSveltestrapパッケージを使用できます。

コミュニティに参加してください

---

インストール

 # npm
> npm install svelte @sveltestrap/sveltestrap

# pnpm
> pnpm install svelte @sveltestrap/sveltestrap

# yarn
> yarn add svelte @sveltestrap/sveltestrap

ブートストラップCSS

ブートストラップ5コンポーネントにはブートストラップスタイルがプリロードされていないため、スタイルシートを手動で追加する必要があることに注意することが不可欠です。これらを追加する方法は次のとおりです。

1. アプリStatic index.htmlファイルに追加します

 < head >
  < link
    rel =" stylesheet "
    href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css "
  />
</ head >

2. メインApp.svelteファイルに追加します

 < svelte:head >
  < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " >
</ svelte:head >

3. CSSバンドルにスタイルを直接インポートします

 < style >
  @import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
</ style >

4. 提供されたスタイルコンポーネントを使用します

 < script >
  import { Styles } from '@sveltestrap/sveltestrap' ;
</ script >

< Styles />

次に、SvelteコンポーネントでSveltestrapコンポーネントを使用します。

 < script >
  import { Button , Col , Row } from '@sveltestrap/sveltestrap' ;
</ script >

< Row >
  < Col >
    < Button color =" primary " outline > Hello World! </ Button >
  </ Col >
</ Row > 

ブートストラップアイコン

アイコンコンポーネントを使用する場合は、BootstrapアイコンCSSへのリンクも含める必要があります。

アプリのApp.svelteに含める：

 < svelte:head >
  < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css " >
</ svelte:head >

または、アプリのindex.htmlにそれを含めることができます：

 < link
  rel =" stylesheet "
  href =" https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css "
/>

または、スタイルコンポーネントには、デフォルトでBootstrapアイコンCSSが含まれます。

 < script >
  import { Styles } from '@sveltestrap/sveltestrap' ;
</ script >

< Styles /> 

スポンサー

メンテナー

貢献者