lib.nodejs.base.template
This package contains everything frontend-related of our informaticon template. This package is published to npm as @information/lib.nodejs.base.template. It is a new version of the @informaticon/base-assets package (Guide for migration).
Prerequisites
Your project is already prepared to use npm packages, and you already have a bundler like Webpack, Rollup, or something similar set up.
If you are unsure on how to set that up in a Play! project, check out the internal Using Webpack with Play! Framework guide.
Contributions
Please see CONTRIBUTING.md for information on contributions to this package.
Usage
-
add the lib.play.base.template dependency in your project. Please see the README for more information.
🤝 Compatibility
Version lib.play.base.template
0.1.0+
1.0.0+
-
install the package via npm
npm i @informaticon/lib.nodejs.base.template -D
-
import and init components used in your application
The needed stylesheets are already imported via the InfComponents
import { InfNotification } from '@informaticon/lib.nodejs.base.template/notification'; import { InfCollapsible } from '@informaticon/lib.nodejs.base.template/collapsible'; import { InfConfirm } from '@informaticon/lib.nodejs.base.template/confirm'; import { InfDialog } from '@informaticon/lib.nodejs.base.template/dialog'; import { InfNavToggle } from '@informaticon/lib.nodejs.base.template/nav'; import { InfPopup } from '@informaticon/lib.nodejs.base.template/popup'; import { InfTabulator } from '@informaticon/lib.nodejs.base.template/table'; import { InfTour } from '@informaticon/lib.nodejs.base.template/tour'; import { ChoicesController } from '@informaticon/lib.nodejs.base.template/choices'; import '../stylesheets/main.scss'; export class Loader { constructor() { document.addEventListener('DOMContentLoaded', () => this.ready()); } private ready(): void { let collapsibles: InfCollapsible[] = InfCollapsible.init(); let confirms: Map<string, InfConfirm> = InfConfirm.init(); let dialogs: InfDialog[] = InfDialog.init(); let navToggle: InfNavToggle = InfNavToggle.init(); let popups: InfPopup[] = InfPopup.init(); let tabulators: InfTabulator[] = InfTabulator.init(); let tours: Map<string, InfTour> = InfTour.init(); new ChoicesController().ready(); // the noficiation don't have to be initalized InfNotification.showInfo('Hello World!'); } } new Loader();
The init functions provide a Map<> structure where you can access the specific item for components that are identified by a specific name, other components are simply returned as an array of components.
-
add the main stylesheet to enable informaticon layout in your
main.css
file@import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/layout/main.css';
You can overwrite CSS3 variables if you reassign them after this import.
💡 Importing scss instead of compiled css
You can also import the source SCSS code instead of the compiled CSS:@import "~@informaticon/lib.nodejs.base.template/dist/stylesheets/layout/main.scss";
It's recommended to use the compiled CSS and the CSS3 variables instead of the SCSS source though.
-
you can add more stylesheets for elements:
//if you want to use the scss functions you have to import them as scss @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/util/mixins.scss'; @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/util/functions.scss'; @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/input.css'; @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/datepicker.css'; @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/button.css'; @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/card.css'; @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/code.css'; @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/hr.css'; @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/tree.css';