Theme provider3.0
The theme provider component is a non-visual component, designed to help you set the correct theme for your Anchor components.
Installation
npm i @tryg/ui-libraryUsage
Provide the Theme Provider with the brand and branch you want to use. The component will load the correct styles for the brand and branch you provide.
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-theme-provider';
defineCustomElement();
</script>
<anchor-theme-provider branch="dk" brand="trygdk">Your content here</anchor-theme-provider>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-theme-provider branch="dk" brand="trygdk">Your content here</anchor-theme-provider>You are responsible for pairing the correct brand and branch. If you provide an incorrect brand or branch, the component will not load the correct styles.
To use the base theme for each branch, provide the branch name and set the brand to "base".
Fonts
The Theme Provider will only load the CSS for basic values for the brand and branch you provide. You will have to make sure that your page has the correct fonts loaded.
API
anchor-theme-provider
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
branch | branch | string | undefined | |
brand | brand | string | undefined |
Built with StencilJS
Grid column
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.
Theme utility
This documentation provides information on how to use the provided JavaScript functions for managing and applying styles and themes.