extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'tabs'
  - var parent = 'components'
  - var title = 'Tabs - Components - Spectre.css CSS Framework'
  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

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