Comments (10)
amorey
commented on September 6, 2024
There's an undocumented feature which lets you activate tabs from JavaScript:
mui.tabs.activate(paneId);from mui.
mukuljp
commented on September 6, 2024
yes ,I have checked that already, it lets you activate the tabs onebyone right, that too by passing pane id , if i have 20 sections , if each section has a tabbed content of which has say 3 tabs,
so to activate all those i have give 60 unique id's to individual identify panes and activate them using mui.tabs.activate.instead it would be great if i have a single function call that activates all tabs in those 20 sections , and set the first tab selected by default. does mui have this feature? thank you
from mui.
amorey
commented on September 6, 2024
I see... to activate the tab on page load you can use the mui-is-active CSS state:
<ul class="mui-tabs">
<li class="mui-is-active"><a data-mui-toggle="tab" data-mui-controls="pane-default-1">Tab-1</a></li>
<li><a data-mui-toggle="tab" data-mui-controls="pane-default-2">Tab-2</a></li>
<li><a data-mui-toggle="tab" data-mui-controls="pane-default-3">Tab-3</a></li>
</ul>
<div class="mui-tab-content">
<div class="mui-tab-pane mui-is-active" id="pane-default-1">Pane-1</div>
<div class="mui-tab-pane" id="pane-default-2">Pane-2</div>
<div class="mui-tab-pane" id="pane-default-3">Pane-3</div>
</div>There's a typo in the documentation which I'll fix ASAP.
from mui.
amorey
commented on September 6, 2024
@mukuljp Did the CSS class fix your problem?
from mui.
mukuljp
commented on September 6, 2024
@amorey , the html for the tabs is coming up via ajax, i gave a class to all tabs initialy (only to first tab).
<ul class="mui-tabs " >
<li ><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-1', null)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-1">Next Steps</a></li>
<li><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-2', null)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-2">Details</a></li>
<li><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-3', p.offices)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-3">Hours & Locations</a></li>
</ul>
<div class="mui-tab-content">
<div class="mui-tab-pane first_mui_tab_set" id="bla-{{p.program_numeric_id}}-1">
<div class="mui-panel">
</div>
</div>
<div class="mui-tab-pane" id="bla-{{p.program_numeric_id}}-2">
<div class="mui-panel">
</div>
</div>
<div class="mui-tab-pane" id="bla-{{p.program_numeric_id}}-3">
<div class="mui-panel">
</div>
</div>
</div> .
and in activateThisTab function i added the mui.tabs.activate(paneId);
and finally to set the first tab as selected, I called a jquery code after the html got finished rendering,
jQuery(".first_mui_tab_set").each(function () {
var id_pane = jQuery(this).attr("id");
mui.tabs.activate(id_pane);
});
Overall its a hack :)
i had to put unique ids and click handlers for every tab, it would have been easier if its done by class .
from mui.
amorey
commented on September 6, 2024
I see. That works but using the mui-is-active class is definitely easier. This should fix the problem:
<ul class="mui-tabs " >
<li class="mui-is-active"><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-1', null)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-1">Next Steps</a></li>
<li><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-2', null)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-2">Details</a></li>
<li><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-3', p.offices)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-3">Hours & Locations</a></li>
</ul>from mui.
mukuljp
commented on September 6, 2024
oh let me try that,
from mui.
amorey
commented on September 6, 2024
Ok, let me know if it works.
Just to clarify, you need to add the mui-is-active class to the tab and the pane:
<ul class="mui-tabs " >
<li ><a class="mui-is-active" ng-click="activateThisTab('bla-' + p.program_numeric_id + '-1', null)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-1">Next Steps</a></li>
<li><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-2', null)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-2">Details</a></li>
<li><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-3', p.offices)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-3">Hours & Locations</a></li>
</ul>
<div class="mui-tab-content">
<div class="mui-tab-pane mui-is-active first_mui_tab_set" id="bla-{{p.program_numeric_id}}-1">
<div class="mui-panel">
</div>
</div>
<div class="mui-tab-pane" id="bla-{{p.program_numeric_id}}-2">
<div class="mui-panel">
</div>
</div>
<div class="mui-tab-pane" id="bla-{{p.program_numeric_id}}-3">
<div class="mui-panel">
</div>
</div>
</div>from mui.
mukuljp
commented on September 6, 2024
yes that worked , but in the documentation I found it was wrong at first . anyway its showing correctly now in https://www.muicss.com/docs/v1/css-js/tabs
your work is good , its very easy to use , thank you @amorey
from mui.
amorey
commented on September 6, 2024
Great! I'm happy to hear it's working!
from mui.
Related Issues (20)
- npm run build-e2e-tests fails with an error HOT 2
- WebComponents part is outdated? Should we perfect it? HOT 1
- Label in input form not properly visualized HOT 2
- React Dividers example broken? HOT 1
- Configuration via mocha.opts is DEPRECATED HOT 2
- Clarify or change behavior of Tabs in CSS/JS HOT 3
- How we can update the muicss docs? HOT 3
- Outlined text HOT 2
- Dark mode support via automatic CSS media query prefers-color-scheme HOT 1
- limit size of select menu HOT 4
- Is this repo still being maintained? HOT 1
- Required validation for select HOT 2
- Reset form input validation HOT 4
- select with multiple attribute HOT 2
- Make tab hidden/visible on some criteria HOT 2
- MUI hacked? Github Repo has only a 0.10.2 tag and the website and NPM show a 0.10.3 version. HOT 1
- Support for react 17 HOT 5
- Bugs in negated `in` expressions
- [Autocomplete] How to implement? HOT 1
- Mobile Safari incorrectly warns "Your browser does not support WebComponents" HOT 2
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 mui.