A bedrock AngularJS module that provides various UI components.
npm install bedrock-angular-uiA [bedrock][] [AngularJS][] module that provides various UI components.
Uses features from [bedrock-angular][].
``
bower install bedrock-angular-ui
Installation of the module followed by a restart of your [bedrock][] server
is sufficient to make the module available to your application.
To manually add bedrock-angular-ui as a dependency:
`js`
angular.module('myapp', ['bedrock.ui']);
Show an action menu. Provides standard stackables wrapper around
menu
items. Useful in headlines and tables of resources.`html
Name
Action
{{item.label}}
`$3
Show details of an error.
html
Error Details
`$3
Show a standard section headline. Useful for a common look and feel. Supports
having a menu for section specific actions.
html
You have no items for this identity.
class="btn btn-success pull-right"
ng-click="modals.showAddItem=true"> Add Item
...
You have no recent items for this identity.
...
`$3
Automatically create slug data from a model property.
html
br-slug-in="model.resource.label"
br-options="{
name: 'sysSlug', label: 'Short Name',
placeholder: 'my-short-name', disabled: {{model.loading}},
autocomplete: 'off', maxlength: '32',
columns: {
label: 'col-md-2',
input: 'col-md-8',
help: 'col-md-offset-2 col-md-8'
}
}">
Enter a short name for this resource. An example would be "my-short-name",
or "myshortname".
`$3
Wrapper around a number of
components.`html
...
`$3
Wrapper around content for a tab used with a
component.`html
br-tab-pane-index="1">
$3
Show a tooltip.
html
br-tooltip="Edit this item."
br-options="{placement: 'bottom'}">
`Options:
- placement: See [UI Bootstrap][] tooltip docs.
- trigger: See [UI Bootstrap][] tooltip docs.
$3
Polyfill for
attribute.Filters
$3
Convert a string to a "slug". Repeated whitespace and
- in a string are
replaced with a single -. The string is also lowercased. Useful for URL
friendly ids.`html
{{accountName | slug}}
`js
var slugified = $filter('slug')(scope.input);
`
{{'My name' | slug}} => 'my-name'
{{'My Name' | slug}} => 'my-name'
{{'My - Name' | slug}} => 'my-name'
{{'My --- Name' | slug}} => 'my-name'
[bedrock]: https://github.com/digitalbazaar/bedrock
[bedrock-angular]: https://github.com/digitalbazaar/bedrock-angular
[bedrock-angular-alert]: https://github.com/digitalbazaar/bedrock-angular-alert
[bedrock-angular-resource]: https://github.com/digitalbazaar/bedrock-angular-resource
[AngularJS]: https://github.com/angular/angular.js
[UI Bootstrap]: https://angular-ui.github.io/bootstrap/