Tabs
July 31, 2019 ยท View on GitHub
Displays a tab row of navigation buttons.
Main features
- Use text, icon, or combination
- Automatically fit display
- Centered display
- Compact display
- Make all tabs as wide as the widest tab
- Hide tab indicator
- Remove indicator slide effect
- Custom button behaviour
- Scrollable
- Custom scroll buttons
- Display tabs as mobile navigation menu
Usage
Options
Tabs options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| activeSelected | optional | Boolean | false | Set to true to enable clicks/taps on the selected tab button |
| all | optional | Options Object | Tab button options that will be applied to all tabs, see "Tab button options" below | |
| autofit | optional | Boolean | false | Set to true to let the buttons fill the entire button row |
| centered | optional | Boolean | false | Set to true to center the button row; this automatically sets autofit to false |
| hideIndicator | optional | Boolean | false | Set to true to hide the "current tab" indicator |
| largestWidth | optional | Boolean | false | Set to true to give all tabs the width of the largest tab |
| menu | optional | Boolean | false | Set to true to make the tabs behave like a mobile navigation menu; this removes the minimum width settings from the tab buttons and compresses padding and label font size |
| noIndicatorSlide | optional | Boolean | false | Set to true not let the "current tab" indicator slide to the new position |
| onChange | optional | Function ({ index: number, options: TabButtonOptions, el: HTMLElement }) => undefined | Callback function that receives the tabs state | |
| scrollable | optional | Boolean | false | Set to true to make the button row scrollable; this automatically sets autofit to false; on non-touch devices, 2 scroll buttons will be added to navigate tabs |
| scrollIconBackward | optional | Icon options object | Overrides default arrow icon | |
| scrollIconForward | optional | Icon options object | Overrides default arrow icon | |
| selectedTabIndex | optional | Number | 0 | The Array index of the selected tab. Overridden when one of the tabs has option selected. |
| small | optional | Boolean | false | Set to true to reduce the tab widths on larger screens |
| tabs | use content or tabs | Array of tab button option objects | Button row content |
Tab button options
Tab buttons use the same parameters as button, except for wash (disabled), raised and shadowDepth (makes visually no difference).
These options can be grouped into tabsOpts and applied to all tabs.
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| className | optional | String | Extra CSS class appended to "pe-button pe-tabs__tab" | |
| disabled | optional | Boolean | false | Disables the button |
| element | optional | String | "a" (if url is passed) or "div" | HTML element tag |
| events | optional | Object | Button events; options object containing one or more events like onclick | |
| ink | optional | Boolean | true | Set to false to disable the ripple effect on click/tap |
| label | required | String | The button label | |
| selected | optional | Boolean | false | Set to true to show the button as selected |
| url | optional | Object with href, optionally oncreate (for Mithril 1.x) or onClick (for React) or to (for React Router) | URL location; Mithril 2.x: for in-app route linking set only use url.href and set element to m.route.Link; Mithril 1.x: for in-app route linking set oncreate : m.route.link; React: for in-app route linking use onClick and a router such as react-router-dom |
Common component options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| after | optional | String, hyperscript or component | Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth | |
| before | optional | String, hyperscript or component | Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth | |
| className | optional | String | Extra CSS class appended to pe-tabs | |
| content | use content or tabs | Array of option objects | Button row content | |
| element | optional | String | "div" | HTML element tag |
| id | optional | String | HTML element id | |
| style | optional | Object | For setting simple style attributes | |
| tone | optional | String: "dark" or "light" | Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone) |
Composition
Tabs is composed from:
- Button
- Icon Button (for scroll buttons)
Tabs sometimes uses:
- Icon (when
iconis passed instead oflabel)