Инструкция по использованию Свелтестрапа

Svelte отлично подходит для создания пользовательских интерфейсов, хотя для небольших проектов может быть достаточно написания собственных стилей, однако для крупномасштабных проектов часто лучше использовать библиотеку компонентов.

Такие библиотеки предлагают множество преимуществ, таких как согласованные варианты дизайна пользовательского интерфейса, улучшенная доступность и гибкая настройка. Итак, давайте научимся работать с библиотекой компонентов Sveltetrap, чтобы упростить процесс разработки!

Что такое Svelte и Bootstrap?

Svelte — это специальный фреймворк JavaScript. Вместо выполнения большинства операций во время выполнения Svelte компилирует ваше приложение в JavaScript во время процесса сборки.

Этот уникальный подход устраняет необходимость в виртуальном DOM и значительно сокращает количество шаблонного кода.

Bootstrap — это CSS-фреймворк, который стал пионером философии дизайна, ориентированного на мобильные устройства. Он предоставляет богатый ресурс компонентов дизайна.

Установите Svelestrap в свой проект

Прежде чем вы сможете установить Sveltestrap в свой проект, вам необходимо убедиться, что Svelte настроен правильно. Убедитесь, что на вашем компьютере запущены Node.js, NPM или Yarn. Вы можете создать новый проект Svelte с помощью этой команды:

npm create vite # hoặc Yarn создать vite

Назовите проект Svelte и, когда будет предложено выбрать структуру и переменные, нажмите Svelte и JavaScript соответственно. После этого поместите компакт-диск в каталог проекта и запустите:

npm install # hoặc пряжа

Эта команда установит необходимые зависимости для конкретного проекта Svelte.

Когда проект Svelte будет готов, вы можете установить библиотеку Sveltetrap, запустив:

npm i sveltestrap # hoặc пряжа добавить sveltestrap

Удалите папки assets и lib, затем удалите содержимое файлов App.svelte и App.css. Теперь вы можете запустить сервер программирования, выполнив:

npm run dev # hoặc Yarn dev

Используйте Svelttrap в проектах

Чтобы начать использовать Sveltestrap, вам необходимо включить ссылку на таблицу стилей Bootstrap, используя ссылку CDN. Вы можете сделать это внутри элемента head в макете HTML или с помощью тега svelte:head в элементе Svelte.

Откройте файл index.html и добавьте следующий код в элемент head:

Если хотите, вы можете ввести или добавить тег ссылки непосредственно в специальный элемент svelte:head следующим образом:

Кроме того, вы можете использовать правило @import в теге стиля любого элемента, например:

Компонент кнопки в Sveltestrap

Стандартная платформа Bootstrap предоставляет ряд имен классов, которые вы можете использовать для стилизации своих кнопок. Эти параметры класса включают такие имена, как «основной», «опасность», «информация», «ссылка» и т. д.

В Sveltetrap каждый элемент Button имеет значение цвета, соответствующее параметрам стиля Bootstrap по умолчанию. Это упрощает процессы настройки. Чтобы импортировать такой компонент, как кнопка, добавьте следующий код в любой файл компонента .svelte, например src/App.svelte:

Затем добавьте компонент Button, передав значение свойству цвета.

Это кнопка «Осторожно!» Действительно очень информативно. Это ваш последний шанс.

Приведенный выше блок кода даст следующий результат:

Создание уведомлений в Sveltetrap

Добавить компонент уведомлений так же просто, как импортировать его из библиотеки Sveltestrap следующим образом:

Чтобы подавить предупреждение, вы должны добавить атрибут «dismissible» к компоненту следующим образом:

Это предупреждение

Как и в случае с компонентом Button, вы можете настроить цвет уведомления с помощью свойства color.

Это предупреждение.

Компонент Alert также предоставляет свойства isOpen и toggle, которые дают вам детальный контроль над открытым/закрытым состоянием окна уведомлений.

alert(“Ха-ха, это не работает! Используйте кнопку под оповещением.”)}> Я оповещение, которое можно закрыть только кнопкой ниже! (alertShown = false)}>Нажмите, чтобы закрыть оповещение.

Этот блок кода определяет компонент Alert со свойствами isOpen и toggle. Каждый компонент оповещения имеет значок «закрыть», позволяющий закрыть оповещение, но вы можете переопределить это поведение с помощью атрибута переключения.

Например, щелчок по значку x отображает диалоговое окно уведомления браузера вместо закрытия уведомления.

В реальном приложении вы можете использовать переключатель для вызова функции всякий раз, когда пользователь отклоняет предупреждение.

Как использовать выпадающее меню в Sveltestrap

Для работы с выпадающими меню используйте утилиту ButtonDropdown из библиотеки sveltetrap. В идеале вам следует добавить компонент DropdownToggle в качестве дочернего элемента ButtonDropdown для переключения раскрывающегося меню. Используйте другой дочерний компонент — DropdownMenu, чтобы содержать раскрывающиеся элементы.

Показать раскрывающийся список Категория 1 Некоторые действия Действие (отключено) Категория 2 Действие 1 Действие 2

Приведенный выше блок кода импортирует 4 компонента: ButtonDropdown, DropdownItem, DropdownMenu и DropdownToggle. Каждый DropdownItem предоставляет заголовок и разделитель, которые можно использовать для группировки связанных элементов раскрывающегося списка.

Понимание иконок в Svelttrap

Если вы хотите добавить значок Bootstrap в свой проект, вам необходимо импортировать компонент Icon.

Вы также должны включить в проект ссылку CDN на пакет Bootstrap Icons, желательно в специальный элемент svelte:head.

Каждый элемент Icon имеет атрибут name, в который вы передаете имя нужного значка Bootstrap. Вы можете использовать официальный сайт Bootstrap Icons, чтобы найти название значка, который вы хотите использовать.

Переместить в корзину

Обратите внимание, как значок автоматически меняет цвет в зависимости от контекста:

Выше приведены все, что вам нужно знать о том, как объединить Svelte и Bootstrap в программировании. Надеюсь, статья окажется для вас полезной.

Вышеуказанная статья познакомила вас с «Инструкцией по использованию Sveltestrap». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!