extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'tabs'
  - var parent = 'components'
  - var title = 'Tabs - Components - Spectre.css CSS Framework'
  - var description = 'Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('tabs', 'Tabs')
    include ../_layout/_ad-g.pug

    p Tabs enable quick switch between different views.
          
    .docs-demo.columns
      .column.col-6.col-sm-12
        ul.tab
          li.tab-item.active
            a(href="#tabs")
              | Music
          li.tab-item
            a(href="#tabs")
              | Playlists
          li.tab-item
            a(href="#tabs")
              | Radio
          li.tab-item
            a(href="#tabs")
              | Store
      .column.col-6.col-sm-12
        ul.tab.tab-block
          li.tab-item.active
            a(href="#tabs")
              | Music
          li.tab-item
            a(href="#tabs")
              | Playlists
          li.tab-item
            a(href="#tabs")
              | Radio

    p
      | Add a container element with the #[code tab] class. 
      | And add child elements with the #[code tab-item] class. 
      | You can add the #[code tab-block] class for a full-width tab.
      | The #[code tab-item] or its child #{'<a>'} with the #[code active] class will be highlighted.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <ul class="tab tab-block">
            <li class="tab-item active">
              <a href="#">Music</a>
            </li>
            <li class="tab-item">
              <a href="#" class="active">Playlists</a>
            </li>
            <li class="tab-item">
              <a href="#">Radio</a>
            </li>
            <li class="tab-item">
              <a href="#">Connect</a>
            </li>
          </ul>

    .docs-demo.columns
      .column.col-sm-12
        ul.tab
          li.tab-item.active
            a.badge(href="#tabs" data-badge="999")
              | Music
          li.tab-item
            a(href="#tabs")
              | Playlists
          li.tab-item
            a(href="#tabs")
              | Radio
      .column.col-sm-12
        ul.tab.tab-block
          li.tab-item.active
            a.badge(href="#tabs" data-badge="9")
              | Music
          li.tab-item
            a.badge(href="#tabs" data-badge="99")
              | Playlists
          li.tab-item
            a(href="#tabs")
              | Radio

    p
      | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item].

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <ul class="tab tab-block">
            <li class="tab-item active">
              <a href="#" class="badge" data-badge="9">
                Music
              </a>
            </li>
          </ul>

    .docs-demo.columns
      .column.col-12
        ul.tab
          li.tab-item.active
            a(href="#tabs")
              | Music
              span.btn.btn-clear
          li.tab-item
            a(href="#tabs")
              | Playlists
          li.tab-item
            a(href="#tabs")
              | Radio
          li.tab-item
            a(href="#tabs")
              | Store
          li.tab-item.tab-action
            .input-group.input-inline
              input.form-input.input-sm(type="text")
              button.btn.btn-primary.btn-sm.input-group-btn Search

    p
      | You could add a search box or buttons inside a tab.
      | Add the #[code tab-action] class to the #[code tab-item].

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <ul class="tab">
            <li class="tab-item active">
              <a href="#">
                Music
              </a>
            </li>
            <li class="tab-item tab-action">
              <div class="input-group input-inline">
                <input class="form-input input-sm" type="text">
                <button class="btn btn-primary btn-sm input-group-btn">Search</button>
              </div>
            </li>
          </ul>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug