cybertooth.io EmberJs Add-Ons

ember-cli-bootstrap3-carousel

twbs-carousel Component (docs)

{{#twbs-carousel as |carousel|}}
  {{#carousel.slide classNames="active" as |slide|}}
    {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+1" alt="A slide image."}}
  {{/carousel.slide}}
  {{#carousel.slide as |slide|}}
    {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+2" alt="A slide image."}}
  {{/carousel.slide}}
  ...
  {{#carousel.slide as |slide|}}
    {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+5" alt="A slide image."}}
  {{/carousel.slide}}
{{/twbs-carousel}}

ember-cli-bootstrap3-grid

twbs-clearfix Component (docs)

{{twbs-clearfix columnCount=3 index=index visible-sm=true visible-md=true visible-lg=true}}

{{twbs-clearfix columnCount=3 index=index visible-all=true}}

Viewport Mixin (docs)

import Viewport from 'ember-cli-bootstrap3-grid/mixins/viewport';
// ... then mix it into your component
export default Ember.Component.extend(Viewport, { ... });

{{!-- then in your template use the computed functions --}}
{{#if xs?}} Extra Small {{else}} SM/MD/LG {{/if}}

ember-cli-bootstrap3-popover

twbs-popover Component (docs)

{{#twbs-popover content="Click again to hide." as |popover|}}
  {{#popover.trigger}}
    <a href="javascript:void(0)">Click this anchor.</a>
  {{/popover.trigger}}
{{/twbs-popover}}

ember-cli-bootstrap3-tooltip

twbs-abbr Component (docs)

{{#twbs-abbr title="Best Friends, Forever"}}BFF{{/twbs-abbr}}

twbs-button Component (docs)

{{#twbs-button class="btn-default" title="Some Tooltip"}}Some Button{{/twbs-button}}

twbs-cite Component (docs)

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in {{#twbs-cite title="Source Title"}}Source Title{{/twbs-cite}}</footer>
</blockquote>

twbs-i Component (docs)

{{twbs-i class="fa fa-github"
  html?=true placement="right"
  title="Github Icon:<br/><code>fa fa-github</code>"}}

twbs-span Component (docs)

{{#twbs-span title="Some sort of tooltip in a span"}}Hover Over This{{/twbs-span}}

twbs-time Component (docs)

{{#twbs-time
  datetime="2001-09-11T04:00:00.000Z" title="Some sort of time..."
}}
  Hover Over This
{{/twbs-time}}

ember-cli-date-textbox

input-date Component (docs)

{{input-date autofocus=true classNames="form-control" date=model.createdAt displayFormat="LLLL"}}

input-iso8601 Component (docs)

{{input-iso8601 classNames="form-control" displayFormat="llll" iso8601="2017-07-01T00:00:00.000Z"}}

ember-cli-marked-down

marked-down Helper (docs)

{{marked-down "Some ~~struck~~ markdown text" strikethrough=true}}

set-links-target Component (docs)

{{#set-links-target excludeSelfLinks?=true targetValue="_blank"}}
  ...
{{/set-links-target}}

ember-cli-text-support-mixins

input-text Component (docs)

{{input-text autofocus=true class="form-control" escapeKeyClears?=true focusSelectsText?=true value=model.firstName}}

text-area Component (docs)

{{text-area class="form-control" escapeKeyClears?=true focusSelectsText?=true ctrlEnterSubmitsForm?=true value=model.notes}}

ember-cli-textarea-autosize

textarea-autosize Component (docs)

{{textarea-autosize classNames="form-control" rows=4}}

ember-data-bootstrap3-forms

twbs-errors-alert Component (docs)

{{twbs-errors-alert class="alert-danger" model=model}}

twbs-form Component (docs)

{{#twbs-form
    submit=(route-action "saveModel" model)
    reset=(route-action "rollbackModel" model)
}}
  {{!-- your form-groups and inputs go here --}}
  <div class="form-group text-right">
    <button class="btn btn-primary" type="submit">
      Clicking This SUBMIT Button Triggers Form's Submit Action
    </button>
    <button class="btn btn-default" type="reset">
      Clicking This RESET Button Triggers Form's Reset Action
    </button>
  </div>
{{/twbs-form}}

twbs-form-group Component (docs)

{{#twbs-form-group fieldErrors=model.errors.firstName}}
  <label for="...">...</label>
  {{input class="form-control" id="..." type="..." value=model.firstName}}
  <p class="help-block">...</p>
{{/twbs-form-group}}