PHP code example of friendsofcake / bootstrap-ui
1. Go to this page and download the library: Download friendsofcake/bootstrap-ui library . Choose the download type require .
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
friendsofcake / bootstrap-ui example snippets
declare(strict_types=1);
namespace App\View;
use BootstrapUI\View\UIView;
class AppView extends UIView
{
/**
* Initialization hook method.
*/
public function initialize(): void
{
// Don't forget to call parent::initialize()
parent::initialize();
}
}
declare(strict_types=1);
namespace App\View;
use BootstrapUI\View\UIViewTrait;
use Cake\View\View;
class AppView extends View
{
use UIViewTrait;
/**
* Initialization hook method.
*/
public function initialize(): void
{
parent::initialize();
// Call the initializeUI method from UIViewTrait
$this->initializeUI();
}
}
// in the <head>
echo $this->Html->css('BootstrapUI.bootstrap.min');
echo $this->Html->css(['BootstrapUI./font/bootstrap-icons', 'BootstrapUI./font/bootstrap-icon-sizes']);
echo $this->Html->script(['BootstrapUI.bootstrap.bundle.min']);
echo $this->Html->css('bootstrap.min');
echo $this->Html->css(['/font/bootstrap-icons', '/font/bootstrap-icon-sizes']);
echo $this->Html->script(['bootstrap.bundle.min']);
echo $this->Html->css('/path/to/bootstrap.css');
echo $this->Html->css(['/path/to/bootstrap-icons.css', '/path/to/bootstrap-icon-sizes.css']);
echo $this->Html->script(['/path/to/bootstrap.bundle.js']);
echo $this->Form->create($article);
echo $this->Form->control('title');
echo $this->Form->control('published', ['type' => 'checkbox']);
echo $this->Form->button('Submit');
echo $this->Form->end();
use BootstrapUI\View\Helper\FormHelper;
echo $this->Form->create($article, [
'align' => [
FormHelper::GRID_COLUMN_ONE => 4, // first column (span over 4 columns)
FormHelper::GRID_COLUMN_TWO => 8, // second column (span over 8 columns)
],
]);
echo $this->Form->control('title');
echo $this->Form->control('published', ['type' => 'checkbox']);
echo $this->Form->submit();
echo $this->Form->end();
use BootstrapUI\View\Helper\FormHelper;
echo $this->Form->create($article, [
'align' => [
// column sizes for the `sm` screen-size/breakpoint
'sm' => [
FormHelper::GRID_COLUMN_ONE => 6,
FormHelper::GRID_COLUMN_TWO => 6,
],
// column sizes for the `md` screen-size/breakpoint
'md' => [
FormHelper::GRID_COLUMN_ONE => 4,
FormHelper::GRID_COLUMN_TWO => 8,
],
],
]);
echo $this->Form->control('title');
echo $this->Form->control('published', ['type' => 'checkbox']);
echo $this->Form->button('Submit');
echo $this->Form->end();
[
FormHelper::GRID_COLUMN_ONE => 2,
FormHelper::GRID_COLUMN_TWO => 10,
]
echo $this->Form->create($article, [
'align' => 'inline',
]);
echo $this->Form->control('title', ['placeholder' => 'Title']);
echo $this->Form->control('published', ['type' => 'checkbox']);
echo $this->Html->div('col-auto', $this->Form->button('Submit'));
echo $this->Form->end();
// for all forms
echo $this->Form->setConfig([
'spacing' => 'mb-6',
]);
// for a specific form
echo $this->Form->create($entity, [
'spacing' => 'mb-6',
]);
// for a specific control (default/horizontal aligned forms only)
echo $this->Form->control('title', [
'spacing' => 'mb-6',
]);
echo $this->Form->control('title', [
'container' => [
'class' => 'my-title-control',
'data-meta' => 'meta information',
],
]);
echo $this->Form->control('email', [
'prepend' => '@',
]);
echo $this->Form->control('amount', [
'prepend' => ['$', '0.00'],
]);
echo $this->Form->control('amount', [
'prepend' => [
'$',
'0.00',
[
'size' => 'lg',
'class' => 'custom',
'custom' => 'attribute',
],
],
]);
echo $this->Form->control('option_1', [
'type' => 'checkbox',
'inline' => true,
]);
echo $this->Form->control('option_2', [
'type' => 'checkbox',
'inline' => true,
]);
echo $this->Form->control('option', [
'type' => 'checkbox',
'switch' => true,
]);
echo $this->Form->control('title', [
'label' => [
'floating' => true,
],
]);
echo $this->Form->control('title', [
'help' => 'Help text',
]);
echo $this->Form->control('title', [
'help' => [
'id' => 'custom-help',
'class' => 'custom',
'data-custom' => 'attribute',
'content' => 'Help text',
],
]);
echo $this->Form->control('title', [
'tooltip' => 'Tooltip text',
]);
echo $this->Form->control('title', [
'tooltip' => 'Tooltip text',
'templates' => [
'tooltip' => '<span data-bs-toggle="tooltip" title="{{content}}" class="material-icons">info</span>',
],
]);
$this->Form->setConfig([
'feedbackStyle' => \BootstrapUI\View\Helper\FormHelper::FEEDBACK_STYLE_TOOLTIP,
'formGroupPosition' => \BootstrapUI\View\Helper\FormHelper::POSITION_ABSOLUTE,
]);
// ...
echo $this->Form->control('title');
$this->Flash->success('Your Success Message.');
$this->Flash->set('Your Dark Message.', ['params' => ['class' => 'dark']]);
$this->Flash->success('Message without icon.', [
'params' => [
'icon' => false,
],
]);
$this->Flash->success('Message with custom icon.', [
'params' => [
'icon' => 'mic-mute-fill',
],
]);
$this->Flash->success('Message with custom icon options.', [
'params' => [
'icon' => [
'name' => 'mic-mute-fill',
'size' => '2xl',
'class' => 'foo bar me-2',
'data-custom' => 'attribute',
],
],
]);
$this->Flash->success('Message with custom icon HTML.', [
'params' => [
'icon' => '<span class="material-icons">volume_off</span>',
],
]);
$this->loadHelper('Flash', [
'className' => 'BootstrapUI.Flash',
'icon' => false,
]);
$this->loadHelper('Flash', [
'className' => 'BootstrapUI.Flash',
'icon' => [
'size' => '2xl',
'class' => 'foo bar me-2',
'data-custom' => 'attribute',
],
]);
$this->loadHelper('Flash', [
'className' => 'BootstrapUI.Flash',
'iconMap' => [
'default' => 'info-circle-fill',
'success' => 'check-circle-fill',
'error' => 'exclamation-triangle-fill',
'info' => 'info-circle-fill',
'warning' => 'exclamation-triangle-fill',
],
]);
$this->Flash->success('Message with different icon set.', [
'params' => [
'icon' => [
'namespace' => 'fas',
'prefix' => 'fa',
'name' => 'microphone-slash',
'size' => '2xl',
],
],
]);
$this->loadHelper('Html', [
'className' => 'BootstrapUI.Html',
'iconDefaults' => [
'namespace' => 'fas',
'prefix' => 'fa',
],
]);
$this->loadHelper('Flash', [
'className' => 'BootstrapUI.Flash',
'iconMap' => [
'default' => 'info-circle',
'success' => 'check-circle',
'error' => 'exclamation-triangle',
'info' => 'info-circle',
'warning' => 'exclamation-triangle',
],
]);
echo $this->Html->badge('Text');
echo $this->Html->badge('Text', [
'class' => 'danger',
]);
echo $this->Html->badge('Text', [
'tag' => 'div',
]);
echo $this->Html->icon('mic-mute-fill');
echo $this->Html->icon('mic-mute-fill', [
'size' => '2xl',
]);
echo $this->Html->icon('microphone-slash', [
'namespace' => 'fas',
'prefix' => 'fa',
]);
$this->loadHelper('Html', [
'className' => 'BootstrapUI.Html',
'iconDefaults' => [
'namespace' => 'fas',
'prefix' => 'fa',
],
]);
echo $this->Breadcrumbs
->add('Home', '/')
->add('Articles', '/articles')
->add('View')
->render();
echo $this->Paginator->first();
echo $this->Paginator->prev();
echo $this->Paginator->numbers();
echo $this->Paginator->next();
echo $this->Paginator->last();
echo $this->Paginator->first('«', ['label' => __('Beginning')]);
echo $this->Paginator->prev('‹', ['label' => __('Back')]);
echo $this->Paginator->next('›', ['label' => __('Forward')]);
echo $this->Paginator->last('»', ['label' => __('End')]);
echo $this->Paginator->links();
echo $this->Paginator->links([
'first' => '❮❮',
'prev' => true,
'next' => true,
'last' => [
'label' => 'End',
'text' => '❯❯',
],
]);
echo $this->Paginator->links([
'size' => 'lg',
]);
$this->loadHelper('Paginator', [
'className' => 'BootstrapUI.Paginator',
'labels' => [
'prev' => 'previous',
'next' => 'next',
],
]);
$this->extend('../layout/TwitterBootstrap/dashboard');