我正在寻找在 Ionic2 中使用 Angular2 的标签输入。类似于Bootstrap 标签输入
我正在寻找一个仅在 Ionic 2 中使用 Angular2 的示例。
我正在寻找在 Ionic2 中使用 Angular2 的标签输入。类似于Bootstrap 标签输入
我正在寻找一个仅在 Ionic 2 中使用 Angular2 的示例。
我认为你不能用ion-input
Ionic2 的元素来做到这一点,但你可以用几个样式规则和几行代码来构建这个功能。
在那里,我只是使用一个字符串数组来显示标签
<div class="tag-container">
<span class="tag" *ngFor="let tag of tags">
{{ tag }}
<ion-icon name="close" (click)="deleteTag(tag)"></ion-icon>
</span>
</div>
以及一些可以正确显示它们的样式:
.tag-container {
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 10px;
margin: 10px;
}
.tag {
display: inline-block;
background-color: #5bc0de;
color: #fff;
margin: 5px 5px;
padding: 2px 5px;
}
注意:我没有在该演示中创建自定义指令以使其简单易懂,但请记住,如果您要在多个页面中使用这些标签(或者您可能想向它们添加更多功能) 更好的实现是将模板、样式和行为提取到一个单独的组件中,并像父组件中的指令一样使用它。