Tabs in cumulocity components?

,
1

Product/components used and version/fix level:

Detailed explanation of the problem:

I would like to use Tabs in custom plugin component, similar to Angular Material Tabs, as referenced below.

image
image1405×274 9.32 KB

However, I am unable to find tabs in codex. While i see an example of tabs in the context dashboards, my use case is different. I want all the tabs in single component where one tab is dependent with another. Each tab has its form and user must fill to navigate to next tab.

image
image958×763 41.8 KB

Question related to a free trial, or to a production (customer) instance?

Production

Regards
Mohan

2

Hi Mohan,

Cumulocity comes pre-packaged with ngx-bootstrap. You can use the tabs component from ngx-bootstrap directly in your cumulocity project: Angular Bootstrap

To use the tabs, import the module:

import { TabsModule } from 'ngx-bootstrap/tabs';

@NgModule({
  imports: [TabsModule.forRoot(),...]
})
export class AppModule(){}

Then you can use tabs like so:

<div>
  <tabset>
    <tab heading="Basic title" id="tab1">Basic content</tab>
    <tab heading="Basic Title 1">Basic content 1</tab>
    <tab heading="Basic Title 2">Basic content 2</tab>
  </tabset>
</div>

Cheers,
Jimmy

3

Thanks Jimmy,

Regards
Mohan