Tabs that look like MD tabs

Topic: Tabs that look like MD tabs

mark goldin free 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

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

<p>HI <a href="/profile/?id=21821" target="_blank" rel="nofollow">@mark goldin</a>,</p>

<p>If you want to use tabs, please follow code below. </p>

<pre class="prettyprint"><code><mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-3'" [contentClass]="'card'">
  
  <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>
  
  <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>
  
  <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>
</code></pre>

Please insert min. 20 characters.

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 free 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 free 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 free 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.

Add comment

Write

Create snippet

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 Angular
MDB Version: 8.9.0
Device: PC
Browser: All
OS: All
Provided sample code: No
Provided link: No

mark goldin

135Support score
13Questions 8Answers 0Snippets