Tabs

First

Second

Third

Content for first tab

import { Tabs, TabSection } from "rfui-package";

#Basic

First

Second

Third

Content for first tab

<Tabs>
  <TabSection tabName="First">Content for first tab</TabSection>
  <TabSection tabName="Second">Content for second tab</TabSection>
  <TabSection tabName="Third">Content for third tab</TabSection>
</Tabs>

#Full width

Set fullWidth to true. Defaults to false.

First

Second

Third

Content for first tab

<Tabs fullWidth>
  <TabSection tabName="First">Content for first tab</TabSection>
  <TabSection tabName="Second">Content for second tab</TabSection>
  <TabSection tabName="Third">Content for third tab</TabSection>
</Tabs>

#Initial active tab

Set initialActiveTabName to the tabName of the TabSection that you want to display when the component loads.

First

Second

Third

Content for second tab

<Tabs initialActiveTabName="Second">
  <TabSection tabName="First">Content for first tab</TabSection>
  <TabSection tabName="Second">Content for second tab</TabSection>
  <TabSection tabName="Third">Content for third tab</TabSection>
</Tabs>

#As links

First Second Third

<Tabs>
  <TabSection tabName="First" href="/first">
    Content for first tab
  </TabSection>
  <TabSection tabName="Second" href="/second">
    Content for second tab
  </TabSection>
  <TabSection tabName="Third" href="/third">
    Content for third tab
  </TabSection>
</Tabs>

#Props

Prop	Required	Default	Type and notes
`fullWidth`	-	`false`	`boolean`
`initialActiveTabName`	-	-	`string`
`children`		-	`ComponentChild`

`TabSection`

Prop	Required	Default	Type and notes
`tabName`		-	`string`
`href`	-	-	`string`
`children`		-	`ComponentChild`