Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Vue
Topic: Different questions about components and usage

iparker free asked 5 years ago

Hello,

I'm new to vue and MDB and I try to build my first app using vue and mdb. With this I have different problems with the right usage and structure of the components.

So here are my questions:

1.) What is the class "fixed-sn" for? Can you explain it to me? Is there a place in documentation where I can find the explanation of such classes?

2.) What is the right way to define a sidenav with white background and black/text text/content in it? I tried color="white" and dark, but in this case the text is also white.

3.) What is the right way to insert an image (from the assets) into the sidebar? The output of an normal image works with , but how can I insert this (local) image to the sidenav?

4.) What is the right way to change the primary color (for buttons and other elements like the top navbar) in mdb? Is the best way to create a custom skin based on a default skin for this?

5.) Do you have any swipe-effect that I can use, for example to swipe a card?

6.) How to change padding for navbar-brand-item? I tried to set the class for the mdb-navbar-brand, but this class is set to the "outer" div and not to the navbar-brand div.

7.) Is it possible that you send me the vue-files/structure of an demo like https://mdbootstrap.com/previews/docs/latest/html/skins/cyan-skin.html or is there a way to find/get these files/sources? I want to see the structure in the vue-files and not just the rendered output.

Thanks for some help with this!

Best regards,

Timo

Magdalena Dembna staff answered 5 years ago 

<template>
  <div class="flexible-content cyan-skin">
    <mdb-navbar
      position="top"
      dark
      class="darken-2"
      :toggler="false">
      <mdb-navbar-nav left class="side-toggler">
        <mdb-icon icon="bars" size="2x" @click.native="toggle=!toggle" />
      </mdb-navbar-nav>
      <mdb-navbar-nav class="nav-flex-icons" right>
        <mdb-nav-item
          to="/navigation/pro/double-navigation-v1"
          waves-fixed
          icon="code-branch"
        >Version 1</mdb-nav-item>
        <mdb-nav-item to="/navigation/pro/double-navigation-v2" waves-fixed icon="eye">Version 2</mdb-nav-item>
        <mdb-nav-item
          to="/navigation/pro/double-navigation-v3"
          waves-fixed
          icon="file-code"
          far
        >Version 3</mdb-nav-item>
        <mdb-nav-item
          to="/navigation/pro/double-navigation-v4"
          waves-fixed
          icon="terminal"
        >Version 4</mdb-nav-item>
        <mdb-nav-item
          to="/navigation/pro/double-navigation-v5"
          waves-fixed
          icon="smile"
          far
        >Version 5</mdb-nav-item>
        <mdb-nav-item
          to="/navigation/pro/double-navigation-v6"
          waves-fixed
          icon="user"
          far
        >Version 6</mdb-nav-item>
      </mdb-navbar-nav>
    </mdb-navbar>
      <mdb-side-nav
        logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
        sideNavClass="sn-bg-4"
        mask="dark"
        :OpenedFromOutside.sync="toggle"
        :breakWidth="900"
      >
        <ul>
          <li>
            <ul class="social">
              <li>
                <a href="#" class="icons-sm fb-ic">
                  <mdb-icon color="white" fab icon="facebook-f" />
                </a>
              </li>
              <li>
                <a href="#" class="icons-sm pin-ic">
                  <mdb-icon color="white" fab icon="pinterest-p" />
                </a>
              </li>
              <li>
                <a href="#" class="icons-sm gplus-ic">
                  <mdb-icon color="white" fab icon="google-plus-g" />
                </a>
              </li>
              <li>
                <a href="#" class="icons-sm tw-ic">
                  <mdb-icon color="white" fab icon="twitter" />
                </a>
              </li>
            </ul>
          </li>
          <li>
            <form class="search-form" role="search">
              <div class="form-group md-form mt-0 pt-1 ripple-parent" @click="wave">
                <mdb-input type="text" placeholder="Search" />
              </div>
            </form>
          </li>
          <li>
            <mdb-side-nav-nav>
              <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
                <mdb-side-nav-item href="#">Submit listing</mdb-side-nav-item>
                <mdb-side-nav-item href="#">Registration form</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-cat name="Instruction" far icon="hand-pointer">
                <mdb-side-nav-item href="#">For bloggers</mdb-side-nav-item>
                <mdb-side-nav-item href="#">For authors</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-cat name="About" icon="eye">
                <mdb-side-nav-item href="#">Introduction</mdb-side-nav-item>
                <mdb-side-nav-item href="#">Monthly meetings</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-cat name="Contact me" far icon="envelope">
                <mdb-side-nav-item href="#">FAQ</mdb-side-nav-item>
                <mdb-side-nav-item href="#">Write a message</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-item header icon="envelope" href="#">Write a message</mdb-side-nav-item>
              <mdb-side-nav-item header icon="user" href="#">Profile</mdb-side-nav-item>
              <mdb-side-nav-item
                header
                icon="cubes"
                href="https://mdbootstrap.com/docs/vue/?utm_source=DemoApp&utm_medium=MDBVuePro"
                target="_blank"
              >Official docs</mdb-side-nav-item>
            </mdb-side-nav-nav>
          </li>
        </ul>
      </mdb-side-nav>
    <div style="height: 100vh; margin-bottom: -25px">
      <div class="view intro-2">
        <div class="full-bg-img">
          <div class="mask rgba-black-strong flex-center">
            <div class="container">
              <div class="white-text text-center">
                <h2 class="font-weight-bold">Double navigation with fixed sidenav & fixed navbar</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mdbNavbar,
  mdbNavItem,
  mdbNavbarNav,
  mdbInput,
  mdbSideNav,
  mdbSideNavNav,
  mdbSideNavCat,
  mdbSideNavItem,
  mdbIcon,
  waves
} from "mdbvue";

export default {
  name: "DoubleNavigationPagev1",
  components: {
    mdbNavbar,
    mdbNavItem,
    mdbNavbarNav,
    mdbInput,
    mdbSideNav,
    mdbSideNavNav,
    mdbSideNavCat,
    mdbSideNavItem,
    mdbIcon
  },
  data() {
    return {
      toggle: false
    };
  },
  mixins: [waves]
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.view {
  background: url("https://mdbootstrap.com/img/Photos/Others/img (44).jpg")
    no-repeat center center;
  background-size: cover;
  height: 100%;
}
.navbar i {
  cursor: pointer;
  color: white;
}
.flexible-content,
.flexible-content .navbar {
  transition: margin-left 0.5s;
}
@media (min-width: 900px) {
  .flexible-content {
    margin-left: 240px;
  }
  .flexible-content .navbar {
    margin-left: 240px;
    padding-left: 20px;
  }
  .side-toggler {
    display: none;
  }
}
</style>

Magdalena Dembna staff answered 5 years ago

  1. It's not necessary - it depends on whether it meets your requirements or not - is your navbar, f.e. fixed or can you toggle it?

  2. That's just preview of the styling - the entire layout wasn't written in Vue. As for skeletons for double navigation you can take one from our demo app: https://vue.mdbootstrap.com/#/navigation/pro/double-navigation-v6 (folder demo in the zip file) and apply the selected skin.

iparker free answered 5 years ago

Hello Magdalena,

thanks for your reply. I have some additional questions for my points.

For 1.) It seems that the body needs the fixed-sn class when using a sidenav because this class affects a lot of other elements like main etc. So it's recommended to use it?

For 7.) Sorry - I think you don't understand my question. Is there a way to get the vue-files for some demo or example pages (like https://mdbootstrap.com/previews/docs/latest/html/skins/cyan-skin.html)? I'm looking for kind of skeleton for an page/app.

Thanks for your help!

Best regards,

Timo

Magdalena Dembna staff answered 5 years ago

SideNav code:

<div class="white-skin">
      <mdb-side-nav
        logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
        sideNavClass="sn-bg-4"
        mask="dark"
        :OpenedFromOutside.sync="toggle"
        :breakWidth="900"
        sideNavStyle="top: 50px; padding-top: 10px;"
      >
        <ul>
          <li>
            <ul class="social">
              <li>
                <a href="#" class="icons-sm fb-ic">
                  <mdb-icon fab icon="facebook-f" />
                </a>
              </li>
              <li>
                <a href="#" class="icons-sm pin-ic">
                  <mdb-icon fab icon="pinterest-p" />
                </a>
              </li>
              <li>
                <a href="#" class="icons-sm gplus-ic">
                  <mdb-icon fab icon="google-plus-g" />
                </a>
              </li>
              <li>
                <a href="#" class="icons-sm tw-ic">
                  <mdb-icon fab icon="twitter" />
                </a>
              </li>
            </ul>
          </li>
          <li>
            <form class="search-form" role="search">
              <div class="form-group md-form mt-0 pt-1 ripple-parent" @click="wave">
                <mdb-input type="text" placeholder="Search" />
              </div>
            </form>
          </li>
          <li>
            <mdb-side-nav-nav>
              <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
                <mdb-side-nav-item href="#">Submit listing</mdb-side-nav-item>
                <mdb-side-nav-item href="#">Registration form</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-cat name="Instruction" far icon="hand-pointer">
                <mdb-side-nav-item href="#">For bloggers</mdb-side-nav-item>
                <mdb-side-nav-item href="#">For authors</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-cat name="About" icon="eye">
                <mdb-side-nav-item href="#">Introduction</mdb-side-nav-item>
                <mdb-side-nav-item href="#">Monthly meetings</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-cat name="Contact me" far icon="envelope">
                <mdb-side-nav-item href="#">FAQ</mdb-side-nav-item>
                <mdb-side-nav-item href="#">Write a message</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-item header icon="envelope" href="#">Write a message</mdb-side-nav-item>
              <mdb-side-nav-item header icon="user" href="#">Profile</mdb-side-nav-item>
              <mdb-side-nav-item
                header
                icon="cubes"
                href="https://mdbootstrap.com/docs/vue/?utm_source=DemoApp&utm_medium=MDBVuePro"
                target="_blank"
              >Official docs</mdb-side-nav-item>
            </mdb-side-nav-nav>
          </li>
        </ul>
      </mdb-side-nav>
    </div>

Magdalena Dembna staff answered 5 years ago

Hi,

  1. fixed-sn is a shortcut for fixed sidenav - adds an additional
    padding and margins. It's a class used by our team to create layouts, I don't think it was included in the documentation.

  2. https://vue.mdbootstrap.com/#/navigation/pro/double-navigation-v4 - if this is the effect you want to achieve, I'm pasting the code below.

  3. Use the following syntax:

    :logo="require('../assets/mdb-vue.png')"

  4. Generally, the best way to modify the skin/colours in your app would be to choose an installation option with scss loaded into your app (https://mdbootstrap.com/docs/vue/getting-started/quick-start/#scss) and changing the variables. You can preview and change skins there as well.

  5. Unfortunately, no. Although you could use mdbCarousel with touch events.

  6. If you wish to increase margin padding, you can just add to the component: class="p-3". The other way around it trickier, you would need to manipulate .navbar-brand class itself.

  7. You can either load SCSS into your project or just create an additional project to analyze them.

Kind regards, Magdalena

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.2.0
  • Device: xxx
  • Browser: xxx
  • OS: xxx
  • Provided sample code: No
  • Provided link: Yes
Tags
vue-components styling beginner
About author
iparker
90Support score
10Questions 4Answers 0Snippets