I'm having a hard time deciding when to use TabPanel, Tabs, TabList, and TabContext when working with material-ui.
Is there a high-level overview of when to use each? It looks like all can... well make tabs.
I haven't found much documentation, it seems that you can either use
<TabContext>
<TabList>
<Tab> </Tab>
<Tab> </Tab>
<Tab> </Tab>
</TabList>
</TabContext>
OR
<Tabs>
<Tab> </Tab>
<Tab> </Tab>
<Tab> </Tab>
</Tabs>
The former seems more customizable and perhaps less standard because it's in the #mui/lab library. The latter automatically wraps your Tabs in a TabList container, but you lose access to this container in-code, including the ability to add custom styles to it.
By the way #Patrick, I remember you from a Chainlink Hackathon a few years ago!
Related
I'm getting this error:
Error: [$compile:nonassign] Expression '$state.current.name==='admin.adminDetails'' used with directive 'tab' is non-assignable!
Trying to activate tabs based off of url:
<tabset direction="right" class="tabbable">
<tab heading="Details" ui-sref="admin.details" active="$state.current.name === 'admin.details'">
<div ui-view="adminDetails"></div>
</tab>
<tab heading="Resources" ui-sref="admin.resources" active="$state.current.name==='admin.resources'">
<div ui-view="adminResources"></div>
</tab>
</tabset>
I'm doing it this way so when the url is /admin/resources then the tab will open on the resources tab and same with the details.
Any insight into this error?
You could try using ui-sref-active="active" instead og active.
This applies the class "active" to the element.
Should be used alongside with ui-sref. Docs
In my Angular 1.3 project I have the following:
<tabset>
<tab ng-controller="FirstTabCtrl">
{{content}}
</tab>
<tab ng-controller=SecondTabCtrl">
{{content}}
</tab>
</tabset>
In Angular 1.4.4 I get the following error message:
Multiple directives [ngController, tab] asking for new/isolated scope
I have tried wrapping the tabs in div's but that destroys the layout.
How can rewrite the code to work with 1.4.4?
Here is a plunker describing the problem: http://plnkr.co/edit/KScdI2jAZ4BAvDL4kCfk?p=preview
If you definitely don't want to use routes and states to handle the tabs, you could restructure the content inside each tab directive: add the ng-controller to a div inside the <tab> element, like this:
<tab heading="tab 1">
<div ng-controller="FirstCtrl">
{{content}}
</div>
</tab>
Here's a plunkr to show it.
This doesn't destroy the tab layout, but if it does in some way, you can always handle that with CSS.
I have used bootstrap directive for angularjs for tab(http://angular-ui.github.io/bootstrap/),
and i found that it only support specific parameters
https://github.com/angular-ui/bootstrap/tree/master/src/tabs/docs
i want to know is there any way to set image instead of heading for bootstrap angularjs directive ?
Check it out here:
<tabset>
<tab>
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
Other tab content
</tab>
</tabset>
Practically you can put any content inside the <tab-heading>.
I have a simple layout using Angular UI tabs as follows:
<div id="mainContainer" class="mainContainer" data-ng-controller="authorization">
<tabset ng-if="authorized">
<tab heading="Resources" >
Authorized
</tab>
</tabset>
<div ng-if="!authorized">
Not authorized
</div>
</div>
Whenever authorized is false "Not authorized" is displayed is expected, but whenever authorized is true and tabs are supposed to be display I get this ugly thing:
TypeError: Cannot read property '$parent' of undefined
at link (http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js:2760:51)
at Q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:49:451)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:56:142
at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:43:24)
at Q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:49:392)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:56:142
at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:43:3)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:42:180
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:43:422
at y (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:47:204) <ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}" tabset-titles="!tabsAbove">
I also get the same thing if I use ng-switch.
Here is the Angular versions I am using
//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js
//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js
Seeing how it doesn't look like it's coming from any of my angular code I am not even sure where to start looking for a solution.
Thank you!
One solution is to ensure that the directives ng-if and tabset do not collide:
<div ng-if="authorized">
<tabset>
<tab heading="Resources" >
Authorized
</tab>
</tabset>
</div>
Your problem could be related to this issue.
Angular UI, has support only for basic tabs.
I wanted to create a directive that would support nested tabs & advanced headings (that can include html).
I think, that the best syntax would be
<tabs>
<tab>
<title><i class="myIcon"></i> Title 1</title>
<p>Content 1</p>
</tab>
<tab>
<title class="pull-right">Title 2 (Nested)</title>
<tab>
<title>Title 2.1</title>
<p>Content 2.1</p>
</tab>
<p>Content 2</p>
</tab>
</tabs>
My problem with this approach, is that I would need 2 ng-transclude - one for panes and one for titles.
As it would be very easy to do the first ng-transclude (just like in the tutorial):
<div>
<ul>
<li ng-repeat="pane in panes" transclude-title></li>
</ul>
<div class="tab-content" ng-transclude="">
</div>
</div>
I don't have any idea how can I transclude titles here?
How can I preserve nested structure of tabs ?
Maybe there is a better solution to this problem ?
This is a multiple transclude example. I hope it points you into the right direction.
http://plnkr.co/edit/wpgvgr5h6nAQDOZYEHNI?p=preview