[Tabs] Implement new API

[michaldudak]

Anatomy

<Tabs>
  <Tabs.List aria-label="Tabs">
    <Tabs.Tab value="tab-1">Tab 1</Tabs.Tab>
    <Tabs.Tab value="tab-2">Tab 2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="tab-1">
    Panel 1
  </Tabs.Panel>
  <Tabs.Panel value="tab-2">
    Panel 2
  </Tabs.Panel>
</Tabs>

// Rendered HTML
<div dir="ltr" className="base--horizontal">
  <div className="base--horizontal" role="tablist" aria-label="Tabs" aria-orientation="horizontal">
    <button type="button" role="tab" tabindex="0" aria-selected="true" id=":r1:" aria-controls=":r3:" data-orientation="horizontal" data-selected="true">Tab 1</button>
    <button type="button" role="tab" tabindex="-1" aria-selected="false" id=":r2:" aria-controls=":r4:" data-orientation="horizontal">Tab 2</button>
  </div>
  <div className="base--horizontal" role="tabpanel" tabindex="0" id=":r3:" aria-labelledby=":r1:" data-orientation="horizontal" data-selected="true">
    Panel 1
  </div>
  <div className="base--horizontal" role="tabpanel" tabindex="0" id=":r4:" hidden aria-labelledby=":r2:" data-orientation="horizontal">
    Panel 2
  </div>
</div>

Components

Root

Rendered element: div

prop	type	default	description
value	number | string
orientation	vertical | horizontal	horizontal
children
defaultValue	number | string
direction	ltr | rtl	ltr
onChange	(event, newValue) ⇒ void
selectionFollowsFocus	boolean	true	Moved to the List

List

Rendered element: div

prop	type	default	description
children
loop	boolean	true	Configure whether focus loops through tabs or stops at the first/last tab.
activateOnFocus	boolean	true	Formerly selectionFollowsFocus

Tab

Rendered element: button

prop	type	default	description
children
value	number	string
disabled	boolean	false

Panel

Rendered element: div

prop	type	default	description
children
value	number	string

Search keywords: