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
<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
<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>
Breadcrumbs
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>
Dropdowns
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>