chg: [helpers:bootstrap] Added support of variant in tabs

pull/37/head
mokaddem 2021-01-13 14:16:52 +01:00
parent a4bb09253f
commit dbeef75d0d
1 changed files with 22 additions and 7 deletions

View File

@ -3,12 +3,14 @@
* Bootstrap Tabs helper
* Options:
* [style]
* - fill: Should the navigation items occupies all space
* - fill: Should the navigation items occupy all available space
* - justify: Should the navigation items be justified (accept: ['center', 'end'])
* - pills: Should the navigation items be pills
* - vertical: Should the navigation bar be placed on the left side of the content
* - vertical-size: Specify how many boostrap's `cols` should be used for the navigation (only used when `vertical` is true)
* - card: Should the navigation be placed in a bootstrap card
* - header-variant: The bootstrap variant to be used for the card header
* - body-variant: The bootstrap variant to be used for the card body
* - nav-class: additional class to add to the nav container
* - content-class: additional class to add to the content container
* [data]
@ -61,6 +63,8 @@ class BootstrapTabs extends Helper
'vertical' => false,
'vertical-size' => 3,
'card' => false,
'header-variant' => 'light',
'body-variant' => '',
'nav-class' => [],
'nav-item-class' => [],
'content-class' => [],
@ -72,6 +76,8 @@ class BootstrapTabs extends Helper
private $allowedOptionValues = [
'justify' => [false, 'center', 'end'],
'body-variant' => ['primary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'white', 'transparent', ''],
'header-variant' => ['primary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'white', 'transparent'],
];
private $options = null;
@ -101,6 +107,11 @@ class BootstrapTabs extends Helper
$this->bsClasses['nav'][] = 'justify-content-' . $this->options['justify'];
}
if ($this->options['vertical'] && !isset($options['pills']) && !isset($options['card'])) {
$this->options['pills'] = true;
$this->options['card'] = true;
}
if ($this->options['pills']) {
$this->bsClasses['nav'][] = 'nav-pills';
if ($this->options['vertical']) {
@ -139,6 +150,10 @@ class BootstrapTabs extends Helper
$this->options['vertical-size'] = $this->options['vertical-size'] < 0 || $this->options['vertical-size'] > 11 ? 3 : $this->options['vertical-size'];
$this->options['header-text-variant'] = $this->options['header-variant'] == 'light' ? 'body' : 'white';
$this->options['header-border-variant'] = $this->options['header-variant'] == 'light' ? '' : $this->options['header-variant'];
$this->options['body-text-variant'] = $this->options['body-variant'] == '' ? 'body' : 'white';
if (!is_array($this->options['nav-class'])) {
$this->options['nav-class'] = [$this->options['nav-class']];
}
@ -177,13 +192,13 @@ class BootstrapTabs extends Helper
{
$html = '';
if ($this->options['card']) {
$html .= $this->genNode('div', ['class' => ['card']]);
$html .= $this->genNode('div', ['class' => ['card-header']]);
$html .= $this->genNode('div', ['class' => array_merge(['card'], ["border-{$this->options['header-border-variant']}"])]);
$html .= $this->genNode('div', ['class' => array_merge(['card-header'], ["bg-{$this->options['header-variant']}", "text-{$this->options['header-text-variant']}"])]);
}
$html .= $this->genNav();
if ($this->options['card']) {
$html .= '</div>';
$html .= $this->genNode('div', ['class' => ['card-body']]);
$html .= $this->genNode('div', ['class' => array_merge(['card-body'], ["bg-{$this->options['body-variant']}", "text-{$this->options['body-text-variant']}"])]);
}
$html .= $this->genContent();
if ($this->options['card']) {
@ -195,11 +210,11 @@ class BootstrapTabs extends Helper
private function genVerticalTabs()
{
$html = $this->genNode('div', ['class' => ['row', ($this->options['card'] ? 'card flex-row' : '')]]);
$html .= $this->genNode('div', ['class' => ['col-' . $this->options['vertical-size'], ($this->options['card'] ? 'card-header border-right' : '')]]);
$html = $this->genNode('div', ['class' => array_merge(['row', ($this->options['card'] ? 'card flex-row' : '')], ["border-{$this->options['header-border-variant']}"])]);
$html .= $this->genNode('div', ['class' => array_merge(['col-' . $this->options['vertical-size'], ($this->options['card'] ? 'card-header border-right' : '')], ["bg-{$this->options['header-variant']}", "text-{$this->options['header-text-variant']}", "border-{$this->options['header-border-variant']}"])]);
$html .= $this->genNav();
$html .= '</div>';
$html .= $this->genNode('div', ['class' => ['col-' . (12 - $this->options['vertical-size']), ($this->options['card'] ? 'card-body2' : '')]]);
$html .= $this->genNode('div', ['class' => array_merge(['col-' . (12 - $this->options['vertical-size']), ($this->options['card'] ? 'card-body2' : '')], ["bg-{$this->options['body-variant']}", "text-{$this->options['body-text-variant']}"])]);
$html .= $this->genContent();
$html .= '</div>';
$html .= '</div>';