You are here:
LayoutItem Lightning Web Component ReadMe (Managed Package)
For the managed package runtime, this page contains a LayoutItem LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
The LayoutItem Lightning Web Component is the basic element inside the parent Layout Lightning Web Component container, grouping content together to create sections inside the parent container. You can add one or more c-layout-item components inside the c-layout component.
Available c-layout-item Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
size |
1 through 12 |
number |
Sets the relative space the layout item occupies. Applies to all device-types. |
|
smallDeviceSize |
1 through 12 |
number |
Sets the relative space the layout item occupies on device-types larger than mobile. Defaults to same as size attribute if no value provided. |
|
mediumDeviceSize |
1 through 12 |
number |
Sets the relative space the layout item occupies on device-types larger than tablet. Defaults to same as size attribute if no value provided. |
|
largeDeviceSize |
1 through 12 |
number |
Sets the relative space the layout item occupies on device-types larger than desktop. Defaults to same as size attribute if no value provided. |
|
flexibility |
auto (columns grow or shrink equally as space allows), shrink (columns shrink equally as space decreases), no-shrink (columns don't shrink as space reduces), grow (columns grow equally as space increases), no-grow (columns don't grow as space increases), no-flex (columns don't grow or shrink as space changes) |
string |
Determines if the grid item is fluid so that it absorbs any extra space in its container or if it shrinks when there is less space. For multiple options, use a comma to separate each option, such as 'auto, no-shrink'. |
|
alignment-bump |
left, top, right, bottom |
string |
Specifies a direction to bump the alignment of adjacent layout items. |
|
padding |
horizontal-small, horizontal-medium, horizontal-large, around-small, around-medium, around-large |
string |
Adds padding to either the right or left side of the layout item, or to all sides of the layout item. |
Example c-layout-item Component
<c-layout class="custom-slds-grid">
<c-layout-item size="3">
{item.name}
</c-layout-item>
<c-layout-item size="1">
{item.name}
</c-layout-item>
<c-layout-item
size="1"
alignment-bump="left"
padding="around-medium"
flexibility="auto,no-grow,no-shrink"
>
{item.name}
</c-layout-item>
<c-layout-item size="1">
{item.name}
</c-layout-item>
</c-layout>Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19
The LayoutItem Lightning Web Component is the basic element inside the parent Layout Lightning Web Component container, grouping content together to create sections inside the parent container. You can add one or more c-layout-item components inside the c-layout component.
Available c-layout-item Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
size |
1 through 12 |
number |
Sets the relative space the layout item occupies. Applies to all device-types. |
|
smallDeviceSize |
1 through 12 |
number |
Sets the relative space the layout item occupies on device-types larger than mobile. Defaults to same as size attribute if no value provided. |
|
mediumDeviceSize |
1 through 12 |
number |
Sets the relative space the layout item occupies on device-types larger than tablet. Defaults to same as size attribute if no value provided. |
|
largeDeviceSize |
1 through 12 |
number |
Sets the relative space the layout item occupies on device-types larger than desktop. Defaults to same as size attribute if no value provided. |
|
flexibility |
auto (columns grow or shrink equally as space allows), shrink (columns shrink equally as space decreases), no-shrink (columns don’t shrink as space reduces), grow (columns grow equally as space increases), no-grow (columns don’t grow as space increases), no-flex (columns don’t grow or shrink as space changes) |
string |
Determines if the grid item is fluid so that it absorbs any extra space in its container or if it shrinks when there is less space. For multiple options, use a comma to separate each option, such as `auto, no-shrink'. |
|
alignment-bump |
left, top, right, bottom |
string |
Specifies a direction to bump the alignment of adjacent layout items. |
|
padding |
horizontal-small, horizontal-medium, horizontal-large, around-small, around-medium, around-large |
string |
Adds padding to either the right or left side of the layout item, or to all sides of the layout item. |
Example c-layout-item Component
<c-layout class="custom-slds-grid">
<c-layout-item size="3">
{item.name}
</c-layout-item>
<c-layout-item size="1">
{item.name}
</c-layout-item>
<c-layout-item
size="1"
alignment-bump="left"
padding="around-medium"
flexibility="auto,no-grow,no-shrink"
>
{item.name}
</c-layout-item>
<c-layout-item size="1">
{item.name}
</c-layout-item>
</c-layout>