Have ideas to improve npm?Join in the discussion! »

    sveltestrap
    TypeScript icon, indicating that this package has built-in type declarations

    3.14.1 • Public • Published

    sveltestrap

    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.

    Demo page

    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

    (You need to install sveltestrap@5.0.0-beta.3 version explicitly to use this beta release. Also you need to use Bootstrap v5 CSS.)


    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": "*.*.*",
        ...
      },

    Keywords

    Install

    npm i sveltestrap

    DownloadsWeekly Downloads

    9,864

    Version

    3.14.1

    License

    none

    Unpacked Size

    1.14 MB

    Total Files

    205

    Last publish

    Collaborators

    • avatar