Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

sveltestrap

3.4.0 • Public • Published

Logo

Bootstrap 4 components for Svelte v3

Work in progress, check back soon - PRs are welcome!

The philosophy of this library is to provide all Bootstrap 4 components for a Svelte app, without needing to 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.

The component names and interface are inspired by the reactstrap library for React.

Demo page

Status

  • See component list below
    • Tooltip & Popover are not implemented yet due to lacking Popper/Tether support #31, #32
    • Carousel not implemented yet, need to port transitions/state/key handlers. #30
  • Some stateful components have issues
    • Collapse uses the Svelte slide transistion. 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

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.3.1/css/bootstrap.min.css">
</head>

Or add from your Svelte app:

<svelte:head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</svelte:head>

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 from 'sveltestrap/src/Button.svelte';
  import Col from 'sveltestrap/src/Col.svelte';
  import Row from 'sveltestrap/src/Row.svelte';
</script> 
 
<Row>
  <Col>
    <Button color="primary" outline>Hello World!</Button>
  </Col>
<Row>

Component status

Sveltestrap is currently missing support for the following components:

  • Popover
    • PopoverContent
    • PopoverTitle
  • Tooltip

Please follow (or help out with) these issues for status:

Missing Tooltip (#31) Missing Popover (#32)

Keywords

Install

npm i sveltestrap

DownloadsWeekly Downloads

2,596

Version

3.4.0

License

none

Unpacked Size

905 kB

Total Files

119

Last publish

Collaborators

  • avatar