Tab panes now support CSS spec

See form docs > paneCssClass

modules/backend/classes/FormTabs.php

@@ -47,6 +47,11 @@ class FormTabs implements IteratorAggregate, ArrayAccess
      */
     public $cssClass;
 
+    /**
+     * @var array Specifies a CSS class to an individual tab pane.
+     */
+    public $paneCssClass;
+
     /**
      * Constructor.
      * Specifies a tabs rendering section. Supported sections are:
@@ -88,6 +93,10 @@ class FormTabs implements IteratorAggregate, ArrayAccess
         if (array_key_exists('cssClass', $config)) {
             $this->cssClass = $config['cssClass'];
         }
+
+        if (array_key_exists('paneCssClass', $config)) {
+            $this->paneCssClass = $config['paneCssClass'];
+        }
     }
 
     /**
@@ -165,6 +174,23 @@ class FormTabs implements IteratorAggregate, ArrayAccess
         return $tablessFields;
     }
 
+    /**
+     * Returns a tab pane CSS class.
+     * @param string $index
+     * @param string $label
+     * @return string
+     */
+    public function getPaneCssClass($index = null, $label = null)
+    {
+        if ($index !== null && isset($this->paneCssClass[$index])) {
+            return $this->paneCssClass[$index];
+        }
+
+        if ($label !== null && isset($this->paneCssClass[$label])) {
+            return $this->paneCssClass[$label];
+        }
+    }
+
     /**
      * Get an iterator for the items.
      * @return ArrayIterator

modules/backend/widgets/form/partials/_form_tabs.htm

@@ -22,7 +22,7 @@
 <div class="tab-content <?= $contentCss ?>">
     <?php $index = 0; foreach ($tabs as $name => $fields): ?>
         <div
-            class="tab-pane <?= $index++==0?'active':''?> <?= $paneCss ?>"
+            class="tab-pane <?= e($tabs->getPaneCssClass($index, $name)) ?> <?= $index++==0?'active':''?> <?= $paneCss ?>"
             id="<?= $type.'tab-'.$index ?>">
             <?= $this->makePartial('form_fields', ['fields' => $fields]) ?>
         </div>