Tabs that look like MD tabs

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Tabs that look like MD tabs

mark goldin asked 5 years ago

I am trying the following code:

<div class="classic-tabs mx-2">
<ul class="nav tabs-cyan" id="myClassicTabShadow" role="tablist">
    <li class="nav-item">
        <a class="nav-link  waves-light active show" id="profile-tab-classic-shadow" data-toggle="tab" href="#"
            routerLinkActive="active" routerLink="syspref" role="tab" aria-controls="profile-classic-shadow" aria-selected="true">
            Default Preferences
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link waves-light" id="follow-tab-classic-shadow" data-toggle="tab" href="#"
            routerLinkActive="active" routerLink="userpref" role="tab" aria-controls="follow-classic-shadow" aria-selected="false">
            User Preferences
    </a>
    </li>
</ul>

Expecting to see MD tabs. But all I see is this: enter image description here

Am I missing some styles?

Thanks

Konrad Stępień staff answered 5 years ago

HI @mark goldin,

If you want to use tabs, please follow code below. 

<mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-3'" [contentClass]="'card'">
  <!--Panel 1-->
  <mdb-tab heading="Profile">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
          reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
          porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 2-->
  <mdb-tab heading="Follow">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
          reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
          porro voluptate odit minima.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
          reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
          porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 3-->
  <mdb-tab heading="Contact">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
          reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
          porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
</mdb-tabset>

mark goldin commented 5 years ago

That is all I see: enter image description here

Will these tabs look like MD tabs? Do you have an example of MD tabs somewhere?

Thanks

Arkadiusz Idzikowski staff commented 5 years ago

@mark goldin
Do you want to use tabs in Angular or jQuery project? Do you have access to the MDB Angular Pro components?

mdb-tabset is a pro component and according to our system, you use free version. If you are a Pro user, please provide us a number of your order or registered email to confirm your access to MDB Pro components and premium support. You can send it to a.idzikowski@mdbootstrap.com

mark goldin commented 5 years ago

No, I dont have a Pro version, although my current product (MDB) discovery will most likely lead to it. I am using Angular.

mark goldin commented 5 years ago

So, what is it wrong with the code you have provided?

Konrad Stępień staff commented 5 years ago

It didn't work without mdbootstrap pro package.
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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.9.0
  • Device: PC
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No
About author
mark goldin
135Support score
13Questions 8Answers
0Snippets likes 0Snippets