Svelte Bootstrap with Material Design

This project is based on the latest Bootstrap 4 and Svelte 3. Absolutely no jQuery. It is inspired by mdbreact. This blog post will be about how to install it and use it.

Installation

Step 1: Install the package

npm i mdbsvelte

Step 2: Add CSS

This package does not contain any CSS you need to add in your project manually

Add in your HTML layout:

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.16.0/css/mdb.min.css" rel="stylesheet">

or add it your svelte app:

<svelte:head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.16.0/css/mdb.min.css" rel="stylesheet">
</svelte:head>

Usage

<script>
  import {MDBBtn} from "mdbsvelte";
</script>
<MDBBtn>Default</MDBBtn>

For server-side side rendering (Sapper). you need to import from the component source directly.

<script>
  import MDBBtn from "mdbsvelte/src/MDBBtn.svelte";
</script>

Components Implemented

• Containers
• Grid
• Alert
• Button
• Button Group
• Card
• Dropdown
• Jumbotron
• List Groups
• Badges
• Spinner
• Pagination
• Progress
• Navbar
• Footer
• Navs
• Breadcrumbs
• Forms
• Input Groups
• Tables
• Data Tables
• Modals
• Charts
• Masks
• Icons

Detailed documentation about all the components can be found in saurav.tech/mdbsvelte

Charts

mdbreact includes chart.js by default, but mdbsvelte has kept chart.js package as optional. I made a svelte wrapper for chart.js.

Installation

npm i svelte-chartjs

Usage

<script>
  import Line from "svelte-chartjs/src/Line.svelte"
</script>
<Line data={...} options={...} />

options prop is optional. Expected data format is

 let data = {
    labels: [],
    datasets: [
      {values: []}
    ],
    yMarkers: {},
    yRegions: [],
  };

Cutom Size

In order for Chart.js to obey the custom size you need to set maintainAspectRatio to false, example:

<Bar
  data={data}
  width={100}
  height={50}
  options={{ maintainAspectRatio: false }}
/>

Admin Dashboard

I also made and Admin Dashboard using mdbsvelte. You can find live version here

Important Links:

• MDBSvelte Github Repo
• MDBSvelte Documentaion
• MDBSvelte Dashboard repo
• MDBSvelte Dashboard Live Demo
• svelte-chartjs Repo