medbook:autoform-semantic-ui
fabienb4:autoform-semantic-uimaintained by the MedBook team
Semantic-ui template for aldeed:autoform package.
semantic-ui is NOT included in this package, to allow you to use a customized version if you need to. If you don't use a custom version, you must add the default package
semantic:ui-cssto your meteor app, otherwise, there will be no styling.
Table of Contents
Installation
In your Meteor app directory:
$ meteor add aldeed:autoform medbook:autoform-semantic-ui
Usage
In your code (client side) add:
1Meteor.startup(() => { 2 AutoForm.setDefaultTemplate("semanticUI"); 3});
Or you can set the template on each form:
1{{#autoForm collection="Items" id="itemsInsertForm" type="insert" template="semanticUI"}} 2 3{{/autoForm}}
For more information on how to use autoform, please refer to aldeed:autoform README.
Input Options
Icons and Labels
To avoid alignment problems, you might want to use
label=falsewith the following inputs.
1 // Left icon 2 {{> afQuickField name="name" leftIcon="empty circle"}} 3 4 // Left label 5 {{> afQuickField name="name" leftLabel="name"}} 6 7 // Right icon 8 {{> afQuickField name="name" rightIcon="empty circle"}} 9 10 // Right label 11 {{> afQuickField name="name" rightLabel="name"}} 12 13 // Left icon, right label 14 {{> afQuickField name="name" leftIcon="empty circle" rightLabel="name"}} 15 16 // Left label, right icon 17 {{> afQuickField name="name" leftLabel="name" rightIcon="empty circle"}}
Extended Input Types
basic-select
A basic select working without javascript (see: basic-select)
1{{> afQuickField name="items" type="basic-select"}}
Possible formats for options in schema:
1// Simple 2autoform: { 3 afFieldInput: { 4 options: () => [ 5 { value: "1", label: "Item 1" }, 6 { value: "2", label: "Item 2" } 7 ] 8 } 9} 10 11// With groups 12autoform: { 13 afFieldInput: { 14 options: () => [ 15 { 16 optgroup: "Group one", 17 items: [ 18 { value: "1", label: "Item 1" }, 19 { value: "2", label: "Item 2" } 20 ] 21 }, 22 { 23 optgroup: "Group two", 24 items: [ 25 { value: "3", label: "Item 3" }, 26 { value: "4", label: "Item 4" } 27 ] 28 } 29 ] 30 } 31}
select
A javascript driven select (see: selection)
If a field using a select is marked as optional in the schema, the dropdown will show a "Clear" button at the top of the list, allowing you to clear the currently selected value.
WARNING: Categories and selection/search don't play well together
1// Simple 2{{> afQuickField name="items"}} 3 4// Custom placeholder 5{{> afQuickField name="items" placeholder="Select an item"}} 6 7// Specify classes for the dropdown (default: "fluid selection") 8{{> afQuickField name="items" class="compact selection"}} 9 10// Remove default "fluid selection" from classes 11{{> afQuickField name="items" class=""}} 12 13// Search (**do not play well with categories**) 14{{> afQuickField name="items" search=true}} 15 16// Full text search (**do not play well with categories**) 17{{> afQuickField name="items" fullTextSearch=true}} 18 19// Allow additions 20{{> afQuickField name="items" allowAdditions=true}} 21 22// Allow category selection 23{{> afQuickField name="items" allowCategorySelection=true}} 24 25// Multiple selections 26{{> afQuickField name="items" multiple=true}} 27 28// Maximum selections (in this case: 3) 29{{> afQuickField name="items" maxSelections=3}} 30 31// Show the number of selected items instead of their labels 32{{> afQuickField name="items" useLabels=false}} 33 34// Customize dropdown initialization settings 35// See: http://semantic-ui.com/modules/dropdown.html#/settings 36// Override any settings set with above properties 37{{> afQuickField name="items" settings=settings}}
Possible formats for options in schema:
1// Simple 2autoform: { 3 afFieldInput: { 4 options: () => [ 5 { value: "1", label: "Item 1" }, 6 { value: "2", label: "Item 2" } 7 ] 8 } 9} 10 11// With icon/flag/label/description 12// See: 13// http://semantic-ui.com/modules/dropdown.html#icon 14// http://semantic-ui.com/modules/dropdown.html#label 15// http://semantic-ui.com/modules/dropdown.html#description 16autoform: { 17 afFieldInput: { 18 options: () => [ 19 { value: "1", label: "Item 1", icon: "file text icon" }, 20 { value: "2", label: "Item 2", icon: "bz flag" }, 21 { value: "3", label: "Item 3", circularLabel: "red" }, 22 { value: "4", label: "Item 4", description: "new" } 23 ] 24 } 25} 26 27// Groups with headers 28// See: http://semantic-ui.com/modules/dropdown.html#header 29autoform: { 30 afFieldInput: { 31 options: () => [ 32 { 33 itemGroup: "Group one", 34 items: [ 35 { value: "1", label: "Item 1" }, 36 { value: "2", label: "Item 2" } 37 ] 38 }, 39 { 40 itemGroup: "Group two", 41 items: [ 42 { value: "3", label: "Item 3" }, 43 { value: "4", label: "Item 4" } 44 ] 45 } 46 ] 47 } 48} 49 50// Categories (**do not play well with selection/search**) 51// See: http://semantic-ui.com/modules/dropdown.html#multiple-levels 52autoform: { 53 afFieldInput: { 54 options: () => [ 55 { 56 category: { value: "cat-one", label: "Category one" },// value if allowCategorySelection 57 items: [ 58 { value: "1", label: "Item 1" }, 59 { value: "2", label: "Item 2" } 60 ] 61 }, 62 { 63 category: { label: "Category two" }, 64 items: [ 65 { value: "3", label: "Item 3" }, 66 { value: "4", label: "Item 4" } 67 ] 68 } 69 ] 70 } 71}
boolean-checkbox
slider
See: slider
1{{> afQuickField name="isEnabled" checkboxType="slider"}}
toggle
See: toggle
1{{> afQuickField name="isEnabled" checkboxType="toggle"}}
License
MIT
Contributing
Anyone is welcome to contribute. Fork, make your changes (test them!), and then submit a pull request.