# angular-ai-ui

> Angular UI Library

Latest version **1.0.1** (published 2017-07-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-ai-ui
pnpm add angular-ai-ui
yarn add angular-ai-ui
bun add angular-ai-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-07-30 |
| First published | 2017-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| Author | Dmitriy Dergachev |
| Maintainers | artmares |

## Links

- npm: https://www.npmjs.com/package/angular-ai-ui
- Repository: https://bitbucket.org/aisgteam/ai.ui
- Homepage: https://bitbucket.org/aisgteam/ai.ui#readme
- npm.io page: https://npm.io/package/angular-ai-ui

## Dependencies (2)

- [angular](https://npm.io/package/angular.md) ^1.6.5
- [angular-translate](https://npm.io/package/angular-translate.md) ^2.15.2

## Recent versions

- 1.0.1 (latest) — 2017-07-30
- 1.0.0 — 2017-07-30

## README

# Angular Ai Ui #

Add UI component for you application

`npm install angular-ai-ui`

or

`yarn install angular-ai-ui`

## How to use ##

Need require file **ai-ui.js**

```js
var myApp = angular.module('myApp', ['ai.ui']);
```

### Use Form ###

```html
<ai-form id="login" method="post" action="you/url" enctype="multipart/form-data">
    <!-- html tags -->
</ai-form>
```

Will be replaced by

```html
<form class="ai-from" id="login" method="post" action="you/url" enctype="multipart/form-data">
    <!-- html tags -->
</form>
```

### Use Field ###

#### Use text field ####
```html
<ai-text id="id_field" label="Text to label" name="input_name" required ng-model="scope.name"></ai-text> 
```

Will be replaced by

```html
<div class="ai-form-group">
    <input type="text" id="id_field" class="ai-text" ng-model="ngModel" name="input_name" required="required"/>
    <label class="ai-label-text" for="id_field">Text to label</label>
</div>
```
#### Use password field ####
```html
<ai-password id="id_field" label="Text to label" name="input_name" required ng-model="scope.pass"></ai-password> 
```

Will be replaced by

```html
<div class="ai-form-group">
    <input type="password" id="id_field" class="ai-password" ng-model="ngModel" name="input_name" required="required"/>
    <label class="ai-label-password">Text to label</label>
</div>
```

#### Use file field ####
```html
<ai-file id="id_field" label="Text to label" name="input_name" accept="jpg" multiple required ng-model="scope.files"></ai-file>
```

Will be replaced by

```html
<div class="ai-form-group">
    <input type="file" id="id_field" class="ai-file" ng-model="ngModel" name="input_name" accept="jpg" multiple required="required" />
    <label class="ai-label-file">Text to label</label>
    <div class="ai-file-upload">{{ 'No file selected' | translate }}</div>
    <button class="btn btn-danger">{{ 'Clear' | translate }}</button>
    <button class="btn btn-primary">{{ 'View' | translate }}</button>
</div>
```

#### Use checkbox field ####
```html
<ai-checkbox id="id_field" label="Text to label" name="input_name"></ai-checkbox>
```

---
_Source: https://npm.io/package/angular-ai-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._