Skip to content

Development: BootstrapHelper Component

Sami Mokaddem edited this page Jan 13, 2021 · 3 revisions

Overview

The BootstrapHelper.php contains classes providing utility functions to create UI components. Its purpose and usage is similar to cakephp's HtmlHelper helper.

Bootstrap Tabs

Tabs can be used to create navigation components that can be integrated into cards.

Various options can be set to modify its style.

  • 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

Example:

$this->Bootstrap->Tabs([
    'pills' => true,
    'card' => true,
    'header-variant' => 'warning',
    'data' => [
        'navs' => [
            'tab1',
            ['text' => 'tab2', 'active' => true],
            ['html' => '<b>tab3</b>', 'disabled' => true],
        ],
        'content' => [
            'body1',
            '<i>body2</i>',
            '~body3~'
        ]
    ]
]);
Clone this wiki locally