Topic: Different questions about components and usage
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
<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>
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?
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.
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
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>
Hi,
fixed-snis 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.https://vue.mdbootstrap.com/#/navigation/pro/double-navigation-v4 - if this is the effect you want to achieve, I'm pasting the code below.
Use the following syntax:
:logo="require('../assets/mdb-vue.png')"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.
Unfortunately, no. Although you could use mdbCarousel with touch events.
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-brandclass itself.You can either load SCSS into your project or just create an additional project to analyze them.
Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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