Svelte Bootstrap with Material Design

Saurav Kanchan — Wed, 27 May 2020 06:53:26 +0000

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

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

Forem: Saurav Kanchan

Svelte Bootstrap with Material Design

Installation

Step 1: Install the package

Step 2: Add CSS

Usage

Components Implemented

Charts

Installation

Usage

Cutom Size

Admin Dashboard

Important Links: