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
Top comments (0)