Grid column3.0
The grid-column component is a non-visual layout component that can be used to create a grid layout. It works as a child component of the grid-row component.
Ads by Tryg Careers
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement as defineCustomContainerElement } from '@tryg/ui-library/dist/components/anchor-container';
import { defineCustomElement as defineCustomRowElement } from '@tryg/ui-library/dist/components/anchor-grid-row';
import { defineCustomElement as defineCustomColumnElement } from '@tryg/ui-library/dist/components/anchor-grid-column';
defineCustomContainerElement();
defineCustomRowElement();
defineCustomColumnElement();
</script>
<anchor-container>
<anchor-grid-row>
<anchor-grid-column column="1">
1
</anchor-grid-column>
<anchor-grid-column column="1">
2
</anchor-grid-column>
<anchor-grid-column column="1">
3
</anchor-grid-column>
<anchor-grid-column column="1">
4
</anchor-grid-column>
</anchor-grid-row>
</anchor-container>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-container>
<anchor-grid-row>
<anchor-grid-column column="1">
1
</anchor-grid-column>
<anchor-grid-column column="1">
2
</anchor-grid-column>
<anchor-grid-column column="1">
3
</anchor-grid-column>
<anchor-grid-column column="1">
4
</anchor-grid-column>
</anchor-grid-row>
</anchor-container>API
anchor-grid-column
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
column | column | Set the number of columns the grid-column should span in the default screen size (mobile). | 1 | 2 | 3 | 4 | undefined |
lgColumn | lg-column | Set the number of columns the grid-column should span in the large screen size. | 1 | 10 | 11 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | undefined |
mdColumn | md-column | Set the number of columns the grid-column should span in the medium screen size. | 1 | 10 | 11 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | undefined |
smColumn | sm-column | Set the number of columns the grid-column should span in the small screen size. | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined |
xlColumn | xl-column | Set the number of columns the grid-column should span in the extra large screen size. | 1 | 10 | 11 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | undefined |
Built with StencilJS