AutoForm Theme Bootstrap 4
This theme contains the Bootstrap 4 compatible theme for aldeed:autoform versions 6.0.0 or greater). It requires a Boostrap 4 installation.
Installation
If you haven't installed Bootstrap 4 yet, you need to install it and it's peer dependencies using NPM.
You can (optionally) add fontawesome for builtin icons. This theme supports fontawesome 4, as well as fontawesome 5 (solid).
Also note, that Meteor's default builtin jquery is not sufficient, which is why you need to install via NPM, too.
Altogether you need the following packages:
# install NPM dependencies $ meteor npm install --save bootstrap popper.js jquery $ meteor npm install --save @fortawesome/fontawesome-free # optional, if using FA 5 # install meteor packages $ meteor add communitypackages:autoform-bootstrap4 jquery@3.0.0! $ meteor add fortawesome:fontawesome # optional, if using FA4
Importing Bootstrap 4
Import the Bootstrap theme and optional packages in your otp level client code
(for example in imports/startup/client/bootstrap.js
):
1import 'bootstrap' 2import 'bootstrap/dist/css/bootstrap.css' // optional, default theme 3import '@fortawesome/fontawesome-free/js/all.js' // optional, is using FA5 4import popper from 'popper.js' 5 6global.Popper = popper // fix Popper.js issues
Importing the AutoForm theme
From here you have two options for importing this theme.
A. Static import: Adds the theme to the initial bundle (default); more comfortable but with bigger initial bundle size.
B. Dynamic imports: Adds the theme on-demand; manual effort required but lowers the footprint of the initial client bundle.
Option A - Import using static imports (default)
For statically (immediately) importing the theme you need to import the static loader module in your client's startup code:
1import { AutoFormThemeBootstrap4 } from 'meteor/communitypackages:autoform-bootstrap4/static' 2 3AutoFormThemeBootstrap4.load()
That's it. The theme is imported and ready to use.
Option B - Import using dynamic imports
This theme also supports dynamic-import
so your initial client bundle will
contain only a minimum portion of this package's code and saves about 39 KB of
size (estimated via bundle-visualizer
).
In order to do so you need to import the dynamic version of the loader function:
1import { AutoFormThemeBootstrap4 } from 'meteor/communitypackages:autoform-bootstrap4/dynamic' 2 3AutoFormThemeBootstrap4.load() 4 .then(() => { 5 // The theme is imported. You can now make the form available. 6 // You could use a reactive var that resolves to true here 7 // or any other mechanism you like to use to reactively activate the form. 8 9 // You can now set this theme as default, see the next section. 10 AutoForm.setDefaultTemplate('bootstrap4') 11 }) 12 .catch(err => { 13 // handle load error 14 })
Using the theme
After installation you have to options to use the theme with your forms:
Setting the theme globally
Add the following code before you create the first form:
1AutoForm.setDefaultTemplate('bootstrap4')
Setting the theme locally
If you want this theme to apply only on certain forms you need to name it in the form declaration:
1{{#autoForm template="bootstrap4" ...}} 2 ... 3{{/autoForm}}
History
- 1.0.6
- fix checkbox/radio buttons where existing values were not marked as checked
- 1.0.5
- provide real split between static and dynamic version without environment flags required
- 1.0.4
- skipped, do not use
- 1.0.3
- Added optional dynamic import via
AUTOFORM_DYNAMIC_IMPORTS
env flag
- Added optional dynamic import via
- 1.0.2
- input type select-radio uses bs4 custom-radio skin
- input type select-radio-inline uses bs4 custom-radio-inline skin
- input type select-checkbox uses bs4 custom-checkbox skin
- 1.0.1
- import via dynamic imports
License
This theme is LICENSED under MIT. See the LICENSE file for more.