diff --git a/Guide.md b/Guide.md index 1a4b190..e71254d 100644 --- a/Guide.md +++ b/Guide.md @@ -27,6 +27,8 @@ User Accounts is a suite of packages for the [Meteor.js](https://www.meteor.com/ * [Errors Text](#errors-text) * [Disabling Client-side Accounts Creation](#disabling-client-side-accounts-creation) * [Form Fields Configuration](#form-fields-configuration) + * [Extending Templates](#extending-templates) + * [Grouping Fields](#grouping-fields) * [CSS Rules](#css-rules) * [Wrapping Up for Famo.us](#wrapping-up-for-famo.us) * [Side Notes](#side-notes) @@ -656,6 +658,7 @@ Each field object is represented by the following properties: | positiveValidation | Boolean | | Specifies whether to display negative validation feed-back inside input elements. | | positiveFeedback | Boolean | | Specifies whether to display positive validation feed-back inside input elements. | | showValidating | Boolean | | Specifies whether to display a loding icon inside input elements while the validation process is in progress. | +| options | Object | | An object with custom properties that are made available inside the templates. This is used to customize the layout and style of forms through the use of [template-extension](https://github.com/aldeed/meteor-template-extension). See [Extending Templates](#extending-templates) | `displayName`, `placeholder`, and `errStr` can also be an [accounts-t9n](https://atmospherejs.com/softwarerero/accounts-t9n) registered key, in which case it will be translated based on the currently selected language. In case you'd like to specify a key which is not already provided by accounts-t9n you can always map your own keys. To learn how to register new labels, please refer to the official [documentation](https://github.com/softwarerero/meteor-accounts-t9n#define-translations). @@ -956,6 +959,48 @@ AccountsTemplates.addFields([ ``` + +### Extending Templates + +With the [aldeed:template-extension](https://github.com/aldeed/meteor-template-extension) package, the built-in templates or sub-templates of any `user-accounts` UI package may be replaced by custom templates. The purpose is to create more sophisticated or specialized layouts or styling. + +Custom properties that hold information about the look of the form may be attached to the `options` object of a field. It may then be used to change the output while looping the fields. Adding a divider might look like this: + +```javascript +AccountsTemplates.addField({ + _id: "address", + type: "text", + + // Options object with custom properties for my layout. At the moment, there are + // no special properties; it is up the developer to invent them + options: { + // Put a divider before this field + dividerBefore: true + } +}); +``` + +```html + +``` + +```javascript +Template.appAtInput.replaces("atInput"); +``` + + + +#### Grouping fields + +Grouping fields together is a special problem in regard to layout. The issue is creating some container markup *while* iterating over the fields (the templating engine of Meteor doesn't allow outputting an opening tag inside a loop without closing it in the same iteration). + +A solution to the problem is demonstrated in [this gist](https://gist.github.com/dalgard/a844f6569d8f471db9a7) (Semantic UI version). + + ## CSS Rules diff --git a/lib/core.js b/lib/core.js index 7049afd..a7d4d0b 100644 --- a/lib/core.js +++ b/lib/core.js @@ -154,6 +154,9 @@ FIELD_PAT = { trim: Match.Optional(Boolean), lowercase: Match.Optional(Boolean), uppercase: Match.Optional(Boolean), + + // Custom options + options: Match.Optional(Object), }; // Route configuration pattern to be checked with check