Column
<k-column>
This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.
The Column component can be used within a Grid component to layout elements in a very convenient way. The Grid is based on 12 columns by default and each column can change its width with the width property:
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sticky |
boolean |
– |
Whether the column should stick to the window edge when scrolling
|
| width |
string 1/6, 1/4, 1/3, 1/2, 2/3, 3/4, 5/6, 1/1 |
– |
Width of the column in the grid
|
Slots
| Slot | Description |
|---|---|
| default |
Example
<k-grid>
<k-column width="1/2"></k-column>
<k-column width="1/4"></k-column>
<k-column width="1/4"></k-column>
</k-grid>The grid takes care of the responsiveness of the elements and also of wrapping lines automatically.
CSS classes
.k-column