khang-nd / 7.css

<section class="tabs">
  <menu role="tablist" aria-label="Tabs Template">
    <button role="tab" aria-controls="tab-A" aria-selected="true">Tab A</button>
    <button role="tab" aria-controls="tab-B">Tab B</button>
    <button role="tab" aria-controls="tab-C">Tab C</button>
    <button role="tab" aria-controls="tab-D" disabled>Tab D</button>
  </menu>
  <article role="tabpanel" id="tab-A">Tab A is active</article>
  <article role="tabpanel" id="tab-B" hidden>Tab B is active</article>
  <article role="tabpanel" id="tab-C" hidden>Tab C is active</article>
  <article role="tabpanel" id="tab-D" hidden>Tab D is inactive</article>
</section>

I have pasted this code in angular but I don't know why the tabs are not working. I got the UI as it is mentioned in the page But If I click tab-B/C it is not showing me Tab B is active/C is active. Do we need to add any custom javascript code for this. If not can you please help me with this issue. Thanks in Advance.

Hello @Vetagiri-Hrushikesh, This css package is not shipped with any JS, you indeed need to add your own JS code to make the tabs functional, or you can refer to the JS code used for the docs:

7.css/docs/script.js

Line 1 in a1355c0

// Tabs

Hi Khang,. sorry for reviving this, i have the same problem i even copy the js and doest work i have an image im using svelte, Keep doing this, is awesome!!!

Edit One : so after some touches the tabs "activate and deactivate" but the content still in like one line instead in the tabs

Hello @JericoFX, maybe try setting up the tabs using the simplified tabs template could help you get started easier. Otherwise, please share your code.

Hi Khang,. sorry for reviving this, i have the same problem i even copy the js and doest work i have an image im using svelte, Keep doing this, is awesome!!!

Edit One : so after some touches the tabs "activate and deactivate" but the content still in like one line instead in the tabs

I did added that functionality using bootstrap In case if you need that please check the code below. It looks almost similar but you need to do very minimal changes in your css according to your needs.

        <div>
            <ul class="nav nav-tabs tabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home"
                        aria-selected="true" (click)="pluginCall()">Software Revisions</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
                        aria-controls="profile" aria-selected="false">Discrete Outputs</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
                        aria-controls="contact" aria-selected="false">Discrete Inputs</button>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div style="height: 320px;" class="tab-pane fade show active" id="home" role="tabpanel"
                    aria-labelledby="home-tab">
                    <div class="Content">
                        <p *ngFor="let i of valueList">{{i}}</p>
                    </div>
                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Tab 2</div>
                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Tab 3</div>
            </div>
        </div>

Tabs are not working