我正在寻找在 Ionic2 中使用 Angular2 的标签输入。类似于 Bootstrap Tags Input
我正在寻找一个在 Ionic 2 中仅使用 Angular2 的示例。
最佳答案
我认为您无法使用 Ionic2 中的 ion-input
元素做到这一点,但您可以仅使用一些样式规则和几行代码来构建该功能。
在那里,我只是使用一个字符串数组来显示标签
<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;
}
注意:我没有在该演示中创建自定义指令以使其简单易懂,但请记住,如果您要在多个页面中使用这些标签(或者您可能想向它们添加更多功能)更好的实现是将模板、样式和行为提取到一个单独的组件中,并像父组件中的指令一样使用它。
关于angular - 使用 Angular2/Ionic2 标记输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38970168/