@ebay/ui-core-react
Version:
Skin components build off React
49 lines (34 loc) • 1.99 kB
Markdown
# EbayFakeTab
## Demo
[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/navigation-disclosure-ebay-fake-tabs--default-tabs)
## Import JS
```jsx harmony
import { EbayFakeTabs, EbayFakeTab } from "@ebay/ui-core-react/ebay-fake-tabs";
```
## Import following styles from SKIN
```jsx harmony
import "@ebay/skin/tabs";
```
## Usage
```jsx harmony
<EbayFakeTabs>
<EbayFakeTab>Tab 1</EbayFakeTab>
<EbayFakeTab>Tab 2</EbayFakeTab>
<EbayFakeTab>Tab 3</EbayFakeTab>
<h3>Title</h3>
<p>Content</p>
</EbayFakeTabs>
```
## Props
| Name | Type | Stateful | Description |
| ---------------------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `selectedIndex` | Number | Yes | 0-based index of selected tab heading |
| `tabMatchesCurrentUrl` | Boolean | No | Specify whether the href of the currently active fake tab matches the current window url. Default is true. This property is used to configure the underlying aria-current attribute (i.e. a value of "page" (default) or "true"). |
## EbayFakeTab
```jsx harmony
<EbayTab>Tab 1</EbayTab>
```
### EbayFakeTab Props
| Name | Type | Stateful | Description |
| ------ | ------ | -------- | ----------------------------------------- |
| `href` | String | No | The link to take the user to for each tab |