Analytics

<button class="btn btn-primary" av-analytics-on="click" av-analytics-label="save" av-analytics-value="10"> Track Event </button>

Animation

On value change

<span av-animate="counter" class="badge badge-primary" ng-bind="anim.counter"></span>

On load

I will animate on load!
<div class="card card-block" av-animate> I will animate on load! </div>

On event

<button type="button" class="btn btn-default" av-animate av-animate-on="click"> Click Me! </button>

With children

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur

<div class="loading-indicator" av-animate av-animate-type="'transition.slideRightBigIn'" av-animate-options="{ stagger: 500 }"> <p> ... </p> <p> ... </p> <p> ... </p> </div>

Options

{{anim.actualAnimation}}

<div av-animate av-animate-on-load="false" av-animate-type="{{anim.actualAnimation}}" class="card card-default text-center card-block"> ... </div>

Loader

<div av-loader></div>

Block UI

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div av-block-ui="blockDemo"></div>

Spaces

>
<av-spaces-breadcrumbs page-name="My Page" space-id="1093906101146120962309999999"> ></av-spaces-breadcrumbs>

Datepicker

<form name="datepickerForm"> <div class="form-group"> <label for="withIcon">With Icon</label> <div class="input-group date"> <input type="text" class="form-control" id="withIcon" ng-model="demo.date1" av-datepicker> <span class="input-group-btn" data-toggle="datepicker"> <button class="btn btn-default" type="button"><span class="icon icon-calendar"></span></button> </span> </div> </div> <div class="form-group"> <label for="noIcon">No Icon</label> <input type="text" class="form-control" id="noIcon" ng-model="demo.date2" format="'MMM-M-YYYY'" av-datepicker> </div> <div class="form-group"> <label for="dateInput">Input type of 'date'</label> <div class="input-group date"> <input type="date" class="form-control" id="dateInput" ng-model="demo.date3" av-datepicker format="'yyyy-MM-dd'"> <span class="input-group-btn" data-toggle="datepicker"> <button class="btn btn-default" type="button"><span class="icon icon-calendar"></span></button> </span> </div> </div> </form>

Dimmer

Default

Dimmer Message

Example title

Example text

<div av-dimmer class="card card-block"> <div class="dimmer-content dimmer-content-dark text-center"> <p> Dimmer Message </p> </div> <h4 class="card-title">Example title</h4> <p class="card-text">Example text</p> </div>

Using Configuration

Dimmer Message

Example title

Example text

<div av-dimmer class="card card-block"> <div class="dimmer-content dimmer-content-dark text-center"> <p> Dimmer Message </p> </div> <h4 class="card-title">Example title</h4> <p class="card-text">Example text</p> </div>

Simple

<select id="dropdownSimple" class="form-control" av-dropdown ng-model="vm.selectedNumber" options="{ allowClear: false, placeholder: 'Select your favorite number'}"> <option value>Select One</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select>

Array

<select id="dropdownPoke" class="form-control" av-dropdown ng-model="vm.selectedPoke" ng-options="poke for poke in vm.pokemon" options="{ allowClear: false, placeholder: 'Select a Pokemon'}"> <option></option> </select>

Label for Value in Array

<select id="dropdownStates1" class="form-control" av-dropdown ng-model="vm.selectedState1" ng-options="state.name for state in vm.states" ng-change="vm.onChange(vm.selectedState1)" options="{ allowClear: true, placeholder: 'Select State'}"> <option></option> </select>

Select as Label for Value in Array

<select id="dropdownStates1" class="form-control" av-dropdown ng-model="vm.selectedState1" ng-options="state.id as state.name for state in vm.states" ng-change="vm.onChange(vm.selectedState1)" options="{ allowClear: true, placeholder: 'Select State'}"> <option></option> </select>

Label for Value in Array Track By

<select id="dropdownStates1" class="form-control" av-dropdown ng-model="vm.selectedState1" ng-options="state.name for state in vm.states track by state.id" ng-change="vm.onChange(vm.selectedState1)" options="{ allowClear: true, placeholder: 'Select State'}"> <option></option> </select>

Multiple

<select id="dropdownMultiple" class="form-control" multiple av-dropdown ng-model="vm.selectedStates" ng-options="state.name for state in vm.states track by state.id" ng-change="vm.onChange(vm.selectedStates)" options="{ allowClear: true, placeholder: 'Select State'}"> <option></option> </select>

Query Large Data-sets

Type aaa to see a result set or three letters of any kind to view another

<div> <label for="dropdownQuery">Photos</label> <input type="hidden" id="dropdownQuery" class="form-control" av-dropdown ng-model="vm.selectedPhoto" ng-change="vm.onChange(vm.selectedPhoto)" options="vm.getOptions()"> </div>

Query Organizations (Infinite List)

<div class="form-group"> <label for="dropdownQuery">Organizations</label> <av-select-organizations ng-model="vm.selectedOrganization" ng-change="vm.onOrganizationChange(vm.selectedOrganization)"> </av-select-organizations> </div>

HTML in selection

Type aaa to see a result set or three letters of any kind to view another

import picturesFormatResult from './picturesResultFormat'; demo.factory('demoDropdownService', ($log, demoDropdownResource) => { class DemoDropdownService { ... getOptions() { return { allowClear: true, placeholder: 'Find a photo', minimumInputLength: 3, query: demoDropdownResource, formatResult: picturesFormatResult, formatSelection: picturesFormatResult }; } ... } return new DemoDropdownService(); }); // picturesResultFormat.js export default (item) => { return ` <div> <div style="display:inline-block"> <img src="${item.thumbnailUrl}"> </div> <div style="display:inline-block; padding-left: 5px"> ${item.text} </div> </div> `; };

Mask

<form name="datepickerForm"> <div class="form-group"> <label for="demoDate">Date</label> <input type="text" name="date" id="demoDate" class="form-control" ng-model="vm.date" ui-mask="{{mask.date}}"> </div> <div class="form-group"> <label for="demoPhone">Phone</label> <input type="text" name="phone" id="demoPhone" class="form-control" ng-model="vm.phone" ui-mask="{{mask.phone}}"> </div> <div class="form-group"> <label for="demoSSN">SSN</label> <input type="text" name="SSN" id="demoSSN" class="form-control" ng-model="vm.ssn" ui-mask="{{mask.ssn}}"> </div> <div class="form-group"> <label for="demoRandom">AA9A*</label> <input type="text" name="SSN" id="demoRandom" class="form-control" ng-model="vm.random" ui-mask="AA9A*"> </div> </form>

Modals

Sizes

Manager

With Controller

AvModal.create({ show: true, controller: 'SomeController', controllerAs: 'vm', locals: { someValue: 'This is a value passed in using locals, it could be params passed from the external scope required by the modal.' } });

Permissions

A green checkbox will show when logged in user has appropriate permission

  • Permission 7100
  • Permission 8100
  • Permission 9100
<ul class="list-group"> <li class="list-group-item"> Permission 7100 <i class="icon icon-ok text-success" av-hide-permission="7100"></i> </li> <li class="list-group-item"> Permission 8100 <span class="icon icon-ok text-success" av-hide-permission="8100"></span> </li> <li class="list-group-item"> Permission 9100 <span class="icon icon-ok text-success" av-hide-permission="9100"></span> </li> </ul>

Popovers

<button type="button" class="btn btn-default" av-popover data-trigger="focus" title="What is HIPAA" data-placement="top" data-content="HIPAA is short for the Health Insurance Portability and Accountability Act."> Click to toggle popover </button> <button type="button" class="btn btn-default" av-popover data-trigger="hover" title="Protected Health Information (PHI)" data-placement="top" data-content="PHI is any information in a medical record that can be used to identify an individual, and that was created, used, or disclosed in the course of providing a health care service, such as a diagnosis or treatment."> Hover to show popover </button> <button type="button" class="btn btn-default" av-popover data-trigger="manual" title="Need an immediate alert?" data-placement="top" data-show="showOnLoad" data-content="You can toggle popovers to show immediately!"> Show popover on load </button>

Tooltips

<button type="button" class="btn btn-default" data-av-tooltip data-trigger="click" data-placement="top" title="What is HIPAA"> Click to toggle tooltip </button> <button type="button" class="btn btn-default" data-av-tooltip data-placement="top" data-trigger="hover" title="Protected Health Information (PHI)"> Hover to show tooltip </button> <button type="button" class="btn btn-default" data-av-tooltip data-trigger="manual" title="Need an immediate tooltip?" data-placement="top" data-show="showOnLoad"> Show tooltip on load </button>

Inline Help

<inline-help title="Hello World"></inline-help>

Validation

<form name="demoForm" av-val-form="vm.rule"> <div class="form-group"> <label for="demoFirstName1">First Name</label> <input type="text" class="form-control" name="demoFirstName1" placeholder="..." ng-model="vm.firstName" av-val-field="firstName"> <p av-val-container></p> </div> </form> <!-- Javascript --> <script> const app = require('./app'); app.config((avAnalyticsProvider, avValProvider) => { const defaultRules = { firstName: { required: { message: 'First name is required.' }, size: { min: 2, max: 20, message: 'First name must be between 2 and 20 characters.' } } }; avValProvider.addRules({ defaultRules }); }); </script>