mdbootstrap / 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

mdbsvelte's Issues

[Guide] How to use .wow (onScroll) animations

CSS transitions work out of the box but I wanted to animate some icons when they appear on screen so I used the following code

<script>
  import MDBIcon from "mdbsvelte/src/MDBIcon.svelte";
  import { onMount } from 'svelte'

  let bodyHeight = 0
  let hasScrolled = false
  let waitingOnAnimRequest = false

  onMount(() => {
    bodyHeight = window.innerHeight
		|| document.documentElement.clientHeight
		|| document.body.clientHeight;
  })

  const animChecker = target => {
    target.querySelectorAll('[data-wow]').forEach(element => {
	  const elementTop = element.getBoundingClientRect().top
	  console.log(elementTop);
	  console.log(bodyHeight);
      if (elementTop < bodyHeight * 0.8) {
        if (!element.classList.contains('animated')) {
          element.classList.add('animated',element.dataset.wow)
        }
      }
    })
  }

  const onScroll = ({ target }) => {
    if (!waitingOnAnimRequest) {
      window.requestAnimationFrame(() => {
        animChecker(target)
        waitingOnAnimRequest = false
      })
      waitingOnAnimRequest = true
    }

    hasScrolled = document.body.scrollTop !== 0
  }
 
</script>

<style>
:global([data-wow]) {
  visibility: hidden;
}
:global(.animated) {
  visibility: visible!important;
}
</style>

<svelte:window on:scroll="{onScroll}" />

<MDBIcon fab icon="opencart" size="4x" data-wow="bounceInLeft" />

You can use any of the available CSS transitions as a data-wow attribute.

Tip: You can convert this into a a svelte component and import it wherever or maybe the [Author] @SauravKanchan wants to integrate into the package.

Explain differences from Sveltestrap and Bootstrap4

Very interested in this project not having jquery. I assume this is the primary difference from Sveltestrap is the lack of jquery?

Is there anything missing from mbdsvelte due to the lack of jquery or other reasons?

https://github.com/bestguy/sveltestrap

bind:value problem with input components

<script>
import {MDBBtn, MDBContainer} from "mdbsvelte";
import {MDBRow, MDBCol, MDBInput,} from 'mdbsvelte';
let email = "dd";
let password = "dd";

</script>
  <link rel="stylesheet" href="/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/css/mdb.min.css" />

<div class="container-fluid main">
  <header>
    <h1 class="text-center pt-4 mb-5 text-white">Admin</h1>
  </header>
  <div class="row">
      <div class="col-lg-3 col-md-8 col-sm-12 login-form">
        <h3 class="text-center" style="color: #933c78">SIGN IN</h3>
        <MDBInput label="Email" bind:value={email} type="email" id="email" />
        <MDBInput label="Password" bind:value={password} type="password" id="password"/>
        <p class="messages"></p>
        <p style="color: #2666a7; cursor:pointer">Forgotten password?</p>
        <MDBBtn>Sign in</MDBBtn>
        {email} {password}
      </div>
  </div>
</div>

<style lang="scss">

</style>

Tab Content not Changing

I have the following

<script>
    import { MDBNav, MDBNavItem, MDBNavLink } from "mdbsvelte";
</script>

<MDBNav role="tablist" class="nav-pills nav-pills-icons">
  <MDBNavItem>
      <MDBNavLink active show href="#agencies" role="tab" data-toggle="tab" aria-selected="true">
          <i class="material-icons">calendar_today</i>
          Agencies
      </MDBNavLink>
  </MDBNavItem>

  <MDBNavItem>
      <MDBNavLink href="#productions" role="tab" data-toggle="tab">
          <i class="material-icons">movie_creation</i>
          Productions
      </MDBNavLink>
  </MDBNavItem>
  
  <MDBNavItem>
      <MDBNavLink href="#background-artists" role="tab" data-toggle="tab">
          <i class="material-icons">monetization_on</i>
          Background Artists
      </MDBNavLink>
  </MDBNavItem>
</MDBNav>
                        
<div class="tab-content tab-space">
    <div class="tab-pane active show" id="agencies">
        <ol>
            <li>Sign up for an Agency account and import your Background Artists using our simple uploader.</li>
            <li>Query your new database of Background Artists with our easy to use Production Planner.</li>
            <li>Share this list directly with the Production team for them to review.</li>
            <li>Send a booking directly to the Background Artist with all the suitable details.</li>
            <li>Once filming wraps, process their payments using our eChit system within the app.</li>
        </ol>
    </div>

    <div class="tab-pane" id="productions">
        <ol>
            <li>Sign up for a Production account and send your requirements to your chosen agencies (you can change these requirements at any time and resend instantly).</li>
            <li>Receive a list of potential Background Artists from your chosen agencies, select which Artists you would like to book.</li>
            <li>Receive a confirmation once all Background Artists have been booked.</li>
            <li>Once your production wraps and you have everything you need from your Background Artists, approve their eChit using our app.</li>
            <li>Pay your agency using the Castily platform via a variety of sources.</li>
        </ol>
    </div>
    
    <div class="tab-pane" id="background-artists">
        <ol>
            <li>Sign up for a Background Artist account and upload your details, headshots, credit and film-reel.</li>
            <li>Confirm your availability for potential bookings, or put yourself forward for any open requests.</li>
            <li>Once you receive a booking request from an agency, confirm your attendance within the app.</li>
            <li>Get yourself on set following the instructions in your booking confirmation.</li>
            <li>At the end of filming, present your eChit for approval and wait for the money to hit your bank account a few days later!</li>
        </ol>
    </div>
    
</div>

Yet when I click on one of the tabs, the URL gets the #production (for example) anchor and the page reloads, it doesn't switch between my tab content..

Is this a bug in Nav Tabs with pills, or have I done something wrong?

MDBForm an on:submit

I just quite figure out how you are supposed to capture the submit. I looked through utils.js at the relevant forwarding events stuff but I'm at a loss on how you are using it. I was hoping to see something in the storybook/examples/dashboard but no such luck.

Using MDBFormInline, how do I capture the submit event?

Bootstrap 5?

Anyone working on upgrading this to Bootstrap 5?

Hiding MDB form elements with if/else blocks throws an error

Issue
Try to hide some form elements like MDBInput or MDBBtn with Svelte if/else condition and this error appears in the developer console :
Uncaught (in promise) in mdbsvelte.es.js

Reproduce
In App.svelte :

<script>
	import { MDBBtn }from "mdbsvelte"
	let action = "show";
</script>

{#if action === "show"}
	<MDBBtn on:click="{() => action = 'hide'}">Hide this button</MDBBtn>
{/if}

Then npm run dev and check the developer console when clicking the button
Tested in firefox 86 and Google Chrome 88

Modal outros error

While trying to close modal:

index.mjs:754 Uncaught (in promise) TypeError: Cannot read property 'c' of undefined
    at transition_out (index.mjs:754)
    at Object.outro [as o] (design.svelte:46)
    at ft (mdbsvelte.es.js:759)
    at Object.o (mdbsvelte.es.js:611)
    at ft (mdbsvelte.es.js:759)
    at Object.p (mdbsvelte.es.js:611)
    at ot (mdbsvelte.es.js:707)
    at st (mdbsvelte.es.js:676)

Can you help?

MDBNavbarToggler click event doesn't fire...

Perhaps a misunderstanding on my part as to how it should work but it would appear that the click event for the MDBNavbarToggler doesn't fire.

The example on the documentation page shows the same (lack of) behavior:

https://saurav.tech/mdbsvelte/?path=/story/navigation--navbar