Forms & Inputs¶
Some specific styles for inputs.
.evan-tag-container¶
Example¶
Reference Implementation: Angular-core Contract Mbembers Component
<div class="evan-tag-container" *ngIf="!loading">
<div *ngIf="!showTags" class="member-count" (click)="openMenu()">
{{ members.concat(origin).length }} {{ '_angularcore.contract-members.members' | translate }}
<ng-container *ngIf="members.length > 0">
, {{ '_angularcore.contract-members.new-members' | translate:{ count: members.length } }}
</ng-container>
</div>
<div class="evan-tag" *ngFor="let member of members.concat(origin)"
[class.cannot-delete]="origin.indexOf(member) !== -1 && getMemberState(member) !== 'loading'"
[class.outstanding]="getMemberState(member) === '2'"
[class.active]="getMemberState(member) === '4'"
[class.rejected]="getMemberState(member) === '3'"
[class.closed]="getMemberState(member) === '5'">
<span *ngIf="isMyAccount(member)">
{{ '_angularcore.contract-members.i' | translate }}
</span>
<span *ngIf="!isMyAccount(member)">
{{ contacts[member]?.alias || contacts[member]?.email || member }}
</span>
<ion-icon name="close"
(click)="removeMember(member)"
*ngIf="origin.indexOf(member) === -1 && getMemberState(member) !== 'loading'">
</ion-icon>
<ion-spinner name="close" color="primary" *ngIf="getMemberState(member) === 'loading'">
</ion-spinner>
</div>
</div>
View Example¶

.input-error¶
Used within ion-item elements to shwo an validation error.
<ion-item>...</ion-item>
<div class="input-error">
Info
</div>
.input-hint¶
Used within ion-item elements to shwo an validation info.
<ion-item>...</ion-item>
<div class="input-info">
Info
</div>
.group-icon-form¶
Uses ion-label’s and ion-inputs’s to create one grouped form layout for e.g. users address input.
<ion-col col-12 col-md class="group-icon-form">
<ion-label class="standalone">
{{ 'place-of-delivery' | translate }}*
</ion-label>
<ion-item>
<ion-label color="primary">
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input required="true"
[(ngModel)]="detail.customer"
[placeholder]="'customer' | translate">
</ion-input>
</ion-item>
<ion-item>
<ion-label color="primary">
<ion-icon name="home"></ion-icon>
</ion-label>
<ion-input required="true"
[(ngModel)]="detail.street"
[placeholder]="'street' | translate">
</ion-input>
</ion-item>
<ion-item>
<ion-label color="primary">
<ion-icon name="navigate"></ion-icon>
</ion-label>
<ion-input pattern="[0-9]{5},(.*)" required="true"
[(ngModel)]="detail.city"
[placeholder]="'city-plz' | translate">
</ion-input>
</ion-item>
View Example¶
