ng1bs4

Tomorrow's Library with Yesterday's Framework

A collection of UI components built with Bootstrap 4 & AngularJS (1.x)

Star

Form Elements

Select

selected value:

ngbs-select

select-options (array of objects) - Each object in the array represents an option in the dropdown, and must include a display value (which appears in the dropdown options) and a key value (which is binded to the ng-model).

select-placeholder (string, optional) - The text which appears when no value is selected. Defaults to "Select an option..."

select-display-property (string, optional) - The name of the display value property in the option object. Defaults to 'display'

select-key-property (string, optional) - The name of the unique key property in the option object. The value of this field will be binded to 'ng-modal'. Defaults to 'id'

select-direction (string, optional) - accepted values are 'up' or 'down'. Defaults to 'down'.

select-enable-search (boolean, optional) - whether or not to show the search field at the top of the dropdown menu. Defaults to false.

<form name="form">
  <div class="form-group">
    <label>Check out this lovely label</label>
    <ngbs-select
            name="ngbsSelect"
            ng-model="$ctrl.selectValue"
            ng-change="$ctrl.valueChanged()"
            select-placeholder="Choose a life"
            select-options="$ctrl.selectOptions"
            select-display-property="display"
            select-key-property="id"
            select-enable-search="true"
            select-direction="'down'"
    ></ngbs-select>
    <small class="form-text form-control-feedback"> This is some description that no one reads</small>
  </div>
</form>

<form name="form">
  <div class="form-group">
    <label>A second one that goes upwards</label>
    <ngbs-select
            name="ngbsSelect"
            ng-model="$ctrl.selectValue"
            ng-change="$ctrl.valueChanged()"
            select-placeholder="Choose a death"
            select-options="$ctrl.selectOptions"
            select-display-property="display"
            select-key-property="id"
            select-enable-search="false"
            select-direction="'up'"
    ></ngbs-select>
  </div>
</form>
<p class="mt-4">selected value: {{$ctrl.selectValue}}</p>

class controller {
  constructor($log) {
    this.$log = $log;
    this.selectOptions = [
      {
        display: 'First Option',
        id: 1
      },
      {
        display: 'Second Option',
        id: 2
      },
      {
        display: 'Third Option',
        id: 3
      },
      {
        display: '<b>with</b> <i>html</i>',
        id: 4
      },
      {
        display: 'Fifth Option',
        id: 5
      },
      {
        display: 'Sixth Option',
        id: 6
      },
      {
        display: 'Seventh Option',
        id: 7
      },
      {
        display: 'Eighth Option',
        id: 8
      },
      {
        display: 'Ninth Option',
        id: 9
      }
    ];
  }

  valueChanged() {
    this.$log.info('value changed!');
  }
}

export default controller;

Navigation

Tabs

I'm happy!

I'm also happy!

I'm last but not least!

ngbs-tabs

Use beatiful for packing a lot of content in a small space. notice the structure of the mark up: ngbs-tab as the wrapper, and ngbs-pane for every tab. Put the tab content under ngbs-pane

title (string) - The text which appears on the tab

HTML

<ngbs-tabs>
    <ngbs-pane title="First Pane">
        <p>I'm happy!</p>
    </ngbs-pane>
    <ngbs-pane title="Second Pane">
        <p>I'm also happy!</p>
    </ngbs-pane>
    <ngbs-pane title="Last Pane">
        <p>I'm last but not least!</p>
    </ngbs-pane>
</ngbs-tabs>

ngbs-dropdown

menu-display (string) - The title of the menu. Default is 'Choose an action'

menu-actions (object) - The actions that can be chosen from the menu. Each action is an object with the properties 'display' (string) and 'action' (function).

<ngbs-menu
        menu-display="Choose an action"
        menu-actions="$ctrl.menuActions"
></ngbs-menu>

class controller {
  constructor() {
    this.menuDisplay = 'Choose an action';
    this.menuActions = [
      { display: 'action1', action: () => alert('action1') },
      { display: 'action2', action: () => alert('action2') },
      { display: 'action3', action: () => alert('action3') },
      { display: 'action4', action: () => alert('action4') },
      { display: 'action5', action: () => alert('action5') },
      { display: 'action6', action: () => alert('action6') }
    ];
  }
}

export default controller;

Tooltip

ngbs-tooltip

tooltip-content (string, required) - The test which appears inside the tooltip.

tooltip-placment (string, optional) - define in which direction the tooltip will appear.

tooltip-trigger (string, optional) - define when the tooltip will trigger - [click, hover, focus]

<button class="btn btn-secondary"
        ngbs-tooltip
        tooltip-content="Tooltip Content"
        tooltip-placement="right">
    Hover Me!
</button>

class controller {
}

export default controller;

Alert

Well done! You successfully read this important alert message.

ngbs-alert

alert-type (string, optional) - The alert type, as supplied by Bootstrap: "success", "info", "warning", or "danger". Defaults to 'info'.

alert-dismissible (boolean, optional) - Whether or not to show a close button inside the alert. Defaults to false.

Modal

$ngbsModal

This injectable service will help you create and handle bootstrap's modals.

openPrompt(options)

A method to create prompt modals. accepts an options object which should include the following properties:

title (string, optional) - The title which appears in the modal header.

body (string, optional) - The modal's body text.

buttons (array, optional) - An array of objects, each object represents a button and should include two properties: name (string) which appears on the button; type (string) which sets the button's style as offered by bootstrap

Pagination

Basic Demo (Current Page: 1)

Use the inputs below to control how the component will be rendered.

Size

Items/Page

Total Items

Visible Page Buffer

Disabled

Usability Demo (Current Page: 13)

This illustrates the power of the visible-page-buffer attribute. As the user clicks through the pages, the width of the pagination component never shifts, allowing the user to page through the results without ever moving their mouse. Not only can this be done 1 by 1 with the next button, but results can be stepped through multiple pages at a time using the ellipses without any mouse movement.

ngbs-pagination

pagination-current-page (number, optional) - The page that should be selected initially. Defaults to 1.

pagination-disabled (boolean, optional) - Disables all interactions. Defaults to false.

pagination-items-per-page (number, required) - The number of items from your data set that you will be showing per page. This is used in conjunction with pagination-total-items to calculate how many page numbers will be shown on the pagination component.

pagination-on-page-change (function, required) - The function to call when a user changes the page (clicks a number, or previous/next). Signature: (pageNumber) => { ... }.

pagination-size (string, optional) - The display size of the component, can either be 'sm', 'lg', or '' (the default size).

pagination-total-items (number, required) - The total number of items your data set will have it. This is used in conjunction with pagination-items-per-page to calculate how many page numbers will be shown on the pagination component.

pagination-visible-page-buffer (number, optional) - This property is taken as more of a suggestion and is used to determine how many page numbers surround the selected page on each side. This ultimately allows for greater usability by creating a consistent amount of page numbers no matter which page the user is on. The minimum number of pages that will be shown by the component is 5. This is because the first and last page will always be shown (+2), slots will be reserved to illustrate that there is a gap in paging (+2), and the selected page will always be shown (+1). To take full advantage of this, you may need to add extra styling to make page links the same width. Defaults to 3.

Progress

Side-By-Side HTML5 and Bootstrap 4

25 perc.

Value

Max

Label

Background

Height

Striped

Animated Progress

Animated Stripes

Indeterminate

ngbs-progress

This component merges the simplicity of HTML5's <progress> with the beauty of Bootstrap 4's Progress component. In addition to the attributes below, the component's height style can be set for a taller (or shorter) progress indicator.

progress-max (number, optional) - Represents how much of a particular task needs to be done before it is considered complete. If provided, the number must be greater than zero.

progress-value (number, optional) - Represents how much of a particular task has been done. If provided, the number must be greater than or equal to 0 and less than or equal to progress-max. This attribute is optional, which allows you to illustrate that a particular task is ongoing with no indication of how long it is expected to take.

progress-animated-progress (boolean, optional) - Whether or not changes to the progress-value should be animated. Defaults to false.

progress-auto-label (boolean, optional) - Automatically displays a label inside of the progress indicator (e.g.- 25%). You can also specify your own custom label via innerHTML. Defaults to false.

progress-striped (boolean, optional) - The display style of the progress indicator. Defaults to false.

progress-animated-striped (boolean, optional) - Used in conjunction with the progress-striped attribute. Defaults to false.

progress-background (string, optional) - This maps to Bootstrap 4's colors. Values can be 'primary', 'success', 'info', 'warning', 'danger', 'inverse', or 'faded'. Defaults to 'primary'.

Badge

default (primary)

secondary

success

danger

warning

info

light

dark

I'm a Pill

ngbs-badge

badge-type (string, optional) - One of bootstrap's native states. Defaults to primary.

badge-pull (boolean, optional) - Use pill version (rounded edges). Defaults to false.