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 -s 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:
<img src="/path/to/img" alt="..." height="100" width="100"> <!-- Add some dropdowns to the right --> <!-- ... --> <!-- Add some user menu items or groups --> <!-- ... --> <!-- Add some sidebar menu items or groups --> <!-- ... --> <!-- Handy when using BlazeLayout --> <!-- Just a static footer with package version --> <div class="float-right">v</div> <b>Copyright 2019 — </b> <a href="#"><b>Mijn</b>Portaal.com</a>. <span>Alle rechten voorbehouden</span>
Example of a login page:
<!-- Handy when using BlazeLayout -->
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 booleanready
whether to slide up the preloader or not.header
Only takes menu items in the content block.sidear
Takes a template namedbrand
and optionally ausername
,userAvatar
anduserLink
for theuserPanel
.brand
Takes apreTitle
,title
andimage
.menuGroup
Takestitle
,icon
andopen
, and uses content block for inner items.menuItem
Takestitle
, 'icon' andlink
.user-menu
Takesname
,avatar
andopen
, and uses content block for inner items.user-panel
Takesname
,avatar
andlink
, and is only used insidebar
itself.
content
Takes aname
andgroupName
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 |