Почетак рада са Свелтестрапом

Свелте је одличан избор за изградњу корисничких интерфејса и, док писање прилагођених стилова може бити довољно за мале пројекте, библиотека компоненти је често боља за велике пројекте.

Такве библиотеке нуде предности као што су конзистентан кориснички интерфејс, побољшана приступачност и флексибилне опције прилагођавања. Научите како можете да радите са СвелтеСтрап библиотеком компоненти да бисте поједноставили свој развој.

Шта су Свелте и Боотстрап?

Свелте је ЈаваСцрипт оквир који се разликује од конвенционалног приступа који користе оквири као што је Реацт. Уместо да покреће већину својих операција током рада, Свелте компајлира вашу апликацију у ЈаваСцрипт током процеса прављења.

Овај јединствени приступ елиминише потребу за виртуелним Модел објекта документа (ДОМ) и значајно смањује шаблонски код.

Боотстрап је ЦСС оквир, креиран од стране Твитера (сада под брендом Кс), који је био пионир филозофије дизајна „прво мобилни“. Нуди обиље унапред дизајнираних компоненти.

Инсталирање Свелтестрапа у ваш пројекат

Пре него што можете да инсталирате Свелтестрап у свој пројекат, морате се уверити да је ваш Свелте пројекат правилно подешен. Уверите се да имате Ноде.јс и Ноде Пацкаге Манагер (НПМ) или предива која ради на вашој машини. Можете направити скелу за нови Свелте пројекат са овом командом:

npm create vite
# or
yarn create vite

Именујте свој Свелте пројекат и када се од вас затражи да изаберете оквир и варијанту, изаберите Свелте и ЈаваСцрипт респективно. Након тога, цд у директоријум пројекта и покрените:

npm install
# or
yarn

Ова команда ће инсталирати неопходне зависности за типичан Свелте пројекат.

Када је ваш Свелте пројекат спреман, сада можете да инсталирате Свелтестрап библиотеку тако што ћете покренути:

npm i sveltestrap
# or
yarn add sveltestrap

npm config set legacy-peer-deps true
npm cache clean --force

Обришите средства анд тхе либ фолдер, а затим обришите садржај Апп.свелте фајл и Апп.цсс фајл. Након тога можете покренути развојни сервер тако што ћете покренути:

npm run dev
# or
yarn dev

Коришћење Свелтестрапа у свом пројекту

Да бисте почели да користите Свелтестрап, потребно је да укључите везу до Боотстрап стилске листе користећи ЦДН везу. То можете учинити унутар глава елемент у вашем ХТМЛ изгледу или из витка: глава означите у вашој Свелте компоненти.

Отвори индек.хтмл датотеку и додајте следеће у глава елемент:

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

Ако желите, можете увести или додати линк таг директно у витка: глава посебан елемент као што је овај:

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

Алтернативно, можете користити @увоз владати у стил таг било које компоненте попут ове:

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

Компонента дугмета у Свелтестрапу

Стандардни Боотстрап оквир пружа низ имена класа које можете користити за стилизовање дугмади. Ове опције класе укључују имена као што су „примарни“, „опасност“, „инфо“, „линк“ и многа друга.

У Свелтестрапу, сваки Дугме компонента погодно садржи реквизит у боји који је у складу са Боотстрап-овим подразумеваним опцијама стила. Ово помаже да се поједностави процес прилагођавања. Да бисте увезли компоненту попут дугмета, додајте следеће у било које .свелте компонентна датотека, нпр срц/Апп.свелте: