UI Sidebar

Include this stylesheet in your code.

<link rel="stylesheet" type="text/css" href="/css/sidebar.css">

Then build the sidebar like this.

<?php


$sidebar = new Barebone\Bootstrap4\UI\Sidebar(
    title: 'Sidebar Title', 
    width: '300px'
);

    $SidebarActionSlideOut = new Barebone\Bootstrap4\UI\SidebarActionSlideOut(
        title: 'Flyout Add something', 
        width: '60%'
    );
    $SidebarActionSlideOut->addToolbarItem('icon add', "alert('clicked add!')");
    $SidebarActionSlideOut->addToolbarItem('icon edit', "alert('clicked edit!')");
    $sidebar->addAction(
        'Action Add something', 
        'icon add', 
        $SidebarActionSlideOut->getCallback(), 
        $SidebarActionSlideOut
    );
    
    $SidebarActionSlideOut = new Barebone\Bootstrap4\UI\SidebarActionSlideOut(
        title: 'Flyout Edit something', 
        width: '60%'
    );
    
    $SidebarActionSlideOut->addToolbarItem('icon cut', "alert('clicked cut!')");
    $SidebarActionSlideOut->addToolbarItem('icon page_copy', "alert('clicked copy!')");
    $SidebarActionSlideOut->addToolbarItem('icon page_paste', "alert('clicked paste!')");
    
    $sidebar->addAction(
        'Action Edit something', 
        'icon edit', 
        $SidebarActionSlideOut->getCallback(), 
        $SidebarActionSlideOut
    );

$sidebar->render();

• Barebone\Bootstrap4\UI\SidebarActionSlideOut

  Barebone\Bootstrap4\UI\SidebarActionSlideOut
  • [P] $id : string
  • [P] $title : string
  • [P] $width : string
  • [P] $toolbar : array
  • [P] $items : array
  • [P] $slideout : mixed
  • [M] __construct( $title, $width ) : void
  • [M] addToolbarItem( string $icon, string $callback ) : void
  • [M] addItem( Barebone\Bootstrap4\Element $item ) : void
  • [M] show() : void
  • [M] getId() : void
  • [M] getCallback() : void
  • [M] render() : void