Php Templates - Bootstrap5 components

Instalation & Setup

• composer require php-templates/bootstrap5 or
• download project and include Bootstrap.php file.

use PhpTemplates\Bootstrap;

$cfg = new Config('default', __DIR__);
$eventHolder = new EventHolder();
$viewFactory = new Template( __DIR__.'/results', $cfg, $eventHolder);

$bs = new Bootstrap;
$bs->mount($viewFactory);

Accordion

props

• :items - an associative array holding accordion-item::id => accordion-item::title
• class - extra classes to .accordion
• toggle - if true/no-value, prevent multiple items to be opened at same time
• open - true/no-value to render an accordion that’s expanded

slots

• add each accordion body under a slot with name coresponding to accordion-item::id

lorem

ipsum

```

will result:

<div class="accordion open " id="accordion-42a87caa5e4606fbccab0def3569c8df">
      <div class="accordion-item">
      <h2 class="accordion-header" id="ah-lorem">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#ac-lorem" aria-expanded="true" aria-controls="lorem">
        Lorem      </button>
      </h2>
      <div id="ac-lorem" class="accordion-collapse collapse show" aria-labelledby="ah-lorem" data-bs-parent="#accordion-42a87caa5e4606fbccab0def3569c8df">
        <div class="accordion-body">
        <div>
        lorem
    </div>
      </div>
      </div>
    </div>
      <div class="accordion-item">
      <h2 class="accordion-header" id="ah-ipsum">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#ac-ipsum" aria-expanded="false" aria-controls="ipsum">
        Ipsum      </button>
      </h2>
      <div id="ac-ipsum" class="accordion-collapse collapse " aria-labelledby="ah-ipsum" data-bs-parent="#accordion-42a87caa5e4606fbccab0def3569c8df">
        <div class="accordion-body">
        <div>
        ipsum
    </div>
      </div>
      </div>
    </div>
  </div>

Alert

props

• type - bs5 theme colors (primary, secondary, etc)
• title - alert h4 title (optional)
• dismiss - display dismiss button
• icon - hide alert icon if false

slots

• default - alert message

• title - title override, if a complex one is needed

• icon - slot for icon

Aww yeah, you successfully read this important alert message

```

will result:

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <div class="d-flex">
          <div class="d-flex align-items-center pe-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
                          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                      </svg>
              </div>
        <div class="flex-fill">
                <h4 class="alert-heading">Well done</h4>
        <p class="m-0">Aww yeah, you successfully read this important alert message</p>
    </div>
  </div>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>

Badge

props

• v - bs theme colors
• class - extra classes

slots

• default - text value of the badge

12

will result:

12 ```

Breadcrumb

props

• :items - an array holding items of form ['label'=>'Displayed', 'value'=>'href']

• class - extra classes

```

will result:

<nav aria-label="breadcrumb" class="">
  <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">Product</li>
        </ol>
</nav>

Button

props

• v - variant - primary, secondary, etc

• class - extra classes

• href - if given, it will render an anchor instead of button

• size - sm, lg (btn-*)

• disabled - true/no value = disabled

OK OK

will result:

OK OK ```

Card

props

• header - card header text
• footer - card footer text
• img - card image src
• alt - card image alt
• class - custom img class

slots

• default - .card-body content

• header - .card-header content

• above - above .card-body

• below - below .card-body

• footer - .card-footer content

Sit amen ```

will result:

<div class="card">
      <div class="card-header">
      Lorem    </div>
    <div class="card-body">
        Sit amen
  </div>
      <div class="card-footer">
      Ipsum    </div>
  </div>

Dropdown

props

• type - dropdown(default), dropup, dropstart, dropend
• v - primary, secondary, etc
• size - sm, md, lg, etc
• id - button id
• label - button text
• ul_class - list class
• :items - an array of items where item like ['type' => 'title,text,separator or item', 'text' => 'item text', 'href' => $optional, 'disabled' => $optional, 'active' => $optional, '_attrs' => $optionalItemBinds]

slots

• default - the dropdown content if custom content required

• btn-inner - button childnode

will result:

Btn Label

• dd Title

• ---

• dd Text
• dd Item

```

Modal

props

• title - modal title
• fade - if false, no fade effect applied
• size - sm, md, lg, etc
• id - modal id
• class - modal class
• esc - if should close on esc keypress
• scrollable - if modal is scrollable
• centered - if modal should be vertically centered

slots

• default - modal body

• header - .modal-header childNodes

• footer - .modal-footer childNodes

modal body Btn ```

will result:

<div class="modal fade" id="mymodal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="mymodal" aria-hidden="true">
  <div class="modal-dialog ">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          Demo modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
            modal body
      </div>
              <div class="modal-footer">
            <button class="btn btn-primary ">
    Btn
  </button>
        </div>
          </div>
  </div>
</div>

Nav

props

• :items - an array holding items of form ['label'=>'Displayed', 'value'=>'href', 'disabled'=>$optional, 'active'=>$optional]

• class - extra classes

will result:

• Lorem
• ipsum

```

Tabs

props

• :items - associative array holding $tab_id => $label
• value - selected tab by id
• vertical - if you want tabs to be vertical
• class - extra .nav-tabs classes
• id - .nav-tabs id
• fade - if false, no fade effect

slots

• one slot for each $tab_id may be passed

lorem

ipsum

```

will result:

<div >
  <ul class="nav nav-tabs" id="t-638a8a56c3361" role="tablist">
          <li class="nav-item" role="presentation">
        <button class="nav-link " id="lorem-tab" data-bs-toggle="tab" data-bs-target="#lorem" type="button" role="tab" aria-controls="lorem" aria-selected="true">Lorem</button>
      </li>
          <li class="nav-item" role="presentation">
        <button class="nav-link active" id="ipsum-tab" data-bs-toggle="tab" data-bs-target="#ipsum" type="button" role="tab" aria-controls="ipsum" aria-selected="true">Ipsum</button>
      </li>
      </ul>
  <div class="tab-content">
          <div class="tab-pane fade" id="lorem" role="tabpanel" aria-labelledby="lorem-tab">
         <div>lorem</div>
      </div>
          <div class="tab-pane fade show active" id="ipsum" role="tabpanel" aria-labelledby="ipsum-tab">
         <div>ipsum</div>
      </div>
      </div>
</div>

Offcanvas

props

• pos - .offcanvas position, default top
• class - .offcanvas extra classes
• id - .offcanvas id
• scroll - body scroll allowed or not
• backdrop - .offcanvas backdrop

slots

• default - offcanvas body child nodes

Toggle top offcanvas

... ```

will result:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" data-bs-scroll="false" data-bs-backdrop="false" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Lorem Ipsum</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
      ...
  </div>
</div>

Form group

Create form-group structures in a single line using b-form-group tag. You can create input groups, prepends, appends, inline forms and column forms of any type.

props

• type - text, textarea, checkbox, select, switch, etc...
• class - form-group extra class
• size - form-control size
• options - when type = select, an array of [label=>text,value=>value] structures
• prepend - prepend text
• append - append text
• p-bind is present on form-control to pass forward any extra attribute

slots

• prepend - prepend custom, if more then a text is needed
• append - append custom, if more then a text needed