bestguy / Sveltestrap
Licence: mit
Bootstrap 4 components for Svelte
Stars: ✭ 536
Projects that are alternatives of or similar to Sveltestrap
Language Tools
The Svelte Language Server, and official extensions which use it
Stars: ✭ 516 (-3.73%)
Mutual labels: svelte
Bootstraping Ngx Admin Lte
Angular2,4,6 project with AdminLTE dashboard template (using angular, angular-cli and ngx-admin-lte ) Formerly called 'ng2-admin-lte'.
Stars: ✭ 479 (-10.63%)
Mutual labels: bootstrap
Awesome React Bootstrap Components
⚛️ React.js components made using 🅱️ Bootstrap
Stars: ✭ 490 (-8.58%)
Mutual labels: bootstrap
Responsiveframework
Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple. Demo: https://gallery.codelessly.com/flutterwebsites/minimal/
Stars: ✭ 476 (-11.19%)
Mutual labels: bootstrap
Ember Bootstrap
Ember-cli addon for using Bootstrap as native Ember components.
Stars: ✭ 475 (-11.38%)
Mutual labels: bootstrap
Gae Init
Google App Engine based on Python, Flask, RESTful, Bootstrap and tons of other cool features
Stars: ✭ 533 (-0.56%)
Mutual labels: bootstrap
Plenti
Static Site Generator with Go backend and Svelte frontend
Stars: ✭ 511 (-4.66%)
Mutual labels: svelte
Guns Lite
基于spring boot脚手架项目，spring data jpa+Spring Boot2+bootstrap完整的后台管理系统
Stars: ✭ 491 (-8.4%)
Mutual labels: bootstrap
Bootstrap Vertical Tabs
Missing vertical tabs component for bootstrap.
Stars: ✭ 489 (-8.77%)
Mutual labels: bootstrap
Svelte Devtools
An extension that allows inspection of Svelte component hierarchy and state in the Firefox and Chrome developer tools.
Stars: ✭ 484 (-9.7%)
Mutual labels: svelte
React Typescript Web Extension Starter
🖥 A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, EsLint, Prettier, Webpack and Bootstrap. Supports Google Chrome + Mozilla Firefox + Brave Browser 🔥
Stars: ✭ 510 (-4.85%)
Mutual labels: bootstrap
Jtsage Datebox
A multi-mode date and time picker for Bootstrap (3&4), jQueryMobile, Foundation, Bulma, FomanticUI, and UIKit (or others)
Stars: ✭ 481 (-10.26%)
Mutual labels: bootstrap
Fontawesome Iconpicker
Font Awesome Icon Picker component for Bootstrap.
Stars: ✭ 519 (-3.17%)
Mutual labels: bootstrap
Twitter Bootstrap Rails
Twitter Bootstrap for Rails 6.0, Rails 5 - Rails 4.x Asset Pipeline
Stars: ✭ 4,518 (+742.91%)
Mutual labels: bootstrap
Community
Svelte community meetups, packages, resources, recipes, showcase websites, and more
Stars: ✭ 533 (-0.56%)
Mutual labels: svelte
Django React Blog
Simple blog built with Django and React/Redux, deployed with Docker, and served with nginx/uwsgi.
Stars: ✭ 528 (-1.49%)
Mutual labels: bootstrap
Bootstrap 4 components for Svelte v3
The philosophy of this library is to provide all Bootstrap 4 components for a Svelte app, without needing to directly use Bootstrap component classes or needing to include Bootstrap's JavaScript.
However, to make using Bootstrap themes easier, this library does not embed Bootstrap styles directly and you will need to include Bootstrap 4 CSS in your page (see 'Usage' below).
The component names and props interface are inspired by the reactstrap library for React.
Status
- Some stateful components have issues
- Collapse uses the Svelte slide transition. In Svelte, the component is removed from the DOM whereas in Bootstrap, it stays in the DOM, but is hidden. This interacts badly with nav bars on small screens.
- Modal uses Svelte fade transition, which does not use the Bootstrap theme defaults for duration, etc.
- Most components are missing general DOM events, see #36
Bootstrap V5 compatibility
- Currently WIP, but have compatibility up to Bootstrap v5 beta 1 https://github.com/bestguy/sveltestrap/issues/156#issuecomment-727272111
- Floating labels are needed for beta 1 compatibility, currently WIP.
Install
npm install --save svelte sveltestrap
Usage
You need to include a link to Bootstrap 4 stylesheet in your page - these components do not include or embed any Bootstrap styles automatically.
Either in your HTML layout:
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
</head>
Or from your Svelte app, either:
<svelte:head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</svelte:head>
or:
<style>
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
</style>
Then use sveltestrap components in your svelte component:
<script>
import { Button, Col, Row } from 'sveltestrap';
</script>
<Row>
<Col>
<Button color="primary" outline>Hello World!</Button>
</Col>
</Row>
Note on server-side rendering (SSR) Usage
If you are using Sveltestrap in an SSR environment like Sapper, it's recommended you import the component source directly, for example:
<script>
import { Button, Col, Row } from 'sveltestrap/src';
</script>
<Row>
<Col>
<Button color="primary" outline>Hello World!</Button>
</Col>
</Row>
if you prefer the 'sveltestrap' import, you can move the package to devDependencies block in your package.json so that sapper will parse the es bundle
"devDependencies": {
"sveltestrap": "*.*.*",
...
},
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].