Tabs

The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.

Basic

Test 1
Test 2
Disabled
Test 4

Test 1

Test 2

Test 3

Test 4

<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s3"><a href="#test1">Test 1</a></li>
      <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
      <li class="tab col s3"><a href="#test3">Test 3</a></li>
      <li class="tab col s3"><a href="#test4">Test 4</a></li>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
  <div id="test3" class="col s12">Test 3</div>
  <div id="test4" class="col s12">Test 4</div>
</div>

Preselecting a tab

By default, the first tab is selected. But if this is not what you want, you can preselect a tab by either passing in the hash in the url ex:#test2. Or you can add the class active to the a tag.

<li class="tab col s2"><a class="active" href="#test3">Test 3</a></li>

Online

Felecia Castro

Lorem status

Max Brooks

Lorem status

Patsy Griffin

Lorem status

Chloe Morgan

Lorem status

Vernon Garrett

Lorem status

Greg Mcdonalid

Lorem status

Christian Jackson

Lorem status

Offline

Willie Kelly

Lorem status

Jenny Phillips

Lorem status

Darren Cunningham

Lorem status

Sandra Cole

Lorem status

Monday, Feb 23, 8:23 pm

Hi, Felicia.
How are you?

Hi! I am good!

Glad to see you :)
This long text is intended to show how the chat will display it.

Also, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis

Friday, Mar 10, 5:07 pm

Hi again!

Hi! Glad to see you.

I want to add you in my Facebook.

Can you give me your page?

I do not use Facebook. But you can follow me in Twitter.

It's good idea!

You can find me here - https://twitter.com/nkdevv

Tabs

Basic

Preselecting a tab

Users

Articles

Posts