sveltestrap

Bootstrap 5 компонентов для стройного 4+

Sveltestestrap - это библиотека, предназначенная для упрощения интеграции компонентов Bootstrap 5 в ваши стройные приложения. Это устраняет необходимость в классах компонентов начальной загрузки, включении Javascript от начальной загрузки и зависимости от jQuery.

Это программное обеспечение с открытым исходным кодом свободно доступно по разрешающей лицензии MIT. Это черпает вдохновение из библиотеки Reactstrap для React.

Обратите внимание, что SVELTESTESTRAP не встраивает непосредственно стиль начальной загрузки . Чтобы эффективно использовать начальные темы, вы должны включить 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

Bootstrap CSS

Важно отметить, что Bootstrap 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 />

Затем используйте компоненты SVELTESTESTRAP в своем стройном компоненте:

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

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

Иконки начальной загрузки

Если вы хотите использовать компонент значка, вы также должны включить ссылку на 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 /> 

Спонсоры

Содействия

Участники