Vue Class Mixin
Vue Class Mixin - Bootstrap 4 & Material Design. Examples & tutorial.
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Vue Class Mixin significantly facilitates the addition of margins or padding to Vue components.
Basice examples
After adding MDB class mixin to any component there is an ability to use margin (m
) and padding
(p
) props short names. This mixin is added by default to the following components:
- Badge
- Button
- Card
- Col
- Container
- Row
Here are some examples:
Button with custom margins and paddings
<mdb-btn color="primary" m="4" p="2">m="4" p="2"</mdb-btn>
<mdb-btn color="primary" m="1" p="4">m="1" p="4"</mdb-btn>
<mdb-btn color="primary" m="2" p="1">m="2" p="1"</mdb-btn>
Advanced customization
<mdb-btn color="primary" m="y4">m="y4"</mdb-btn>
<mdb-btn color="primary" p="x4">p="x4"</mdb-btn>
<mdb-btn color="primary" p="t4 r2">p="t4 r2"</mdb-btn>
Class Mixin - API
In this section you will find advanced information about the MDB Class mixin. You will learn which modules are required in this mixin and what are the possibilities of configuring the mixin.
Import statement
<script>
import {
mdbClassMixin
} from 'mdbvue';
</script>
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
m |
String | '' |
Changes components margin. | <mdb-btn m="t2 b4" /> |
p |
String | '' |
Changes components padding. | <mdb-btn p="t2 b4" /> |
noMdbClass |
Boolean | false |
Turns off the mixin. | <mdb-btn noMdbClass /> |