Scrollable tabs for TabPanel

2 files changed, 16 insertions, 2 deletions

diff --git a/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css b/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css
index fbb6f00a..a0314ced 100644
--- a/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css
+++ b/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css
@@ -152,3 +152,14 @@ ul.dropdown-menu li a {
 .file-drop-zone.clickable:focus {
     border: 1px solid #5acde2;
 }
+
+ul.tabs-top {
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+}
+
+ul.tabs-top > li {
+    float:none;
+    flex-shrink: 0;
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt
index b98ea1ad..5a4fac0c 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt
@@ -59,12 +59,14 @@ enum class SideTabSize {
  * @constructor
  * @param tabPosition tab position
  * @param sideTabSize side tab size
+ * @param scrollableTabs determines if tabs are scrollable (default: false)
  * @param classes a set of CSS class names
  * @param init an initializer extension function
  */
 open class TabPanel(
     private val tabPosition: TabPosition = TabPosition.TOP,
     private val sideTabSize: SideTabSize = SideTabSize.SIZE_3,
+    scrollableTabs: Boolean = false,
     classes: Set<String> = setOf(),
     init: (TabPanel.() -> Unit)? = null
 ) : SimplePanel(classes) {
@@ -86,7 +88,7 @@ open class TabPanel(
             }
         }
     private val navClasses = when (tabPosition) {
-        TabPosition.TOP -> setOf("nav", "nav-tabs")
+        TabPosition.TOP -> if (scrollableTabs) setOf("nav", "nav-tabs", "tabs-top") else setOf("nav", "nav-tabs")
         TabPosition.LEFT -> setOf("nav", "nav-tabs", "tabs-left")
         TabPosition.RIGHT -> setOf("nav", "nav-tabs", "tabs-right")
     }
@@ -205,10 +207,11 @@ open class TabPanel(
         fun Container.tabPanel(
             tabPosition: TabPosition = TabPosition.TOP,
             sideTabSize: SideTabSize = SideTabSize.SIZE_3,
+            scrollableTabs: Boolean = false,
             classes: Set<String> = setOf(),
             init: (TabPanel.() -> Unit)? = null
         ): TabPanel {
-            val tabPanel = TabPanel(tabPosition, sideTabSize, classes, init)
+            val tabPanel = TabPanel(tabPosition, sideTabSize, scrollableTabs, classes, init)
             this.add(tabPanel)
             return tabPanel
         }