Container3.0
The anchor-container is a component that serves as a generic container for other components or content. It's designed to be flexible and reusable across different parts of an application.
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 } from '@tryg/ui-library/dist/components/anchor-container';
defineCustomElement();
</script>
<anchor-container>This is an error message.</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>This is an error message.</anchor-container>API
anchor-container
CSS Custom Properties
| Name | Description |
|---|---|
--container-margin-lg | Set the margin of the container at the large screen size. |
--container-margin-md | Set the margin of the container at the medium screen size. |
--container-margin-sm | Set the margin of the container at the small screen size. |
--container-margin-xl | Set the margin of the container at the extra large screen size. |
--container-margin-xs | Set the margin of the container at the smallest screen size. |
--container-width-max | Set the maximum width of the page content. |
Built with StencilJS