Comments (4)
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:
Line 1 in a1355c0
from 7.css.
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
from 7.css.
Hello @JericoFX, maybe try setting up the tabs using the simplified tabs template could help you get started easier. Otherwise, please share your code.
from 7.css.
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>
from 7.css.
Related Issues (20)
- how to window auto height for parent ? HOT 1
- easy and good HOT 1
- [ENHANCEMENT] Desktop icons? HOT 1
- [Menu Bar] Overlapped Dropdown Menu HOT 4
- [Menu Bar] Overlapped Dropdown Menu
- Scrollbar HOT 2
- Bug found at 7.css, IDK any CSS but I have the source HOT 1
- buttons that are both pressed and hover should have a shadow effect HOT 1
- Add Avatar component
- Add list view/table component HOT 2
- HH nfv r r
- Add Taskbar and Start Menu HOT 3
- Tabs aren't working properly HOT 1
- [Dropdown] Inconsistent appearance HOT 3
- Focus Outline Behaviour HOT 1
- Im not surre if is a Issue..... HOT 2
- Help icon in window titlebar missing
- Tabs not working HOT 2
- Add date pickers HOT 1
- Aero window button hover and pressed animations should be activated regardless if the window is active or not.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 7.css.