Svelte Bootstrap with Material Design
Tags: svelte, showdev, webdev
Published: 2020-05-27 06:53:26

This project is based on the latest **Bootstrap 4** and **Svelte 3**. Absolutely **no jQuery**. It is inspired by [mdbreact](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design). 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:
```html
<!-- 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:
```html
<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
```html
<script>
  import {MDBBtn} from "mdbsvelte";
</script>
<MDBBtn>Default</MDBBtn>
```
For server-side side rendering (Sapper). you need to import from the component source directly.
```html
<script>
  import MDBBtn from "mdbsvelte/src/MDBBtn.svelte";
</script>
```
## Components Implemented
+ [Containers](https://saurav.tech/mdbsvelte/?path=/story/layout--containers)
+ [Grid](https://saurav.tech/mdbsvelte/?path=/story/layout--grid)
+ [Alert](https://saurav.tech/mdbsvelte/?path=/story/components--alerts)
+ [Button](https://saurav.tech/mdbsvelte/?path=/story/components--buttons)
+ [Button Group](https://saurav.tech/mdbsvelte/?path=/story/components--buttons-groups)
+ [Card](https://saurav.tech/mdbsvelte/?path=/story/components--cards)
+ [Dropdown](https://saurav.tech/mdbsvelte/?path=/story/components--dropdowns)
+ [Jumbotron](https://saurav.tech/mdbsvelte/?path=/story/components--jumbotron)
+ [List Groups](https://saurav.tech/mdbsvelte/?path=/story/components--list-groups)
+ [Badges](https://saurav.tech/mdbsvelte/?path=/story/components--badges)
+ [Spinner](https://saurav.tech/mdbsvelte/?path=/story/components--spinner)
+ [Pagination](https://saurav.tech/mdbsvelte/?path=/story/components--pagination)
+ [Progress](https://saurav.tech/mdbsvelte/?path=/story/components--progress)
+ [Navbar](https://saurav.tech/mdbsvelte/?path=/story/navigation--navbar)
+ [Footer](https://saurav.tech/mdbsvelte/?path=/story/navigation--footer)
+ [Navs](https://saurav.tech/mdbsvelte/?path=/story/navigation--navs)
+ [Breadcrumbs](https://saurav.tech/mdbsvelte/?path=/story/navigation--breadcrumb)
+ [Forms](https://saurav.tech/mdbsvelte/?path=/story/forms--basic-examples)
+ [Input Groups](https://saurav.tech/mdbsvelte/?path=/story/forms--input-groups)
+ [Tables](https://saurav.tech/mdbsvelte/?path=/story/tables--basic-examples)
+ [Data Tables](https://saurav.tech/mdbsvelte/?path=/story/tables--data-tables)
+ [Modals](https://saurav.tech/mdbsvelte/?path=/story/modals--basic-examples)
+ [Charts](https://saurav.tech/mdbsvelte/?path=/story/charts--installation)
+ [Masks](https://saurav.tech/mdbsvelte/?path=/story/css--masks)
+ [Icons](https://saurav.tech/mdbsvelte/?path=/story/content--icons-list)

![demo](https://dev-to-uploads.s3.amazonaws.com/i/d10lrh4fln9tw0cptzbv.gif)

Detailed documentation about all the components can be found in [saurav.tech/mdbsvelte](https://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](https://github.com/SauravKanchan/svelte-chartjs).

### Installation
```
npm i svelte-chartjs
```

### Usage
```html
<script>
  import Line from "svelte-chartjs/src/Line.svelte"
</script>
<Line data={...} options={...} />
```
`options` prop is optional. Expected data format is

```js
 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:
```html
<Bar
  data={data}
  width={100}
  height={50}
  options={{ maintainAspectRatio: false }}
/>
```


# Admin Dashboard

![Dashboard preview](https://dev-to-uploads.s3.amazonaws.com/i/4kwk2uepe4wtm1uawxw7.png)

I also made and Admin Dashboard using mdbsvelte. You can find live version [here](https://mdbsvelte.netlify.app/)

## Important Links:
+ [MDBSvelte Github Repo](https://github.com/SauravKanchan/mdbsvelte)
+ [MDBSvelte Documentaion](https://saurav.tech/mdbsvelte/)
+ [MDBSvelte Dashboard repo](https://github.com/SauravKanchan/mdbsvelte-dashboard)
+ [MDBSvelte Dashboard Live Demo](https://mdbsvelte.netlify.app/)
+ [svelte-chartjs Repo](https://github.com/SauravKanchan/svelte-chartjs)