<Tabs> is the lightweight tab container that yields a curried <Tab> subcomponent. Each <Tab> takes a @title and renders its body via Ember Wormhole into the shared content area.

`<Tabs>`

<Tabs> is the lightweight tab container in @logisbase/ember-ui. It yields a curried <Tab> subcomponent — each Tab has a @title and yields its body content into the shared tab-content area.

For a richer, route-aware tab strip with icons, badges, closable tabs, and an Add-tab button, use <TabNavigation>.

Basic Usage

<Tabs as |Tab|>
  <Tab @title='Profile'>
    <p>Profile content</p>
  </Tab>
  <Tab @title='Security'>
    <p>Security content</p>
  </Tab>
  <Tab @title='Notifications'>
    <p>Notifications content</p>
  </Tab>
</Tabs>

The first Tab is automatically activated. Click any tab to switch.

Arguments

`<Tabs>` Container

Argument	Type	Description
`@onClick`	`(tabName)`	Called when the user clicks a tab
`@onTabClick`	`(tabName)`	Alias of `@onClick`
`@onTabCreated`	`(tabName)`	Called when each Tab is registered (once per tab on first render)
`@tagContentClass`	string	Extra classes on the shared content container

`<Tab>` Yielded Subcomponent

Argument	Type	Description
`@title`	string	The tab label (also used as the internal tab name — dasherized)
`@tabClass`	string	Extra classes on the tab `<a>`
`@tabListItemClass`	string	Extra classes on the tab `<li>`
`@tagPaneClass`	string	Extra classes on the tab pane

Any additional ...attributes on a <Tab> are forwarded to the tab pane element.

<Tabs> renders a <ul> of tab links plus an empty <div> content area. Each <Tab> registers itself with the parent on creation and (when active) uses <EmberWormhole> to render its body into the shared content area.

The active tab is tracked on the parent. Clicking a tab updates the active state and re-portals the body.

Real-World Examples

{{! Settings panel with three tabs }}
<Tabs as |Tab|>
  <Tab @title='General'>
    <InputGroup @name='Display name' @value={{this.user.display_name}} />
    <InputGroup @name='Email' @value={{this.user.email}} />
  </Tab>
  <Tab @title='Security'>
    <InputGroup @name='Current password' @type='password' />
    <InputGroup @name='New password' @type='password' />
  </Tab>
  <Tab @title='API'>
    <ClickToReveal @value={{this.user.api_token}} @clickToCopy={{true}} />
  </Tab>
</Tabs>

{{! With a callback when the user switches tabs }}
<Tabs @onTabClick={{this.recordTabSwitch}} as |Tab|>
  <Tab @title='Overview'><OverviewPanel /></Tab>
  <Tab @title='Activity'><ActivityLog @subjectId={{this.id}} /></Tab>
</Tabs>

When to Use What

Need	Use
Simple, inline tabs in a panel	`<Tabs>`
Route-driven tabs (`LinkTo`)	`<TabNavigation>` with `route` on each tab
Tabs with icons / badges / closable / Add button	`<TabNavigation>`

Source

File	Description
`addon/components/tabs.hbs`	Container template
`addon/components/tabs.js`	Container class
`addon/components/tabs/tab.hbs`	Tab subcomponent template
`addon/components/tabs/tab.js`	Tab subcomponent class

Tabs