Columns

use Kompo\`Columns`;

Columns::form(
   Html::form('Column 1')->class('bg-gray-200'),
   Html::form('Column 2')->class('bg-gray-400')
)->class('border border-gray-500')

//To remove the gutters:
Columns::form(...)
   ->noGutters()

//To center vertically:
Columns::form(...)
   ->centerVertically()

//Bootstrap's grid system
//NOTE: That's the only Bootstrap feature included in Kompo.
Columns::form(
    Html::form('Col 1')->col('col-3'),
    Html::form('Col 2')->col('col-6'),
    Html::form('Col 3')->col('col-3')
)->class('border border-gray-500')
The only Bootstrap feature included in Kompo is the Bootstrap Grid system, that works wonders when it comes to placing content into columns.

You may use all of Bootstrap's `col-` classes in Kompo by chaining the `col` method. The `offset-col` and all responsive breakpoints are accepted too: `col-sm-`, `col-md-`, `col-lg-` and `col-xl-`.

If no indication is given for displaying the columns, they will default to an equal column grid and align to the top of the grid.


Chainable methods

Preview

Columns specific

Method
Parameters
Comment
centerVertically
none
Centers the content vertically in the columns on md screens only.
Note This is the default setting, no need to set it initially.
notResponsive
none
The content will remain in columns no matter the viewport - i.e. the columns will not rearrange, even on mobile.
breakpoint
string $breakpoint
A breakpoint value: 'xs', 'sm', 'md', 'lg', 'xl'.
The columns will re-arrange at that specific breakpoint. The default breakpoint is 'md'.
noGutters
none
Removes the gutters in the columns grid (no padding between the columns).
alignStart
none
Aligns the items vertically to the top.
alignCenter
none
Centers the items vertically.
alignEnd
none
Aligns the items vertically to the bottom.
alignBaseline
none
Aligns the items according to the baseline.
alignStretch
none
Stretches the items vertically.

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.