Skip to content

linagora/esn-frontend-application-grid

Folders and files

NameName
Last commit message
Last commit date
Jun 28, 2023
Jul 23, 2020
Jul 27, 2020
Jul 23, 2020
Jul 27, 2020
Jul 29, 2020
Jul 27, 2020
Jul 27, 2020
Jul 23, 2020

Repository files navigation

Built With Stencil

ESN Application Grid

This is a project for building the application grid component as a standalone Web Component using Stencil that is used within OpenPaaS, LinShare, and Twake.

Component details

Properties

Please refer to ./src/components/esn-app-grid/readme.md.

CSS Variables

CSS Variables Description Example Default
--primary-color-h The Hue value of the primary color. 0 undefined
--primary-color-s The Saturation value of the primary color. 0% undefined
--primary-color-l The Lightness value of the primary color. 100% undefined
--accent-color-h The Hue value of the accent/secondary color. 0 undefined
--accent-color-s The Saturation value of the accent/secondary color. 0% undefined
--accent-color-l The Lightness value of the accent/secondary color. 100% undefined

Importing the component

Using the component in another app is quite straightforward, you just have to register them somewhere in your app (preferrably where you initialize your app):

import { applyPolyfills, defineCustomElements } from 'esn-frontend-application-grid/loader';

applyPolyfills().then(() => defineCustomElements());

Note that StencilJS will utilize ES Modules by default and lazy-load the components. The lazy-loading of a component will happen at its connectedCallback phase. If you want to disable lazy-loading, you can opt out of ES Modules and use CommonJS instead (do note that this way it will load the entire list of components, even the unused ones):

import { applyPolyfills, defineCustomElements } from 'esn-frontend-application-grid/loader/index.cjs';

applyPolyfills().then(() => defineCustomElements());

Development workflow

Run the command below and Stencil will build and watch for any changes to rebuild:

npm run build:watch

Then if you have npm link-ed properly, every rebuild in this module should trigger a rebuild in the module(s) using it.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published