Topic: Where do I find the "switch component"? (used on mbd's site, to switch between jquery, angular, react and vue)
I do not have a code, I just wanna use one feature of MDB's site, but did not find in any local of the documentation
Add comment
Hi there!
The part of our website that you're asking for is not an MDB's component so you won't find a documentation for this. It's our custom code that I wrote a long time ago when we've released the first version of MDB Angular and we wanted to simplify switching between MDB jQuery's and MDB Angular's documentation ;)
We rarely share our custom code with anyone (we're also rarely being asked for that), but because your question made my day, I'll share it with you.
The first thing you need is our SCSS code:
// Switch
.switch-version {
position: fixed;
top: 300px;
right: 0;
width: 40px;
background: #fff;
border-radius: 4px 0 0 4px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
a:first-child > .switch-to {
border-top-left-radius: 4px;
}
a:last-child > .switch-to {
border-bottom-left-radius: 4px;
}
}
.switch-to {
display: block;
width: 40px;
height: 40px;
background-image: url("https://mdbootstrap.com/img/logo/mdb-angular.png");
background-repeat: no-repeat;
&.active {
background-color: rgba(0, 0, 0, .15);
}
&.mdb-jquery {
background-position: 0 -40px;
}
&.mdb-angular {
background-position: 0 0;
}
&.mdb-vue {
background-position: 0 -80px;
}
&.mdb-react {
background-position: 0 -120px;
}
}<div class="switch-version d-none d-md-block">
<a href="/material-design-for-bootstrap"><span class="switch-to mdb-jquery active" id="jQuery"></span></a>
<a href="/angular"><span class="switch-to mdb-angular " id="Angular"></span></a>
<a href="/react"><span class="switch-to mdb-react " id="React"></span></a>
<a href="/vue"><span class="switch-to mdb-vue " id="Vue"></span></a>
</div>FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.8
- Device: Computer
- Browser: Google Chrome
- OS: Anyone
- Provided sample code: No
- Provided link: No
Related topics