ionic으로 검색 양식을 만들어 보았습니다.
4869 단어 ionic
할 수있는 것
우선 먼저 어떤 것을 만들 것인가라고 하는 곳입니다만 밑그림입니다.
검색 조건이 추가되어 가는 느낌의 폼입니다.
ionic이 자동으로 생성하는 프로그램 부분은 생략하고, 이번에 추가한 코드만 기재하고 있습니다.
home.tsexport class HomePage {
// 省略
public wordInput: string = '';
public words: string[] = [];
addWord(formValue) {
this.words.push(formValue.wordValue)
this.wordInput = ''
}
delete(idx: number) {
this.words.splice(idx, 1);
}
}
home.html<form #form="ngForm" (ngSubmit)="addWord(form.value)">
<ion-item>
<ion-label>
<ion-icon name="search"></ion-icon>
</ion-label>
<ion-input [(ngModel)]="wordInput" name="wordValue"></ion-input>
<button ion-button item-right type="submit" icon-only>
<ion-icon name="md-arrow-forward"></ion-icon>
</button>
</ion-item>
</form>
<div class="tags">
<ion-chip *ngFor="let word of words; let i = index" id="word_{{i}}">
<ion-label>{{ word }}</ion-label>
<button ion-button clear color="dark" (click)="delete(i)">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-chip>
</div>
home.scss.tags {
display: flex;
padding-top: 5px;
overflow: scroll;
}
Reference
이 문제에 관하여(ionic으로 검색 양식을 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yujikawa/items/61b3d033e616c4d73577
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
export class HomePage {
// 省略
public wordInput: string = '';
public words: string[] = [];
addWord(formValue) {
this.words.push(formValue.wordValue)
this.wordInput = ''
}
delete(idx: number) {
this.words.splice(idx, 1);
}
}
<form #form="ngForm" (ngSubmit)="addWord(form.value)">
<ion-item>
<ion-label>
<ion-icon name="search"></ion-icon>
</ion-label>
<ion-input [(ngModel)]="wordInput" name="wordValue"></ion-input>
<button ion-button item-right type="submit" icon-only>
<ion-icon name="md-arrow-forward"></ion-icon>
</button>
</ion-item>
</form>
<div class="tags">
<ion-chip *ngFor="let word of words; let i = index" id="word_{{i}}">
<ion-label>{{ word }}</ion-label>
<button ion-button clear color="dark" (click)="delete(i)">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-chip>
</div>
.tags {
display: flex;
padding-top: 5px;
overflow: scroll;
}
Reference
이 문제에 관하여(ionic으로 검색 양식을 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yujikawa/items/61b3d033e616c4d73577텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)