communitypackages:autoform-plain

v1.0.1Published 10 months ago

AutoForm Theme Plain

This theme contains no specific styling. Customizations are possible using class attributes, where desired.

Project Status: Active – The project has reached a stable, usable state and is being actively developed. JavaScript Style Guide GitHub

Install the theme

You have two options of installing this theme.

A. Adding the theme to the initial bundle (default); comfortable but with bigger initial bundle size.

B. Using dynamic imports and adding the theme on-demand; manual effort required but lowers the footprint of the initial client bundle.

In both cases you have to install the package to your packages list:

$ meteor add communitypackages:autoform-plain

Install via static imports (default)

For statically (immediately) importing the theme you need to import the static loader module in your client's startup code:

1import { AutoFormPlainTheme } from 'meteor/communitypackages:autoform-plain/static'
2
3AutoFormPlainTheme.load()

That's it. The theme is imported and ready to use.

Install via 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 9 KB of size (estimated via bundle-visualizer).

In order to do so you need to import the dynamic version of the loader function:

1import { AutoFormPlainTheme } from 'meteor/communitypackages:autoform-plain/dynamic'
2
3AutoFormPlainTheme.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('plain')
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('plain')

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="plain" ...}}
2  ...
3{{/autoForm}}

History

  • 1.0.1
    • provide real split between static and dynamic version without environment flags required

License

This theme is LICENSED under MIT. See the LICENSE file for more.