diff --git a/lib/zin/func.php b/lib/zin/func.php index be09713124..08fbcea8d0 100644 --- a/lib/zin/func.php +++ b/lib/zin/func.php @@ -907,6 +907,7 @@ function modalDialog(): modalDialog * Tabs widget. * * ?string direction='h' + * ?bool collapse=false */ function tabs(): tabs { diff --git a/lib/zin/wg/tabs/css/v1.css b/lib/zin/wg/tabs/css/v1.css index 68207ea551..314a53147c 100644 --- a/lib/zin/wg/tabs/css/v1.css +++ b/lib/zin/wg/tabs/css/v1.css @@ -4,4 +4,3 @@ .nav-tabs>.nav-item.active>a {color: var(--color-primary-500);} .nav-tabs>.nav-item.active>a:after {border-bottom-color: var(--color-primary-500) !important; border-bottom-width: 2px;} .nav-tabs>.nav-item.active:after {width: calc(100% - 32px); margin-left: 16px; border-bottom-color: var(--color-primary-500) !important; border-bottom-width: 2px;} -.nav-tabs {border-bottom: 1px solid #E6EAF1;} diff --git a/lib/zin/wg/tabs/v1.php b/lib/zin/wg/tabs/v1.php index b320e8f777..6d9cc6bc1c 100644 --- a/lib/zin/wg/tabs/v1.php +++ b/lib/zin/wg/tabs/v1.php @@ -16,6 +16,7 @@ class tabs extends wg protected static $defineProps = array( /* Tabs direction: h - horizontal, v - vertical */ 'direction?:string="h"', + 'collapse?: bool=false', ); public static function getPageCSS(): string|false @@ -88,9 +89,39 @@ class tabs extends wg } } + private function buildCollapseBtn() + { + $collapse = $this->prop('collapse'); + if(!$collapse) return null; + + return btn + ( + setClass('btn-link'), + setStyle(array( + 'position' => 'absolute', + 'right' => '24px', + 'top' => '16px' + )), + set::icon('angle-down'), + on::click + ( + <<prop('direction') === 'v'; + $collapse = $this->prop('collapse'); $this->filterChildren(); @@ -104,11 +135,12 @@ class tabs extends wg return div ( - setClass('tabs', $isVertical ? 'flex' : null), + setClass('tabs', $isVertical ? 'flex' : null, $collapse ? 'relative' : null), set($this->props->skip(array_keys(static::getDefinedProps()))), $this->buildTabHeader($titleViews), $this->buildTabBody($contentViews), + $this->buildCollapseBtn(), $this->children ); }