diff options
-rw-r--r-- | kvision-modules/kvision-bootstrap/src/main/resources/css/style.css | 11 | ||||
-rw-r--r-- | src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt | 7 |
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 } |