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

Alert

use Kompo\`Alert`;

Alert::form('Warning! I have some important info!'),

Alert::form('Lorem ipsum ... tempor.')
   ->icon('icon-check'),

Alert::form('Lorem ipsum ... tempor.')
   ->class('vlAlertSuccess')
   ->icon('icon-check'),
   
Alert::form('Please correct the errors in the Form.')
   ->class('vlAlertError')
   ->icon('icon-attention')

//Or use them as Interactions
Button::form('Show Alert')
   ->alert('Hello mate!', 'icon-search', 'vlAlertSuccess')

Chainable methods

Preview

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.