Where do I find the switch component? (used on mbd's site, t


Topic: Where do I find the "switch component"? (used on mbd's site, to switch between jquery, angular, react and vue)

newtongamajr pro asked 6 years ago

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

Bartłomiej Malanowski staff pro premium answered 6 years ago

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;
  }
}
You'll also need some HTML code:
<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>

Please insert min. 20 characters.

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