Tomorrow's Library with Yesterday's Framework
A collection of UI components built with Bootstrap 4 & AngularJS (1.x)
Starselected value:
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;
I'm happy!
I'm also happy!
I'm last but not least!
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
<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>
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-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-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
.
This injectable service will help you create and handle bootstrap's modals.
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
Use the inputs below to control how the component will be rendered.
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.
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
.
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-type (string, optional) - One of bootstrap's native states. Defaults to primary
.
badge-pull (boolean, optional) - Use pill version (rounded edges). Defaults to false
.
Toggle value is: true
toggle-text (string, optional) - Some string.