Tabs and TabItem
Tabs
Functions
- upperCaseString(string) ⇒
string Upper case the first letter of a string
Typedefs
Page Builder Tabs component.
This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
Returns:
React.Element
— A React component that displays a set of Tabs.
Parameters
| Name | Type | Description |
|---|---|---|
props | React component props |
Upper case the first letter of a string
Returns: Parameters
| Name | Type |
|---|---|
string | string |
Props for Tabs
Properties
| Name | Type | Description |
|---|---|---|
classes | Object | An object containing the class names for the Tabs |
classes.header | String | Class names for the tab header |
classes.panelSelected | String | Class names for the selected tab panel |
classes.panel | String | Class names for the tab panel |
classes.contentLeft | String | Class names for the tab content |
classes.contentCenter | String | Class names for the tab content |
classes.contentRight | String | Class names for the tab content |
classes.navigationLeft | String | Class names for the tab navigation |
classes.navigationCenter | String | Class names for the tab navigation |
classes.navigationRight | String | Class names for the tab navigation |
classes.navigationGradientLeft | String | Class names for the tab navigation gradient when scrolling |
classes.navigationGradientRight | String | Class names for the tab navigation gradient when scrolling |
classes.navigationGradientBoth | String | Class names for the tab navigation gradient when scrolling |
classes.disabled | String | Class names for the disabled tabs |
classes.selected | String | Class names for the selected tab |
classes.item | String | Class names for the tab item |
tabNavigationAlignment | String | Navigation alignment for tabs |
minHeight | String | Minimum height of the tabs |
defaultIndex | Number | Index of the tab to display by default |
headers | Array | Array of tab headers |
textAlign | String | Alignment of the Tabs within the parent container |
border | String | CSS border property |
borderColor | String | CSS border color property |
borderWidth | String | CSS border width property |
borderRadius | String | CSS border radius property |
marginTop | String | CSS margin top property |
marginRight | String | CSS margin right property |
marginBottom | String | CSS margin bottom property |
marginLeft | String | CSS margin left property |
mediaQueries | Array | List of media query rules to be applied to the component |
paddingTop | String | CSS padding top property |
paddingRight | String | CSS padding right property |
paddingBottom | String | CSS padding bottom property |
paddingLeft | String | CSS padding left property |
cssClasses | Array | List of CSS classes to be applied to the component |
Source Code: pwa-studio/packages/pagebuilder/lib/ContentTypes/Tabs/tabs.js
TabItem
Typedefs
Page Builder TabItem component.
This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
Returns:
React.Element
— A React component that displays a TabItem.
Parameters
| Name | Type | Description |
|---|---|---|
props | React component props |
Props for TabItem
Properties
| Name | Type | Description |
|---|---|---|
classes | Object | An object containing the class names for the TabItem |
classes.root | String | CSS class for the tab item root element |
tabName | String | Name of the tab item |
verticalAlignment | String | Vertical alignment of content within tab item |
minHeight | String | CSS minimum height property |
backgroundColor | String | CSS background-color property |
desktopImage | String | Background image URL to be displayed on desktop devices |
mobileImage | String | Background image URL to be displayed on mobile devices |
backgroundSize | String | CSS background-size property |
backgroundPosition | String | CSS background-position property |
backgroundAttachment | String | CSS background-attachment property |
backgroundRepeat | String | CSS background-repeat property |
textAlign | String | Alignment of content within the tab item |
border | String | CSS border property |
borderColor | String | CSS border color property |
borderWidth | String | CSS border width property |
borderRadius | String | CSS border radius property |
marginTop | String | CSS margin top property |
marginRight | String | CSS margin right property |
marginBottom | String | CSS margin bottom property |
marginLeft | String | CSS margin left property |
mediaQueries | Array | List of media query rules to be applied to the component |
paddingTop | String | CSS padding top property |
paddingRight | String | CSS padding right property |
paddingBottom | String | CSS padding bottom property |
paddingLeft | String | CSS padding left property |
cssClasses | Array | List of CSS classes to be applied to the component |
Source Code: pwa-studio/packages/pagebuilder/lib/ContentTypes/TabItem/tabItem.js