<commit_before><% content_for :title, "Tabs" %>

<div class="spacing">

  <section class="spacing-tight">

    <p>Example tabset:</p>

    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "tab" } do -%>
<div class="tabs">
  <nav class="tabs--links">
    <ul>
      <li><a href="#tab1_1" class="tabs--link" data-tab="tab1_1">Tab #1</a></li>
      <li><a href="#tab1_2" class="tabs--link" data-tab="tab1_2">Tab #2</a></li>
      <li><a href="#tab1_3" class="tabs--link" data-tab="tab1_3">Tab #3</a></li>
    </ul>
  </nav>
  <div class="tabs--panes">
    <div class="tabs--pane" data-tab-for="tab1_1">
      Tab #1
    </div>
    <div class="tabs--pane" data-tab-for="tab1_2">
      Tab #2
    </div>
    <div class="tabs--pane" data-tab-for="tab1_3">
      Tab #3
    </div>
  </div>
</div>
    <%- end -%>

    <hr />

    <h2 class="heading-two">Passive Deeplinking</h2>

    <p>Passive deeplinking allows you to employ a tabset and deeplink to a particular pane. Interacting with the tabs will not update the URL.</p>

    <p>You can passively deeplink to a tab by passing in the <code>data-tab</code> attribute as a hash in the URL. <code>&lt;a href="/my-page#tab-2"></code> will link to tab-2 on /my-page.</p>

    <p>You can also open a tab with a link outside of the tabset, as long as it has a matching tab id inside a <code>data-tab-link</code> attribute. eg. <a href="#tab1_3" data-tab-link="tab1_3">This link</a> will open up tab three. The link has a data attribute of <code>data-tab-link="tab1_3"</code>, which is the <code>data-tab</code> id of the third tab. It's worth also adding the tab id to the <code>href</code> so that if the user opens the link in a new window, it will still deeplink to the tab. Here is how to properly write a link that opens up a tab outside of the tab container:</p>

    <pre class="sg-pre prettyprint">...
&lt;li>&lt;a href="#tab1_1" class="tabs--link" data-tab="tab1_1">Tab #1&lt;a>&lt;/li>
&lt;li>&lt;a href="#tab1_2" class="tabs--link" data-tab="tab1_2">Tab #2&lt;a>&lt;/li>
&lt;li>&lt;a href="#tab1_3" class="tabs--link" <strong>data-tab="tab1_3"</strong>>Tab #3&lt;a>&lt;/li>
...
&lt;a <strong>href="#tab1_3" data-tab-link="tab1_3"</strong>>This link lives outside of a tabset, but will open a tab.&lt;/a></pre>

    <hr />

    <h2 class="heading-two">Active Deeplinking</h2>

    <p>You can turn on active deeplinking by adding <code>data-tabs-deeplink</code> to the main tabs container. Active deeplinking will update the URL as the user clicks on the tabs. </p>

    <p>Notice that clicking on these tabs will update your URL. </p>

    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "tab-deeplink" } do -%>
<div class="tabs" data-tabs-deeplink>
  <nav class="tabs--links">
    <ul>
      <li><a href="#tab2_1" class="tabs--link" data-tab="tab2_1">Tab #1</a></li>
      <li><a href="#tab2_2" class="tabs--link" data-tab="tab2_2">Tab #2</a></li>
      <li><a href="#tab2_1" class="tabs--link" data-tab="tab2_3">Tab #3</a></li>
    </ul>
  </nav>
  <div class="tabs--panes">
    <div class="tabs--pane" data-tab-for="tab2_1">
      Tab #1
    </div>
    <div class="tabs--pane" data-tab-for="tab2_2">
      Tab #2
    </div>
    <div class="tabs--pane" data-tab-for="tab2_3">
      Tab #3
    </div>
  </div>
</div>
    <%- end -%>

    <hr />

    <h2 class="heading-two">Select menu fallback on smaller screens</h2>

    <p>To make your tabs fall back to a <code>select</code> menu, simple add <code>data-tabs-fallback-select</code> attribute. to your tabs container.</p>

    <p>The select menu will appear when the tabs are too long to fit on the screen.</p>

    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "tab-select" } do -%>
<div class="tabs" data-tabs-fallback-select>
  <nav class="tabs--links">
    <ul>
      <%- (1..7).each do |i| -%>
        <li><a href="#tab_select_<%= i -%>" class="tabs--link" data-tab="tab_select_<%= i -%>">Tab #<%= i -%></a></li>
      <%- end -%>
    </ul>
  </nav>
  <div class="tabs--panes">
    <%- (1..7).each do |i| -%><commit_msg>Removed hrefs from tab examples to avoid confusion<commit_after><% content_for :title, "Tabs" %>

<div class="spacing">

  <section class="spacing-tight">

    <p>Example tabset:</p>

    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "tab" } do -%>
<div class="tabs">
  <nav class="tabs--links">
    <ul>
      <li><a href="#" class="tabs--link" data-tab="tab1_1">Tab #1</a></li>
      <li><a href="#" class="tabs--link" data-tab="tab1_2">Tab #2</a></li>
      <li><a href="#" class="tabs--link" data-tab="tab1_3">Tab #3</a></li>
    </ul>
  </nav>
  <div class="tabs--panes">
    <div class="tabs--pane" data-tab-for="tab1_1">
      Tab #1
    </div>
    <div class="tabs--pane" data-tab-for="tab1_2">
      Tab #2
    </div>
    <div class="tabs--pane" data-tab-for="tab1_3">
      Tab #3
    </div>
  </div>
</div>
    <%- end -%>

    <hr />

    <h2 class="heading-two">Passive Deeplinking</h2>

    <p>Passive deeplinking allows you to employ a tabset and deeplink to a particular pane. Interacting with the tabs will not update the URL.</p>

    <p>You can passively deeplink to a tab by passing in the <code>data-tab</code> attribute as a hash in the URL. <code>&lt;a href="/my-page#tab-2"></code> will link to tab-2 on /my-page.</p>

    <p>You can also open a tab with a link outside of the tabset, as long as it has a matching tab id inside a <code>data-tab-link</code> attribute. eg. <a href="#tab1_3" data-tab-link="tab1_3">This link</a> will open up tab three. The link has a data attribute of <code>data-tab-link="tab1_3"</code>, which is the <code>data-tab</code> id of the third tab. It's worth also adding the tab id to the <code>href</code> so that if the user opens the link in a new window, it will still deeplink to the tab. Here is how to properly write a link that opens up a tab outside of the tab container:</p>

    <pre class="sg-pre prettyprint">...
&lt;li>&lt;a href="#" class="tabs--link" data-tab="tab1_1">Tab #1&lt;a>&lt;/li>
&lt;li>&lt;a href="#" class="tabs--link" data-tab="tab1_2">Tab #2&lt;a>&lt;/li>
&lt;li>&lt;a href="#" class="tabs--link" <strong>data-tab="tab1_3"</strong>>Tab #3&lt;a>&lt;/li>
...
&lt;a <strong>href="#tab1_3" data-tab-link="tab1_3"</strong>>This link lives outside of a tabset, but will open a tab.&lt;/a></pre>

    <hr />

    <h2 class="heading-two">Active Deeplinking</h2>

    <p>You can turn on active deeplinking by adding <code>data-tabs-deeplink</code> to the main tabs container. Active deeplinking will update the URL as the user clicks on the tabs. </p>

    <p>Notice that clicking on these tabs will update your URL. </p>

    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "tab-deeplink" } do -%>
<div class="tabs" data-tabs-deeplink>
  <nav class="tabs--links">
    <ul>
      <li><a href="#" class="tabs--link" data-tab="tab2_1">Tab #1</a></li>
      <li><a href="#" class="tabs--link" data-tab="tab2_2">Tab #2</a></li>
      <li><a href="#" class="tabs--link" data-tab="tab2_3">Tab #3</a></li>
    </ul>
  </nav>
  <div class="tabs--panes">
    <div class="tabs--pane" data-tab-for="tab2_1">
      Tab #1
    </div>
    <div class="tabs--pane" data-tab-for="tab2_2">
      Tab #2
    </div>
    <div class="tabs--pane" data-tab-for="tab2_3">
      Tab #3
    </div>
  </div>
</div>
    <%- end -%>

    <hr />

    <h2 class="heading-two">Select menu fallback on smaller screens</h2>

    <p>To make your tabs fall back to a <code>select</code> menu, simple add <code>data-tabs-fallback-select</code> attribute. to your tabs container.</p>

    <p>The select menu will appear when the tabs are too long to fit on the screen.</p>

    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "tab-select" } do -%>
<div class="tabs" data-tabs-fallback-select>
  <nav class="tabs--links">
    <ul>
      <%- (1..7).each do |i| -%>
        <li><a href="#" class="tabs--link" data-tab="tab_select_<%= i -%>">Tab #<%= i -%></a></li>
      <%- end -%>
    </ul>
  </nav>
  <div class="tabs--panes">
    <%- (1..7).each do |i| -%>
{'fraction_non_alphanumeric': 0.1978746793697325, 'fraction_numerical': 0.018566019298888483, 'mean_word_length': 3.289156626506024, 'pattern_counts': {'":': 0, '<': 256, '<?xml version=': 0, '>': 286, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1464101', 'n_tokens_mistral': 3167, 'n_tokens_neox': 3069, 'n_words': 844}