Meteor AdminLTE

AdminLTE wrapped with Meteor.

Installation

Add the package to your project:

meteor add xerdi:admin-lte

Also add the following NPM dependencies to the project:

meteor npm install --save \
    admin-lte@^3.2.0 \
    @fortawesome/fontawesome-free@^5.15.4 \
    tempusdominus-core@^5.19.3 \
    bootstrap@^4.6.2

In order for webfonts of Font Awesome to work we'll need it to be accessible from /webfonts. This can be done by setting a postinstall script in your package.json. In this case the example shows a Bash example:

1{
2  "name": "mypackage",
3  ...
4  "scripts": {
5    "postinstall": "./postinstall.sh"
6  },
7  ...
8}

#!/bin/bash

if [ ! -d public/webfonts ]; then
  echo "Linking fontawesome webfonts"
  ln -rs node_modules/@fortawesome/fontawesome-free/webfonts public/webfonts
fi

This way after a meteor npm install the webfonts will be available at /webfonts/....

Don't forget to give the script execution rights.

Usage

The package provides all components as templates. Example of a full dashboard:

{{! Template: banner}}
{{> brand preTitle='Mijn' title='Portaal' image='path/to/img'}}
{{! Template: app}}
{{#adminLte}}
    {{#preloader ready=Template.subscriptionsReady}}
        <img src="/path/to/img" alt="..." height="100" width="100">
    {{/preloader}}
    {{#header}}
        <!-- Add some dropdowns to the right -->
        <!-- ... -->
    {{/header}}
    {{#sidebar brand='banner'
               username=currentUser.username
               userAvatar=currentUser.avatar.link
               userLink='/user/profile'}}
        {{! Either add username e.t.c. to sidebar or use userMenu}}
        {{#userMenu name=currentUser.username
                    avatar=currentUser.avatar.link}}
            <!-- Add some user menu items or groups -->
            <!-- ... -->
        {{/userMenu}}
        <!-- Add some sidebar menu items or groups -->
        <!-- ... -->
    {{/sidebar}}
    {{#content name=pageName groupName=pageGroupName}}
        <!-- Handy when using BlazeLayout -->
        {{>Template.dynamic template=template}}
    {{/content}}
    {{#footer}}
        <!-- Just a static footer with package version -->
        <div class="float-right">v{{version}}</div>
        <b>Copyright 2019 — {{ year }}</b>
        <a href="#"><b>Mijn</b>Portaal.com</a>.
        <span>Alle rechten voorbehouden</span>
    {{/footer}}
{{/adminLte}}

Example of a login page:

{{#wall preTitle='Mijn' title='Portaal'}}
    <!-- Handy when using BlazeLayout -->
    {{> Template.dynamic template=template}}
{{/wall}}

API

Blaze Templates

At this time there are only structure templates available. They use Template.contentBlock for separating the view from data. There's just one template for the 'login-page' component, namely wall and accepts a card as inner content. The adminLte template, however, has the following extra templates for inner usage:

preloader Takes a boolean ready whether to slide up the preloader or not.
header Only takes menu items in the content block.
sidear Takes a template named brand and optionally a username, userAvatar and userLink for the userPanel.
- brand Takes a preTitle, title and image.
- menuGroup Takes title, icon and open, and uses content block for inner items.
- menuItem Takes title, 'icon' and link.
- user-menu Takes name, avatar and open, and uses content block for inner items.
- user-panel Takes name, avatar and link, and is only used in sidebar itself.
content Takes a name and groupName for the content header.
footer Takes any HTML in the content block.

Theme Preferences

The package contains helpers for managing theme preferences. To actually change a preference the Theme is used, which is a ReactiveDict. Example:

1import {Theme} from 'meteor/xerdi:admin-lte';
2
3Meteor.startup(function () {
4    // The Theme object is constructed in another startup script
5    Theme.set('dark-mode', true);
6});

The preferences have a default value specified in ThemeDefaults. Those defaults can be overridden. Example:

1import {ThemeDefaults} from 'meteor/xerdi:admin-lte';
2
3ThemeDefaults['dark-mode'] = false;

Theme Defaults

Preference	Default value
`dark-mode`	true
`sidebar-mini`	true
`layout-fixed`	false
`layout-navbar-fixed`	false
`layout-footer-fixed`	false
`sidebar-collapse`	true
`layout-boxed`	false
`layout-top-nav`	false
`accent`	`accent-primary`
`navbar-dark-mode`	true
`navbar-dark-skin`	none
`navbar-light-skin`	none
`sidebar-dark-mode`	true
`sidebar-dark-skin`	`sidebar-dark-primary`
`sidebar-light-skin`	`sidebar-light-primary`
`sidebar-color`	none