isabella232 / mdbsvelte

Svelte Bootstrap with Material Design

Svelte Bootstrap with Material Design

Based on the latest Bootstrap 4 and Svelte 3. Absolutely no jQuery.

Read full documentaion at saurav.tech/mdbsvelte

Getting started

Step 1: Install the package

npm i mdbsvelte

Step 2: Add CSS

This package does not contains 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 you can 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>

Step 3: Import in your svelte component

<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

• 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
• Admin Dashboard

License