.nav-item>a {padding: 0; padding-right: 0; color: var(--color-gray-800);} .tabs-nav>.nav-item>a:after {border-width: 0;} .tabs-nav>.nav-item>a:before {background: none;} .tabs-nav>.nav-item>a.active {color: var(--color-primary-500);} .tabs-nav>.nav-item>a.active:after {border-bottom-color: var(--color-primary-500) !important; border-bottom-width: 2px;} .tabs-nav>.divider {height: 20px; border-right: 1px solid #DDD;} .tabs-collapse-btn {position: absolute; top: 0; right: 0; width: 24px; height: 24px;} .tab-content {padding-top: 10px;} CSS; } /** * @param \zin\tabPane $tabPane * @param string $titleClass */ protected function buildTitleView($tabPane, $titleClass = "") { $key = $tabPane->prop('key'); $title = $tabPane->prop('title'); $active = $tabPane->prop('active'); $hide = $tabPane->prop('hide'); $param = $tabPane->prop('param'); $prefix = $tabPane->block('prefix'); $suffix = $tabPane->block('suffix'); $navClass = $this->prop('navClass'); return li ( setClass('nav-item', $navClass, $hide ? 'hidden' : ''), setData('key', $key), a ( set('data-toggle', 'tab'), set('data-param', $param), setClass('font-medium', $active ? 'active' : null, $titleClass), set::href("#$key"), $prefix, span($title), $suffix ) ); } /** * @param array $titleViews * @return node */ protected function buildTabHeader($titleViews) { $isVertical = $this->prop('direction') === 'v'; $collapse = $this->prop('collapse'); $headerClass = $this->prop('headerClass'); return div ( setClass('tabs-header bg-white'), ul ( setClass('tabs-nav nav nav-tabs gap-x-5', $collapse ? 'relative' : null, $headerClass), $isVertical ? setClass('nav-stacked') : null, $titleViews ), $this->buildCollapseBtn() ); } /** * @param array $titleViews * @return node * @param mixed[] $contentViews */ protected function buildTabBody($contentViews) { return div ( setClass('tab-content'), $contentViews ); } private function processTabs() { $tabPanes = array(); $children = array(); $hasActived = false; foreach ($this->children() as $child) { if($child instanceof tabPane) { $tabPanes[] = $child; if($child->prop('active')) $hasActived = true; continue; } $children[] = $child; } if(!$hasActived && !empty($tabPanes)) $tabPanes[0]->setProp('active', true); return array($tabPanes, $children); } private function buildCollapseBtn() { $collapse = $this->prop('collapse'); if(!$collapse) return null; return collapseBtn ( setClass('tabs-collapse-btn'), set::target('.tab-content'), set::parent('.tabs') ); } protected function build() { $isVertical = $this->prop('direction') === 'v'; $titleClass = $this->prop('titleClass'); list($tabPanes, $children) = $this->processTabs(); $titleViews = array(); foreach($tabPanes as $tabPane) { $titleViews[] = $this->buildTitleView($tabPane, $titleClass); if($tabPane->prop('divider')) $titleViews[] = div(set::className('divider')); } return div ( setClass('tabs', $isVertical ? 'flex' : null), set($this->getRestProps()), $this->buildTabHeader($titleViews), $this->buildTabBody($tabPanes), $children ); } }