Components
Triggers Blocks Layouts Fields Menu Items
Cards
Table Masonry Grid Horizontal

Panel

use Kompo\`Panel`;

 //'panel-id' is the HTML id attribute
Panel::form(
   Html::form('I am shown on initial load.')
)->id('panel-id'),

//An example trigger to load a view in the panel
Button::form('Load back-end view')
   ->get('panel-route')
   ->inPanel('panel-id'),

//An example trigger to load another form in the panel
Button::form('Load back-end object')
   ->get('panel-form-route')
   ->inPanel('panel-id')

//Finally, if you don't want to bother naming your Panels, 
//you may use any of these five predefined Panel components
Panel1::form()
Panel2::form()
Panel3::form()
Panel4::form()
Panel5::form()
//And you may load into them
Button::form('1')->get('panel-simple-route', ['number' => 1])->inPanel1()
Button::form('2')->get('panel-simple-route', ['number' => 2])->inPanel2()
Button::form('3')->get('panel-simple-route', ['number' => 3])->inPanel3()
Button::form('4')->get('panel-simple-route', ['number' => 4])->inPanel4()
Button::form('5')->get('panel-simple-route', ['number' => 5])->inPanel5()

Chainable methods

Preview

Panel specific

Method
Parameters
Comment
hidesOnLoad
string $hidingId
The id of the element to be hidden.
Hides an element after the content is loaded in the Panel.

Html attributes

Method
Parameters
Comment
id
string $id
The id attribute.
Sets the id attribute of the element.
class
string $classes
The class attribute.
Sets the class attribute of the element.
For multiple classes, use a space-separated string.
replaceClass
string $classes
Adds classes to the element. TODO: replace with overwriteClass or smth...
removeClass
string $classes
Removes a class or space separated classes from the element.
style
string $styles
The CSS style attribute.
Sets the style attribute of the element.
For multiple styles, use a ";" separated string.
attr
array $attributes
Associative array of attribute names and values.
Sets HTML attributes to the element. For example:
->attr([
'title' => 'Some title',
'data-target' => '#target-id'
])
title
string $title
The HTML title attribute
Sets the HTML title attribute of the element.

Layout grids

Method
Parameters
Comment
col
string $col
The col attribute. Ex: `col-8`.
Sets a specific col value when the element is used inside `Columns`. By default, the columns get equal widths. A 12 column grid system is used here (same as Bootstrap CSS). For example:
Columns::form(
Html::form('Column 1')->col('col-8'),
Html::form('Column 2')->col('col-4')
)

Testing TDD

Method
Parameters
Comment
dusk
array $selector
Dusk selector attribute.
Sets a dusk selector attribute to the element.

Customization

Method
Parameters
Comment
data
array $data
Key/value associative array.
Pass additional data to the element that can be accessed from the Front-end in the `data` property of the object - especially useful if you wish to customize or add new features to the component.