Overview
Some Meteor Blaze templates to speed up layout development for Bootstrap3 & Bootstrap4 UI frameworks.
Installation
meteor add imajus:bootstrap-helpers
Related packages
Contents
Package provide different sets of templates for Bootstrap3 and Bootstrap4 UI frameworks.
Bootstrap 3
Following helpers are provided for Bootstrap 3:
{{>breadcrumbs items=Array}}
– Renders breadcrumbs component. Expectsitems
array of objects with following structure:1{ 2 // Item text 3 label: String, 4 // (optional) <li> attributes 5 liAtts: Object, 6 // (optional) <a> src attribute value, if not provided a label will be displayed as static text 7 href: String, 8 // (optional) Additional anchor attributes, skipped if href is not provided 9 anchorAtts: Object, 10}
{{#carousel items=Array}}...{{/carousel}}
- Renders carousel component.{{>i bs=String fa=String}}
- Renders Bootstrap3 or FontAwesome4 icon. Supports various appeareance modifiers (FontAwesome4 only):{{#collapse id=String active=Boolean title=String}}...{{/collapse}}
- Renders collapse component.Some initially hidden content goes here.
{{#modal id=String title=String close=String submit=String options=Object}}...{{/modal}}
- Renders modal component. Initially, modal is hidden and you're supposed to call$('#myModal').modal('show')
in order to display it.
Note: The<p>Custom modal content goes here.</p> <p>"modalOptions" must be an object or Template helper which returns an object</p>
options
object is passed to Bootstrap modal initialization function as is, e.g. passing variable which contains object{ show: true }
will make the modal to appear right after rendering.{{#pageHeader heading=String}}...{{/pageHeader}}
- Renders page header component.{{#panel id=String type=String title=String badge=String}}...{{/panel}}
- Renders panel component.
Bootstrap 4
By default, the package works with Bootstrap3 layout. If you need to switch to Bootstrap4, put this somewhere in your client initialization logic (before it starts rendering any templates):
1import { BootstrapHelpers } from 'meteor/imajus:bootstrap-helpers'; 2BootstrapHelpers.forBootstrap4 = true;
Following components are provided for Bootstrap4:
{{>breadcrumbs ...}}
- Same as for Bootstrap3.{{#carousel ...}}...{{/carousel}}
- Same as for Bootstrap3.{{>i fa=String}}
- Renders FontAwesome4 icon. Supports same icon modifiers as for Bootstrap3.{{#collapse ...}}...{{/collapse}}
- Same as for Bootstrap3.{{#modal id=String title=String modalClass=String closeBtnLabel=String clostBtnType=String submitBtnLabel=String submitBtnType=String noHeader=Boolean noHeaderClose=Boolean noFooter=Boolean options=Object}}...{{/modal}}
- Renders modal component. ParameterscloseBtnLabel
,closeBtnType
,submitBtnLabel
,submitBtnType
,noHeader
,noHeaderClose
,noFooter
are all optional and allows to tune modal appearence for your needs. You can adjust modal dialog classes usingdialogClasses
parameter.
Initially, modal is hidden and you suppose to call $('#myModal').modal('show')
in order to display it.
<p>Custom modal content goes here.</p> <p>"modalOptions" must be an object or Template helper which returns an object</p>
Note: The options
object is passed to Bootstrap modal initialization function as is, e.g. passing variable which contains object { show: true }
will make the modal to appear right after rendering.
{{#pageHeader heading=String}}...{{/pageHeader}}
- Same as for Bootstrap3.{{>card title=String loading=Boolean}}...{{/card}}
- Renders card component, which is a direct successor of the Bootstrap3 panel component. Additionally, allows to render a loading animation when the data is not yet ready for displaying.{{>toast message=String heading=String brand=String}}...{{/toast}}
- Renders Toast component. The most useful when used via JavaScript API:<div class="position-relative mt-3"> </div>
1import { showToast, showError } from 'meteor/imajus:bootstrap-helpers'; 2showToast({ 3 heading: 'Greeting', 4 message: 'Hello, world!', 5 brand: 'success', 6}); 7showError(new Error('Something went wrong!'));