Fixed #2706 - Add panelContainerStyle and panelContainerClassName pro…

…perties to TabView
primefaces · Mar 29, 2022 · 3e259d1 · 3e259d1
1 parent 800d523
commit 3e259d1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/components/doc/tabview/index.js b/components/doc/tabview/index.js
@@ -1086,6 +1086,18 @@ template: (options) => {
                                     <td>false</td>
                                     <td>When enabled displays buttons at each side of the tab headers to scroll the tab list.</td>
                                 </tr>
+                                <tr>
+                                    <td>panelContainerStyle</td>
+                                    <td>object</td>
+                                    <td>null</td>
+                                    <td>Inline style of the panels container of the tabview.</td>
+                                </tr>
+                                <tr>
+                                    <td>panelContainerClassName</td>
+                                    <td>string</td>
+                                    <td>null</td>
+                                    <td>Style class of the panels container of the tabview.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>

diff --git a/components/lib/tabview/TabView.d.ts b/components/lib/tabview/TabView.d.ts
@@ -50,6 +50,8 @@ export interface TabViewProps {
     className?: string;
     renderActiveOnly?: boolean;
     scrollable?: boolean;
+    panelContainerStyle?: object;
+    panelContainerClassName?: string;
     onTabChange?(e: TabViewTabChangeParams): void;
     onTabClose?(e: TabViewTabCloseParams): void;
 }

diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
@@ -226,6 +226,7 @@ export const TabView = forwardRef((props, ref) => {
     }
 
     const createContent = () => {
+        const className = classNames('p-tabview-panels', props.panelContainerClassName);
         const contents = React.Children.map(props.children, (tab, index) => {
             if (shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index))) {
                 const selected = isSelected(index);
@@ -243,7 +244,7 @@ export const TabView = forwardRef((props, ref) => {
         });
 
         return (
-            <div className="p-tabview-panels">
+            <div className={className} style={props.panelContainerStyle}>
                 {contents}
             </div>
         )
@@ -334,7 +335,9 @@ TabView.defaultProps = {
     renderActiveOnly: true,
     onTabChange: null,
     onTabClose: null,
-    scrollable: false
+    scrollable: false,
+    panelContainerStyle: null,
+    panelContainerClassName: null
 }
 
 TabView.propTypes /* remove-proptypes */ = {
@@ -346,5 +349,7 @@ TabView.propTypes /* remove-proptypes */ = {
     renderActiveOnly: PropTypes.bool,
     onTabChange: PropTypes.func,
     onTabClose: PropTypes.func,
-    scrollable: PropTypes.bool
+    scrollable: PropTypes.bool,
+    panelContainerStyle: PropTypes.object,
+    panelContainerClassName: PropTypes.string
 }